Rock Paper Scissors Tic-Tac-Toe
    
Choose your move:
    Rock
    Paper
    Scissors

    
Game Board
    
    


    
        const board = document.getElementById('board');
        const resultElement = document.getElementById('result');
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const cellSize = 100;
        const grid = Array.from({ length: 3 }, () => new Array(3).fill(null));
        let currentPlayer = 'X';

        function drawBoard() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Draw vertical lines
            for (let x = 0; x < 4; x++) {
                ctx.beginPath();
                ctx.moveTo(x * cellSize, 0);
                ctx.lineTo(x * cellSize, canvas.height);
                ctx.stroke();
            }

            // Draw horizontal lines
            for (let y = 0; y < 4; y++) {
                ctx.beginPath();
                ctx.moveTo(0, y * cellSize);
                ctx.lineTo(canvas.width, y * cellSize);
                ctx.stroke();
            }
        }

        function drawX(x, y) {
            const centerX = x * cellSize + cellSize / 2;
            const centerY = y * cellSize + cellSize / 2;

            ctx.beginPath();
            ctx.moveTo(centerX - cellSize / 2, centerY - cellSize / 2);
            ctx.lineTo(centerX + cellSize / 2, centerY + cellSize / 2);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(centerX + cellSize / 2, centerY - cellSize / 2);
            ctx.lineTo(centerX - cellSize / 2, centerY + cellSize / 2);
            ctx.stroke();
        }

        function drawO(x, y) {
            const centerX = x * cellSize + cellSize / 2;
            const centerY = y * cellSize + cellSize / 2;
            const radius = cellSize / 2 - 5;

            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
            ctx.stroke();
        }

        function checkWinner() {
            for (let row = 0; row < 3; row++) {
                if (grid[row][0] === grid[row][1] && grid[row][1] === grid[row][2] && grid[row][0] !== null) {
                    return grid[row][0];
                }
            }

            for (let col = 0; col < 3; col++) {
                if (grid[0][col] === grid[1][col] && grid[1][col] === grid[2][col] && grid[0][col] !== null) {
                    return grid[0][col];
                }
            }

            if (grid[0][0] === grid[1][1] && grid[1][1] === grid[2][2] && grid[0][0] !== null) {
                return grid[0][0];
            }

            if (grid[0][2] === grid[1][1] && grid[1][1] === grid[2][0] && grid[0][2] !== null) {
                return grid[0][2];
            }

            return null;
        }

        function drawWinLine() {
            ctx.beginPath();
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 4;

            if (winningLine === "row0") {
                ctx.moveTo(0, cellSize / 2);
                ctx.lineTo(canvas.width, cellSize / 2);
            } else if (winningLine === "row1") {
                ctx.moveTo(0, cellSize + cellSize / 2);
                ctx.lineTo(canvas.width, cellSize + cellSize / 2);
            } else if (winningLine === "row2") {
                ctx.moveTo(0, 2 * cellSize + cellSize / 2);
                ctx.lineTo(canvas.width, 2 * cellSize + cellSize / 2);
            } else if (winningLine === "column0") {
                ctx.moveTo(cellSize / 2, 0);
                ctx.lineTo(cellSize / 2, canvas.height);
            } else if (winningLine === "column1") {
                ctx.moveTo(cellSize + cellSize / 2, 0);
                ctx.lineTo(cellSize + cellSize / 2, canvas.height);
            } else if (winningLine === "column2") {
                ctx.moveTo(2 * cellSize + cellSize / 2, 0);
                ctx.lineTo(2 * cellSize + cellSize / 2, canvas.height);
            } else if (winningLine === "diagonalLeft") {
                ctx.moveTo(0, 0);
                ctx.lineTo(canvas.width, canvas.height);
            } else if (winningLine === "diagonalRight") {
                ctx.moveTo(canvas.width, 0);
                ctx.lineTo(0, canvas.height);
            }

            ctx.stroke();
        }

        function checkWinCondition() {
            const winner = checkWinner();
            if (winner) {
                alertHisa(`Player ${winner} wins!`);
                ;
            }
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            drawBricks();
            drawBall();
            drawPaddle();
            drawScore();

            checkCollision();
            checkWinCondition();

            requestAnimationFrame(draw);
        }

        function drawBricks() {
            for (let c = 0; c < brickColumnCount; c++) {
                for (let r = 0; r < brickRowCount; r++) {
                    if (bricks[c][r].status === 1) {
                        const brickX = c * (brickWidth + brick