Scribd
Upload
8 views1 page

Tic Tac Toe Game with JavaScript Canvas

The document is an HTML code for a Tic Tac Toe game that uses a canvas for rendering the game board. It includes JavaScript functions to draw the board and check for a winner. The game allows two players to take turns placing their marks on a 3x3 grid.

Uploaded by

fukreedits
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 views1 page

Tic Tac Toe Game with JavaScript Canvas

The document is an HTML code for a Tic Tac Toe game that uses a canvas for rendering the game board. It includes JavaScript functions to draw the board and check for a winner. The game allows two players to take turns placing their marks on a 3x3 grid.

Uploaded by

fukreedits
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<style>
canvas { background: #eee; margin-top: 20px; display: block; margin: auto; }
</style>
</head>
<body>
<canvas id="game" width="300" height="300"></canvas>
<script>
const canvas = [Link]("game");
const ctx = [Link]("2d");
const size = 100;
let board = [["", "", ""], ["", "", ""], ["", "", ""]];
let current = "X";

function drawBoard() {
[Link](0, 0, 300, 300);
for (let i = 1; i < 3; i++) {
[Link]();
[Link](i * size, 0);
[Link](i * size, 300);
[Link]();
[Link]();
[Link](0, i * size);
[Link](300, i * size);
[Link]();
}
for (let r = 0; r < 3; r++)
for (let c = 0; c < 3; c++) {
let val = board[r][c];
if (val) {
[Link] = "60px Arial";
[Link](val, c * size + 30, r * size + 70);
}
}
}

function checkWinner() {
for (let i = 0; i < 3; i++) {
if (board[i][0] && board[i][0] == board[i][1] && board[i][1] == board[i][2])
return board[i][0];
if (board

You might also like