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

No:42347

108

←

Prev Next

→

Tictactoe
Developer User18028｜Date and time 24/2/11 12:05:34
Build time 16.639 sec｜Game capacity 5.288KB｜

Script

Tic Tac Toe

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Tic Tac Toe</title>
</head>
<body>
    <center>
        <h1>Tic Tac Toe</h1>
        <canvas id="gameCanvas" width="600" height="600"></canvas>
    </center>

// Fungsi untuk menggambar papan dan simbol-simbol
        function drawBoard() {
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);
            canvasContext.strokeStyle = '#000000';
            canvasContext.lineWidth = 10;
            canvasContext.beginPath();
            canvasContext.moveTo(200, 0);
            canvasContext.lineTo(200, 600);
            canvasContext.moveTo(400, 0);
            canvasContext.lineTo(400, 600);
            canvasContext.moveTo(0, 200);
            canvasContext.lineTo(600, 200);
            canvasContext.moveTo(0, 400);
            canvasContext.lineTo(600, 400);
            canvasContext.stroke();
            canvasContext.closePath();

for (var row = 0; row < 3; row++) {
                for (var col = 0; col < 3; col++) {
                    if (board[row][col] === 'X') {
                        drawX(row, col);
                    } else if (board[row][col] === 'O') {
                        drawO(row, col);
                    }
                }
            }
        }

// Fungsi untuk menggambar simbol X pada kotak yang dipilih
        function drawX(row, col) {
            canvasContext.lineWidth = 5;
            canvasContext.beginPath();
            canvasContext.moveTo(col * 200 + 100, row * 200 + 100);
            canvasContext.lineTo(col * 200 + 300, row * 200 + 300);
            canvasContext.moveTo(col * 200 + 300, row * 200 + 100);
            canvasContext.lineTo(col * 200 + 100, row * 200 + 300);
            canvasContext.stroke();
            canvasContext.closePath();
        }

// Fungsi untuk menggambar simbol O pada kotak yang dipilih
        function drawO(row, col) {
            canvasContext.lineWidth = 5;
            canvasContext.beginPath();
            canvasContext.arc(col * 200 + 200, row * 200 + 200, 90, 0, Math.PI * 2);
            canvasContext.stroke();
            canvasContext.closePath();
        }

// Fungsi untuk mengecek apakah ada pemenang
        function checkWinner() {
            for (var i = 0; i < winningCombinations.length; i++) {
                var row1 = winningCombinations[i][0][0];
                var col1 = winningCombinations[i][0][1];
                var row2 = winningCombinations[i][1][0];
                var col2 = winningCombinations[i][1][1];
                var row3 = winningCombinations[i][2][0];
                var col3 = winningCombinations[i][2][1];

if (board[row1][col1] === board[row2][col2] && board[row1][col1] === board[row3][col3] && board[row1][col1] !== '') {
                    gameOver = true;
                    return board[row1][col1];
                }
            }

for (var row = 0; row < 3; row++) {
                for (var col = 0; col < 3; col++) {
                    if (board[row][col] === '') {
                        return '';
                    }
                }
            }

gameOver = true;
            return 'draw';
        }

// Fungsi ketika kotak pada papan diklik
        function boxClicked(event) {
            if (gameOver) {
                return;
            }

var mouseX = event.pageX - canvas.offsetLeft;
            var mouseY = event.pageY - canvas.offsetTop;
            var row = Math.floor(mouseY / 200);
            var col = Math.floor(mouseX / 200);

if (board[row][col] !== '') {
                return;
            }

board[row][col] = currentPlayer;
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            drawBoard();

var winner = checkWinner();

if (winner === 'X' || winner === 'O') {
                alert('Pemain ' + winner + ' Menang!');
            } else if (winner === 'draw') {
                alert('Permainan Berakhir dengan Hasil Draw!');
            }
        }

// Fungsi untuk memulai permainan
        function startGame() {
            canvas = document.getElementById('gameCanvas');
            canvasContext = canvas.getContext('2d');
            currentPlayer = 'X';
            gameOver = false;
            board = [
                ['', '', ''],
                ['', '', ''],
                ['', '', '']
            ];

winningCombinations = [
                [[0, 0], [0, 1], [0, 2]],
                [[1, 0], [1, 1], [1, 2]],
                [[2, 0], [2, 1], [2, 2]],
                [[0, 0], [1, 0], [2, 0]],
                [[0, 1], [1, 1], [2, 1]],
                [[0, 2], [1, 2], [2, 2]],
                [[0, 0], [1, 1], [2, 2]],
                [[0, 2], [1, 1], [2, 0]]
            ];

drawBoard();
            canvas.addEventListener('mousedown', boxClicked);
        }

// Memulai permainan saat halaman dimuat
        window.onload = function () {
            startGame();
        };
    </script>
</body>
</html>