Upgrades: - 12:47 instead of setting currentColumns there, you can set it empty and under the board.push(row) you can say currColumns.push(5) - You can set the win text to say "Red Turn" and "Yellow Turn" in the setPiece function after setting the currPlayer
Hey thank you so much for making this video. I'm trying to make a more complex version of this for my portfolio. As a beginner though I do wish this was a bit more "beginner" friendly. You take time to explain the overarching ideas but when it comes to the coding itself you go really fast - at least for me haha. Would have been great if you explained why you're doing what you're doing while coding - but maybe that would have been frustrating for people more experienced.
Yep, as you mentioned, there are people who have different level of experience. I generally define beginner as someone who recently learned how to program in JavaScript (functions, loops, arrays, etc). Definitely take your time when following along, pause the video, go back, so that you fully understand every line of code!
Check out the playlist of web project tutorials here! th-cam.com/play/PLnKe36F30Y4bLhA-st9sC4ZthyV7nsL2Q.html Got a tutorial suggestion? Let me know down below!
how to code WORDLE: th-cam.com/video/ckjRsPaWHX8/w-d-xo.html how to code SUDOKU: th-cam.com/video/S4uRtTb8U-U/w-d-xo.html how to code 2048: th-cam.com/video/XM2n1gu4530/w-d-xo.html
Could you explain why the click event listener went inside the setGame function? I thought it was only for setting the game by adding the rows and cols; and their corresponding HTML elements!
So when our webpage loads, the setGame function is called. This function is where we put the code to initialize the game with. So every tile we create, we set a click event listener for it. We are not creating a function here, but instead binding a function to the tile when it is clicked on. Without this, clicking on the tile does nothing.
There is a small glitch, the game doesn't recognize four in a row from the bottom left corner when the four consecutive pieces go ups from left to right.
Kenny, thanks very much for this GREAT SERIES. Quick Question: how do we make this a 2-player game online? I posted this to a website and tested on a second device and the problem is the two instances function independently. I mean when player 1 makes a move - this is not updated on the second screen. How do I fix this? Thanks in advance - Liz
Hi Liz, Turning this into a 2 player game would require you to learn a bit of computer networking to connect 2 instances of the game so that they can communicate and play with one another. (A tutorial on how to create a simple chatroom using a web socket may help with this) After you've figured that one out, you need to figure out how to create isolated rooms with different web links so that only 2 people can interact with a single instance of the game. Otherwise, you'd have multiple people trying to play on a single 2-player connect4 board,
So connect 4 isn't as easy to code as I thought (for me). Back to studying so I can get my head round it and be able to think that's what I should write
Should be simple. Just keep an int counter for the number of turns and increment it every time a player places a piece. If the number of turns == 7*6 (the number of slots) and there’s no winner, then it’s a tie
Upgrades:
- 12:47 instead of setting currentColumns there, you can set it empty and under the board.push(row) you can say currColumns.push(5)
- You can set the win text to say "Red Turn" and "Yellow Turn" in the setPiece function after setting the currPlayer
If you add the css property `box-sizing: border-box;`, you won't need to change the widht/height after adding a border.
I really enjoyed the way you explain the algorithms with drawing! Please keep doing it! It is really good!!!
Your explanation of the sliding window concept helped me find value in studying DS&A. Keep up the great work!
Hey thank you so much for making this video. I'm trying to make a more complex version of this for my portfolio. As a beginner though I do wish this was a bit more "beginner" friendly. You take time to explain the overarching ideas but when it comes to the coding itself you go really fast - at least for me haha. Would have been great if you explained why you're doing what you're doing while coding - but maybe that would have been frustrating for people more experienced.
Yep, as you mentioned, there are people who have different level of experience. I generally define beginner as someone who recently learned how to program in JavaScript (functions, loops, arrays, etc). Definitely take your time when following along, pause the video, go back, so that you fully understand every line of code!
Im just a beginner, but I think this is the best connect four code I have found on youtube and also very well explained 👏
Thank you for the great video, I came from another connect four tutorial, your way of coding is beautiful!
Thank you so much! this was super helpful
Bro you’re a legend. It’s simple but to the point, and you do a good job explaining! I can tweak this and modify it to my existing projects. Thank you
glad you found the tutorial helpful!
Thanks for your explanation learned a lot of concepts
Can you please tell how to make "Try again" for the game. I try to clear the board and make it clickable again, but it doesn't happen.
I was trying to do the same; maybe add a HTML button and call the setGame function with that? We'd also need a click event listener there!
Check out the playlist of web project tutorials here!
th-cam.com/play/PLnKe36F30Y4bLhA-st9sC4ZthyV7nsL2Q.html
Got a tutorial suggestion? Let me know down below!
At 10:12, when you used the keyword "this", you mean the 'tile' object, right? I'm learning the "this" keyword in js right now.
I am trying to add a “restart button” for this .. I’m unable to make it to work :(
how to code WORDLE: th-cam.com/video/ckjRsPaWHX8/w-d-xo.html
how to code SUDOKU: th-cam.com/video/S4uRtTb8U-U/w-d-xo.html
how to code 2048: th-cam.com/video/XM2n1gu4530/w-d-xo.html
What would you recommend doing if it's a tie in the game?
this code doesnt end, as it tells you who won but you can still add counters, whys that ?
Could you explain why the click event listener went inside the setGame function? I thought it was only for setting the game by adding the rows and cols; and their corresponding HTML elements!
So when our webpage loads, the setGame function is called. This function is where we put the code to initialize the game with. So every tile we create, we set a click event listener for it. We are not creating a function here, but instead binding a function to the tile when it is clicked on. Without this, clicking on the tile does nothing.
There is a small glitch, the game doesn't recognize four in a row from the bottom left corner when the four consecutive pieces go ups from left to right.
Are you sure you didn’t make an error on your part?
You can try it here: www.kennyyipcoding.com/Connect4/
Kenny, thanks very much for this GREAT SERIES. Quick Question: how do we make this a 2-player game online? I posted this to a website and tested on a second device and the problem is the two instances function independently. I mean when player 1 makes a move - this is not updated on the second screen. How do I fix this? Thanks in advance - Liz
Hi Liz,
Turning this into a 2 player game would require you to learn a bit of computer networking to connect 2 instances of the game so that they can communicate and play with one another. (A tutorial on how to create a simple chatroom using a web socket may help with this) After you've figured that one out, you need to figure out how to create isolated rooms with different web links so that only 2 people can interact with a single instance of the game. Otherwise, you'd have multiple people trying to play on a single 2-player connect4 board,
@@KennyYipCoding Thanks for the prompt reply and concise answer. I get it. You're a terrific teacher - please keep up the good work!
I could never do this alone. :(
you never have to tho
Nice video
5:43
How do you append
So connect 4 isn't as easy to code as I thought (for me).
Back to studying so I can get my head round it and be able to think that's what I should write
Perhaps take a look at my tutorial on tic tac toe or rock paper scissors. Might be easier to start with.
Can you please tell me how to make a "Draw or tie" in this game?
Should be simple. Just keep an int counter for the number of turns and increment it every time a player places a piece. If the number of turns == 7*6 (the number of slots) and there’s no winner, then it’s a tie