Coding Connect 4 with JavaScript

Coding Connect 4 with HTML, CSS and JavaScript.

Chapters
05:10 Create grid
10:30 Hover pieces above board
19:00 Drop pieces
27:20 Red and Yellow Pieces
32:40 Animate dropping pieces
38:58 Check for win or draw
53:25 Improve styling
57:02 Game Over Modal

[daswiney]

Thank you, I needed some help coding for my bootcamo I’m in and you had the best video out on yt that explained your methods, I tweaked a lot of things, and idk if you forgot to fix the bug or if I missed you fixing it but I had to solve where you can spam click pieces but was able to figure it out rather quickly, do you have any videos explaining key frames/animations a bit more? Would love to see that

[daswiney]

Also your diagonal win check doesn’t check for every win I had to add another check in mine

[lyfes_gud]

thanks for the tutorial. how can i highlight the winning pieces?

[mrys]

I'm new to coding and just started school. I was creating my own while following along and not sure what i did wrong. Would you be able to help me?

[daswiney]

when i put my git link it didnt post, but what do you think about the following check for wins(how you had yours it was missing some diagonals)


function playerWin(playerTurn, pieces){
for (let index = 0; index < 42; index++) {
//Check horizontal win at starting index
if(
index % 7 < 4 &&
pieces[index] === playerTurn &&
pieces[index + 1] === playerTurn &&
pieces[index + 2] === playerTurn &&
pieces[index + 3] === playerTurn
||
//Check vertical win at starting index
index < 21 &&
pieces[index] === playerTurn &&
pieces[index + 7] === playerTurn &&
pieces[index + 14] === playerTurn &&
pieces[index + 21] === playerTurn
||
//Check diagonal win (top left to bottom right) at starting index
index % 7 < 4 &&
index < 18 &&
pieces[index] === playerTurn &&
pieces[index + 8] === playerTurn &&
pieces[index + 16] === playerTurn &&
pieces[index + 24] === playerTurn
||
//Check diagonal win (top right to bottom left) at starting index
index % 7 >= 3 &&
index < 21 &&
pieces[index] === playerTurn &&
pieces[index + 6] === playerTurn &&
pieces[index + 12] === playerTurn &&
pieces[index + 18] === playerTurn
||
//Check diagonal win (bottom left to top right) at starting index
index % 7 < 4 &&
index >= 21 &&
pieces[index] === playerTurn &&
pieces[index - 6] === playerTurn &&
pieces[index - 12] === playerTurn &&
pieces[index - 18] === playerTurn
||
//Check diagonal win (bottom right to top left) at starting index
index % 7 >= 3 &&
index >= 21 &&
pieces[index] === playerTurn &&
pieces[index - 8] === playerTurn &&
pieces[index - 16] === playerTurn &&
pieces[index - 24] === playerTurn
) {
clearInterval(intervalId)
return true;
}

}
return false;
}