AI game creator

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

No:12731

←

Prev Next

→

オセロ
Developer User4403｜Date and time 23/8/22 22:46:16
Build time 48.744 sec｜Game capacity 7.951KB｜

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>
        #board {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            grid-template-rows: repeat(8, 1fr);
            width: 400px;
            height: 400px;
        }

.cell {
            border: 1px solid #000;
            background-color: #0b6623;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 48px;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="board"></div>
    <script>
        // ゲームの状態
        let board;
        let turn;
        let gameOver;
        let winner;
        const CELLS = 8;

// ゲームの初期化
        function init() {
            board = new Array(CELLS);
            for (let i = 0; i < CELLS; i++) {
                board[i] = new Array(CELLS);
                for (let j = 0; j < CELLS; j++) {
                    board[i][j] = "-";
                }
            }

board[3][3] = board[4][4] = "○";
            board[3][4] = board[4][3] = "●";

turn = "●";
            gameOver = false;
            winner = null;

renderBoard();
        }

// ボードの描画
        function renderBoard() {
            const boardContainer = document.getElementById("board");
            boardContainer.innerHTML = "";

for (let i = 0; i < CELLS; i++) {
                for (let j = 0; j < CELLS; j++) {
                    const cell = document.createElement("div");
                    cell.className = "cell";
                    cell.dataset.row = i;
                    cell.dataset.col = j;
                    cell.addEventListener("click", handleClick);

if (board[i][j] === "-") {
                        cell.innerText = "";
                    } else {
                        cell.innerText = board[i][j];
                    }

boardContainer.appendChild(cell);
                }
            }
        }

// ゲームの進行
        function handleClick(event) {
            if (gameOver) {
                return;
            }

const row = event.target.dataset.row;
            const col = event.target.dataset.col;

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

const validMoves = getValidMoves(turn);

if (!validMoves.some((move) => move.row === row && move.col === col)) {
                return;
            }

board[row][col] = turn;

flipTiles(row, col);

turn = turn === "●" ? "○" : "●";

if (!hasValidMoves(turn)) {
                turn = turn === "●" ? "○" : "●";

if (!hasValidMoves(turn)) {
                    gameOver = true;
                    winner = getWinner();
                }
            }

renderBoard();
            renderMessage();

if (gameOver) {
                highlightWinner();
            }
        }

// 石の反転
        function flipTiles(row, col) {
            const directions = [
                { dx: -1, dy: -1 },
                { dx: -1, dy: 0 },
                { dx: -1, dy: 1 },
                { dx: 0, dy: -1 },
                { dx: 0, dy: 1 },
                { dx: 1, dy: -1 },
                { dx: 1, dy: 0 },
                { dx: 1, dy: 1 }
            ];

for (const direction of directions) {
                const { dx, dy } = direction;
                const flips = [];

let i = row + dx;
                let j = col + dy;

while (i >= 0 && i < CELLS && j >= 0 && j < CELLS && board[i][j] !== "-" && board[i][j] !== turn) {
                    flips.push({ row: i, col: j });
                    i += dx;
                    j += dy;
                }

if (i >= 0 && i < CELLS && j >= 0 && j < CELLS && board[i][j] === turn) {
                    for (const flip of flips) {
                        board[flip.row][flip.col] = turn;
                    }
                }
            }
        }

// 有効な手の取得
        function getValidMoves(player) {
            const validMoves = [];

for (let i = 0; i < CELLS; i++) {
                for (let j = 0; j < CELLS; j++) {
                    if (board[i][j] !== "-") {
                        continue;
                    }

if (isMoveValid(i, j, player)) {
                        validMoves.push({ row: i, col: j });
                    }
                }
            }

return validMoves;
        }

// 手が有効かどうかの判定
        function isMoveValid(row, col, player) {
            const directions = [
                { dx: -1, dy: -1 },
                { dx: -1, dy: 0 },
                { dx: -1, dy: 1 },
                { dx: 0, dy: -1 },
                { dx: 0, dy: 1 },
                { dx: 1, dy: -1 },
                { dx: 1, dy: 0 },
                { dx: 1, dy: 1 }
            ];

for (const direction of directions) {
                const { dx, dy } = direction;
                let i = row + dx;
                let j = col + dy;
                let foundOpponent = false;

while (i >= 0 && i < CELLS && j >= 0 && j < CELLS && board[i][j] !== "-" && board[i][j] !== player) {
                    i += dx;
                    j += dy;
                    foundOpponent = true;
                }

if (i >= 0 && i < CELLS && j >= 0 && j < CELLS && board[i][j] === player && foundOpponent) {
                    return true;
                }
            }

return false;
        }

// 有効な手があるかどうかの判定
        function hasValidMoves(player) {
            for (let i = 0; i < CELLS; i++) {
                for (let j = 0; j < CELLS; j++) {
                    if (board[i][j] !== "-") {
                        continue;
                    }

if (isMoveValid(i, j, player)) {
                        return true;
                    }
                }
            }

return false;
        }

// 勝者の判定
        function getWinner() {
            let countBlack = 0;
            let countWhite = 0;

for (let i = 0; i < CELLS; i++) {
                for (let j = 0; j < CELLS; j++) {
                    if (board[i][j] === "●") {
                        countBlack++;
                    } else if (board[i][j] === "○") {
                        countWhite++;
                    }
                }
            }

if (countBlack > countWhite) {
                return "●";
            } else if (countBlack < countWhite) {
                return "○";
            } else {
                return "引き分け";
            }
        }

// メッセージの描画
        function renderMessage() {
            const messageContainer = document.getElementById("message");
            messageContainer.innerText = `Player ${turn}'s turn`;

if (gameOver) {
                messageContainer.innerText = winner === "引き分け" ? "Draw" : `Player ${winner} wins!`;
            }
        }

// 勝者のハイライト
        function highlightWinner() {
            const boardContainer = document.getElementById("board");

for (let i = 0; i < CELLS; i++) {
                for (let j = 0; j < CELLS; j++) {
                    const cell = boardContainer.children[i * CELLS + j];
                    cell.style.backgroundColor = winner === "●" ? "#000" : "#fff";
                    cell.style.color = winner === "●" ? "#fff" : "#000";
                }
            }
        }

init();
    </script>
</body>
</html>