const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const board = [ ['', '', ''], ['', '', ''], ['', '', ''] ]; const player = 'X'; const computer = 'O'; let currentPlayer = player; let gameover = false; let level = 1; let playerScore = 0; let computerScore = 0; function drawBoard() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.moveTo(0, 133); ctx.lineTo(400, 133); ctx.moveTo(0, 266); ctx.lineTo(400, 266); ctx.moveTo(133, 0); ctx.lineTo(133, 400); ctx.moveTo(266, 0); ctx.lineTo(266, 400); ctx.stroke(); for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { ctx.font = '60px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(board[i][j], j * 133 + 66, i * 133 + 66); } } } function checkWin() { for (let i = 0; i < 3; i++) { if (board[i][0] === board[i][1] && board[i][1] === board[i][2] && board[i][0] !== '') { return true; } if (board[0][i] === board[1][i] && board[1][i] === board[2][i] && board[0][i] !== '') { return true; } } if (board[0][0] === board[1][1] && board[1][1] === board[2][2] && board[0][0] !== '') { return true; } if (board[0][2] === board[1][1] && board[1][1] === board[2][0] && board[0][2] !== '') { return true; } return false; } function checkDraw() { for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (board[i][j] === '') { return false; } } } return true; } function computerMove() { if (level === 1) { while (true) { const i = Math.floor(Math.random() * 3); const j = Math.floor(Math.random() * 3); if (board[i][j] === '') { board[i][j] = computer; break; } } } else if (level === 2) { let moved = false; for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (board[i][j] === '') { board[i][j] = computer; if (checkWin()) { moved = true; break; } board[i][j] = ''; } } if (moved) { break; } } if (!moved) { while (true) { const i = Math.floor(Math.random() * 3); const j = Math.floor(Math.random() * 3); if (board[i][j] === '') { board[i][j] = computer; break; } } } } else if (level === 3) { let moved = false; for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (board[i][j] === '') { board[i][j] = computer; if (checkWin()) { moved = true; break; } board[i][j] = ''; } } if (moved) { break; } } if (!moved) { for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (board[i][j] === '') { board[i][j] = player; if (checkWin()) { board[i][j] = computer; moved = true; break; } board[i][j] = ''; } } if (moved) { break; } } } if (!moved) { if (board[1][1] === '') { board[1][1] = computer; } else { while (true) { const i = Math.floor(Math.random() * 3); const j = Math.floor(Math.random() * 3); if (board[i][j] === '') { board[i][j] = computer; break; } } } } } } function reset() { board.forEach((row, i) => { row.forEach((cell, j) => { board[i][j] = ''; }); }); currentPlayer = player; gameover = false; drawBoard(); } function drawScore() { ctx.font = '30px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(`Player: ${playerScore} - Computer: ${computerScore}`, 200, 380); } drawBoard(); drawScore(); document.addEventListener('keydown', (event) => { if (gameover) { reset(); return; } if (event.keyCode === 38) { // up arrow // move up } else if (event.keyCode === 40) { // down arrow // move down } else if (event.keyCode === 37) { // left arrow // move left } else if (event.keyCode === 39) { // right arrow // move right } else if (event.keyCode === 32) { // space bar // select if (currentPlayer === player) { // player move let moved = false; for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (board[i][j] === '') { board[i][j] = player; if (checkWin()) { playerScore++; gameover = true; } else if (checkDraw()) { gameover = true; } else { currentPlayer = computer; } moved = true; break; } } if (moved) { break; } } if (!moved) { gameover = true; } } else { // computer move computerMove(); if (checkWin()) { computerScore++; gameover = true; } else if (checkDraw()) { gameover = true; } else { currentPlayer = player; } } } else if (event.keyCode === 49) { // 1 key level = 1; } else if (event.keyCode === 50) { // 2 key level = 2; } else if (event.keyCode === 51) { // 3 key level = 3; } drawBoard(); drawScore(); });

GPTgame

Sign up for free tokens!

PLAY TIC TAC GAME VS COMPUTER WITH SCORE BOARD AND 3 LEVELS SETUP

GPTgame