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

No:3221

336

←

Prev Next

→

baseball disc
Developer User3589｜Date and time 23/6/24 6:10:43
Build time 27.129 sec｜Game capacity 3.473KB｜

Script

野球盤

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>野球盤</title>
    <style>
        #board {
            display: flex;
            flex-wrap: wrap;
            max-width: 300px;
            margin: auto;
        }
        .square {
            width: calc(100% / 3 - 10px);
            height: calc(100% / 3 - 10px);
            margin: 5px;
            font-size: 5em;
            text-align: center;
            cursor: pointer;
            border: 1px solid black;
            border-radius: 10px;
        }
        #result {
            font-size: 3em;
            text-align: center;
            margin-top: 20px;
        }
        #restart {
            margin-top: 20px;
            background-color: #008CBA;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            border-radius: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>野球盤</h1>
    <div id="board">
        <div class="square" id="1"></div>
        <div class="square" id="2"></div>
        <div class="square" id="3"></div>
        <div class="square" id="4"></div>
        <div class="square" id="5"></div>
        <div class="square" id="6"></div>
        <div class="square" id="7"></div>
        <div class="square" id="8"></div>
        <div class="square" id="9"></div>
    </div>
    <div id="result"></div>
    <button id="restart">リスタート</button>

function checkWin() {
            let combos = [
                "123", "456", "789",
                "147", "258", "369",
                "159", "357"
            ];
            let filledCells = [];
            cells.forEach(cell => filledCells.push(cell.textContent));

for (let i=0; i<combos.length; i++) {
                let combo = combos[i];
                let a = filledCells[combo[0]-1];
                let b = filledCells[combo[1]-1];
                let c = filledCells[combo[2]-1];
                if (a == b && b == c && c != "") {
                    return true;
                }
            }
            return false;
        }

function restart() {
            cells.forEach(cell => {
                cell.textContent = "";
            });
            result.textContent = "";
            player = "○";
        }

cells.forEach(cell => {
            cell.addEventListener("click", function() {
                if (player == "○" && cell.textContent == "") {
                    cell.textContent = "○";
                    player = "×";
                } else if (player == "×" && cell.textContent == "") {
                    cell.textContent = "×";
                    player = "○";
                }
                if (checkWin()) {
                    result.textContent = `${player}の勝ち！`;
                } else if (filledCells.every(cell => cell.textContent != "")) {
                    result.textContent = "引き分け！";
                }
            });
        });

document.querySelector("#restart").addEventListener("click", restart);
    </script>
</body>
</html>