logo

Connect Four Game

This project was to recreate connect four, and have it working within the canvas. The game itself can be played above. You can choose which color token you would like to be. After a player has won the game, click the restart button to set the game back to it's original state.

Tools: Canvas

Language: Javascript, HTML5/CSS3

Controls:
A Key - Cursor Left
D Key - Cursor Right
S Key - Place Token

Game Code

var thegame = document.getElementById("game"); var ctx = thegame.getContext('2d'); document.addEventListener("keydown", keyDownHandler, false); document.addEventListener("keyup",keyUpHandler, false); function tokenobj (width, height, x, y, thecolor, therow, thecol) { this.X = x; this.Y = y; this.color = thecolor; this.Width = width; this.Height = height; this.row = therow; this.col = thecol; } function drawtoken(token){ ctx.fillStyle = token.color; ctx.beginPath(); ctx.arc(token.X,token.Y,token.Width,token.Height,2*Math.PI); ctx.closePath(); ctx.fill(); } var board = [ [0,0,0,0,0,0,0], [0,0,0,0,0,0,0], [0,0,0,0,0,0,0], [0,0,0,0,0,0,0], [0,0,0,0,0,0,0], [0,0,0,0,0,0,0], ]; var playerturn = 1; var isleft = false; var isright = false; var isselect = false; var curcol = 0; var row1 = 5; var row2 = 5; var row3 = 5; var row4 = 5; var row5 = 5; var row6 = 5; var row7 = 5; var gameover = false; function drawboard() { var i = 0; var token = new Array(); var theboard = board; if (gameover == false) { for (var row = 0; row < 6; row++){ for(var col = 0; col < 7; col++){ var tokenloc = theboard[row][col]; var x = (col * 64 + 55); var y = (row * 64 + 55); if (tokenloc == 0 || tokenloc == 1 || tokenloc == 2){ var color = ''; switch (tokenloc) { case 0: color = '#BEC7C4'; break; case 1: color = '#ff0000'; break; case 2: color = '#000000'; break; } token[i] = new tokenobj(24, 24, x, y, color); ctx.fillStyle = token[i].color; ctx.beginPath(); ctx.arc(token[i].X,token[i].Y,token[i].Width,0,2*Math.PI); ctx.closePath(); ctx.fill(); i++; } } } } } function keyDownHandler(event) { var key = String.fromCharCode(event.keyCode); if (key == "A") { isleft = true; } else if (key == "D") { isright = true; } else if (key == "S") { isselect = true; } } function keyUpHandler(event) { var key = String.fromCharCode(event.keyCode); if (key == "A") { isleft = false; } else if (key == "D") { isright = false; } else if (key == "S") { isselect = false; } } function movement() { if (isleft == true) { if (curcol > 0) { curcol--; isleft = false; } else if (curcol <= 0) { curcol = 6; isleft = false; } } if (isright == true) { if (curcol < 6) { curcol++; isright = false; } else if (curcol >= 6) { curcol = 0; isright = false; } } if (isselect == true) { if (curcol == 0) { changetoken(row1, curcol); if(row1 != 0){ row1--; } isselect = false; } else if (curcol == 1) { changetoken(row2, curcol); if(row2 != 0){ row2--; } isselect = false; } else if (curcol == 2) { changetoken(row3, curcol); if(row3 != 0){ row3--; } isselect = false; } else if (curcol == 3) { changetoken(row4, curcol); if(row4 != 0){ row4--; } isselect = false; } else if (curcol == 4) { changetoken(row5, curcol); if(row5 != 0){ row5--; } isselect = false; } else if (curcol == 5) { changetoken(row6, curcol); if(row6 != 0){ row6--; } isselect = false; } else if (curcol == 6) { changetoken(row7, curcol); if(row7 != 0){ row7--; } isselect = false; } } } function changetoken(row, col) { var p1c = document.getElementById("p1"); var p2c = document.getElementById("p2"); if (playerturn == 1) { if (p1c.selectedIndex == 0) { if (board[row][col] == 0) { board[row][col] = 1; } } else if (p1c.selectedIndex == 1) { if (board[row][col] == 0) { board[row][col] = 2; } } playerturn = 2; } else if (playerturn == 2) { if (p2c.selectedIndex == 0) { if (board[row][col] == 0) { board[row][col] = 1; } } else if (p2c.selectedIndex == 1) { if (board[row][col] == 0) { board[row][col] = 2; } } playerturn = 1; } } function drawsel() { var p1c = document.getElementById("p1"); var p2c = document.getElementById("p2"); var x = 20; switch(curcol) { case 0: x = 20; break; case 1: x = 84; break; case 2: x = 148; break; case 3: x = 212; break; case 4: x = 276; break; case 5: x = 340; break; case 6: x = 404; break; } var y = 20; var color = ''; if (playerturn == 1) { if (p1c.selectedIndex == 0) { color = '#ff0000'; } else if (p1c.selectedIndex == 1) { color = '#000000'; } } else if (playerturn == 2) { if (p2c.selectedIndex == 0) { color = '#ff0000'; } else if (p2c.selectedIndex == 1) { color = '#000000'; } } ctx.strokeStyle = color; ctx.strokeRect(x+0.5, y+0.5, 68, 400); } function restartboard() { for (var row = 0; row < 6; row++){ for(var col = 0; col < 7; col++){ board[row][col] = 0; } } row1 = 5; row2 = 5; row3 = 5; row4 = 5; row5 = 5; row6 = 5; row7 = 5; gameover = false; document.getElementById("displaythewinner").innerHTML = ``; drawboard(); } function whowon(){ for (var row = 0; row < 6; row++){ for(var col = 0; col < 7; col++){ if (board[row][col] === 1) { if (row === 0 || row === 1 || row === 2) { if (board[row + 1][col] === 1 && board[row + 2][col] === 1 && board[row + 3][col] === 1) { displaywinner(0); return; } } if (col === 0 || col === 1 || col === 2 || col === 3) { if (board[row][col + 1] === 1 && board[row][col + 2] === 1 && board[row][col + 3] === 1) { displaywinner(0); return; } } if (row === 0 || row === 1 || row === 2) { if (col === 0 || col === 1 || col === 2 || col === 3) { if (board[row + 1][col + 1] === 1 && board[row + 2][col + 2] === 1 && board[row + 3][col + 3] === 1) { displaywinner(0); return; } } if (col === 3 || col === 4 || col === 5 || col === 6) { if (board[row + 1][col - 1] === 1 && board[row + 2][col - 2] === 1 && board[row + 3][col - 3] === 1) { displaywinner(0); return; } } } } else if (board[row][col] === 2) { if (row === 0 || row === 1 || row === 2) { if (board[row + 1][col] === 2 && board[row + 2][col] === 2 && board[row + 3][col] === 2) { displaywinner(1); return; } } if (col === 0 || col === 1 || col === 2 || col === 3) { if (board[row][col + 1] === 2 && board[row][col + 2] === 2 && board[row][col + 3] === 2) { displaywinner(1); return; } } if (row === 0 || row === 1 || row === 2) { if (col === 0 || col === 1 || col === 2 || col === 3) { if (board[row + 1][col + 1] === 2 && board[row + 2][col + 2] === 2 && board[row + 3][col + 3] === 2) { displaywinner(1); return; } } if (col === 3 || col === 4 || col === 5 || col === 6) { if (board[row + 1][col - 1] === 2 && board[row + 2][col - 2] === 2 && board[row + 3][col - 3] === 2) { displaywinner(1); return; } } } } } } } function displaywinner(thecolor) { drawboard(); gameover = true; var p1c = document.getElementById("p1"); var p2c = document.getElementById("p2"); if (p1c.selectedIndex == 0 && thecolor == 0) { document.getElementById("displaythewinner").innerHTML = `Player 1 Wins!`; } else if (p1c.selectedIndex == 1 && thecolor == 1) { document.getElementById("displaythewinner").innerHTML = `Player 1 Wins!`; } else if (p2c.selectedIndex == 0 && thecolor == 0) { document.getElementById("displaythewinner").innerHTML = `Player 2 Wins!`; } else if (p2c.selectedIndex == 1 && thecolor == 1) { document.getElementById("displaythewinner").innerHTML = `Player 2 Wins!`; } } function startthegame() { ctx.clearRect(0,0,game.width, game.height); drawboard(); drawsel(); movement(); whowon(); setTimeout(startthegame, 1000/60); } startthegame();