Marubatsu game There are 3 × 3 squares in a square that does not change in size, and the person who writes only circles in the squares (hereinafter referred to as the player) and the person who writes only crosses (hereinafter referred to as AI) is divided.The player draws three circles in a row. If you can write in one line vertically, horizontally, or diagonally, you will move to the page called "Winning" AI aims to write three Xs in a row vertically, horizontally, or diagonally Three consecutive Xs vertically, horizontally, or diagonally If you can make any one row, it will move to the losing page.In addition, the AI does not allow the player to make a row of three circles in a row vertically, horizontally, or diagonally, so that the player can make two circles in a row vertically, horizontally, or diagonally. If you write a row, fill in the third square in that row with a cross's game

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

No:1567

3865

←

Prev Next

→

Marubatsu game There are 3 × 3 squares in a square..ALL
Developer User3293｜Date and time 23/6/18 18:38:52
Build time 52.204 sec｜Game capacity 4.804KB｜

Script

※絵文字の使用は省略しています。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>マルバツゲーム</title>
    <style type="text/css">
        #board {display: flex; flex-wrap: wrap; width: 300px; height: 300px; border: 3px solid black;}
        .cell {width: 100px; height: 100px; font-size: 64px; text-align: center; line-height: 100px; cursor: pointer;}
    </style>
</head>
<body>
    <div id="board">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <script type="text/javascript">
        var board = document.getElementById("board");
        var cells = document.getElementsByClassName("cell");
        var currentPlayer = "O";
        
        function switchPlayer() {
            currentPlayer = (currentPlayer === "O") ? "X" : "O";
        }
        
        function makeMove(cell) {
            if (cell.innerHTML === "") {
                cell.innerHTML = currentPlayer;
                if (checkWin()) {
                    alert(currentPlayer + "の勝ち！")
                    clearBoard();
                    return;
                }
                switchPlayer();
                aiMove();
            }
        }
        
        function checkWin() {
            if (cells[0].innerHTML && cells[0].innerHTML === cells[1].innerHTML && cells[1].innerHTML === cells[2].innerHTML) {
                return true;
            }
            if (cells[3].innerHTML && cells[3].innerHTML === cells[4].innerHTML && cells[4].innerHTML === cells[5].innerHTML) {
                return true;
            }
            if (cells[6].innerHTML && cells[6].innerHTML === cells[7].innerHTML && cells[7].innerHTML === cells[8].innerHTML) {
                return true;
            }
            if (cells[0].innerHTML && cells[0].innerHTML === cells[3].innerHTML && cells[3].innerHTML === cells[6].innerHTML) {
                return true;
            }
            if (cells[1].innerHTML && cells[1].innerHTML === cells[4].innerHTML && cells[4].innerHTML === cells[7].innerHTML) {
                return true;
            }
            if (cells[2].innerHTML && cells[2].innerHTML === cells[5].innerHTML && cells[5].innerHTML === cells[8].innerHTML) {
                return true;
            }
            if (cells[0].innerHTML && cells[0].innerHTML === cells[4].innerHTML && cells[4].innerHTML === cells[8].innerHTML) {
                return true;
            }
            if (cells[2].innerHTML && cells[2].innerHTML === cells[4].innerHTML && cells[4].innerHTML === cells[6].innerHTML) {
                return true;
            }
            return false;
        }
        
        function clearBoard() {
            Array.prototype.forEach.call(cells, function(cell) {
                cell.innerHTML = "";
            });
        }
        
        function aiMove() {
            var selectedCell = null;
            
            // Check for winning move
            for (var i = 0; i < cells.length; i++) {
                if (cells[i].innerHTML === "") {
                    cells[i].innerHTML = "X";
                    if (checkWin()) {
                        alert("AIの勝ち！");
                        clearBoard();
                        return;
                    }
                    cells[i].innerHTML = "";
                    selectedCell = cells[i];
                }
            }
            
            // Check for blocking move
            for (var i = 0; i < cells.length; i++) {
                if (cells[i].innerHTML === "") {
                    cells[i].innerHTML = "O";
                    if (checkWin()) {
                        cells[i].innerHTML = "X";
                        checkWin();
                        switchPlayer();
                        return;
                    }
                    cells[i].innerHTML = "";
                }
            }
            
            // Choose random cell
            do {
                var randomIndex = Math.floor(Math.random() * 9);
                selectedCell = cells[randomIndex];
            } while (selectedCell.innerHTML !== "");
            
            selectedCell.innerHTML = "X";
            if (checkWin()) {
                alert("AIの勝ち！");
                clearBoard();
                return;
            }
            switchPlayer();
        }
        
        Array.prototype.forEach.call(cells, function(cell) {
            cell.addEventListener("click", function() {
                makeMove(cell);
            });
        });
    </script>
</body>
</html>

※絵文字の使用は省略しています。