Tic-tac-toe but in space's game

Click here for free DL of the app version that can save data.

No:44794

←

Prev Next

→

Tic-tac-toe but in space
Developer User19470｜Date and time 24/2/19 5:48:29
Build time 9.16 sec｜Game capacity 3.608KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Space Tic-Tac-Toe</title>
</head>
<body>
    <canvas id="gameCanvas" width="300" height="300"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        const CELL_SIZE = 100;
        
        let board = [
            ['', '', ''],
            ['', '', ''],
            ['', '', '']
        ];
        
        let player = 'X';
        
        canvas.addEventListener('click', function(event) {
            const rect = canvas.getBoundingClientRect();
            const x = Math.floor((event.clientX - rect.left) / CELL_SIZE);
            const y = Math.floor((event.clientY - rect.top) / CELL_SIZE);
            
            if (board[y][x] === '') {
                board[y][x] = player;
                if (checkWinner()) {
                    alert(player + ' wins!');
                    resetGame();
                } else if (boardIsFull()) {
                    alert('It\'s a tie!');
                    resetGame();
                } else {
                    player = player === 'X' ? 'O' : 'X';
                }
                drawBoard();
            }
        });
        
        function checkWinner() {
            for (let i = 0; i < 3; i++) {
                if (board[i][0] !== '' && board[i][0] === board[i][1] && board[i][0] === board[i][2]) {
                    return true;
                }
                if (board[0][i] !== '' && board[0][i] === board[1][i] && board[0][i] === board[2][i]) {
                    return true;
                }
            }
            if (board[0][0] !== '' && board[0][0] === board[1][1] && board[0][0] === board[2][2]) {
                return true;
            }
            if (board[0][2] !== '' && board[0][2] === board[1][1] && board[0][2] === board[2][0]) {
                return true;
            }
            return false;
        }
        
        function boardIsFull() {
            for (let row of board) {
                for (let cell of row) {
                    if (cell === '') {
                        return false;
                    }
                }
            }
            return true;
        }
        
        function drawBoard() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            ctx.strokeStyle = 'white';
            ctx.lineWidth = 2;
            
            for (let i = 1; i < 3; i++) {
                ctx.beginPath();
                ctx.moveTo(i * CELL_SIZE, 0);
                ctx.lineTo(i * CELL_SIZE, canvas.height);
                ctx.stroke();
                
                ctx.beginPath();
                ctx.moveTo(0, i * CELL_SIZE);
                ctx.lineTo(canvas.width, i * CELL_SIZE);
                ctx.stroke();
            }
            
            ctx.font = '60px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = 'white';
            
            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 3; j++) {
                    if (board[i][j] !== '') {
                        ctx.fillText(board[i][j], j * CELL_SIZE + CELL_SIZE / 2, i * CELL_SIZE + CELL_SIZE / 2);
                    }
                }
            }
        }
        
        function resetGame() {
            board = [
                ['', '', ''],
                ['', '', ''],
                ['', '', '']
            ];
            player = 'X';
            drawBoard();
        }
        
        drawBoard();
    </script>
</body>
</html>