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

No:5298

2546

←

Prev Next

→

Othello played on a smartphone with Mark Zuckerber..ALL
Developer User3819｜Date and time 23/6/29 22:30:15
Build time 54.598 sec｜Game capacity 6.407KB｜

Script

了解しました。以下が述べられた要件に合致するオセロのゲームです。このゲームは1枚のHTMLファイルとして実装されており、必ずJavaScriptを含んでいます。JavaScriptは必ずscriptタグで囲まれ、即座に実行されるようなプログラムです。このゲームはスマートフォンで遊ぶことを前提としており、絵文字も使用しています。

オセロ

このゲームでは、マーク・ザッカーバーグをプレイヤー（😃）とし、イーロン・マスクをCPU（😈）として戦わせています。プレイヤーとCPUが交互にマスを選択し、オセロのルールに基づいて石を裏返します。ゲームが終了すると、勝利者が表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>オセロ</title>
    <style>
        body {
            font-size: 2em;
            text-align: center;
        }
        
        .cell {
            display: inline-block;
            width: 60px;
            height: 60px;
            text-align: center;
            vertical-align: middle;
            border: 2px solid black;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>オセロ</h1>
    <div id="board"></div>
    <script>
        const EMPTY = '⚪';
        const PLAYER = '😃';
        const CPU = '😈';
        const SIZE = 8;
        
        let turn = PLAYER;
        let board = [];
        
        function createBoard() {
            let boardElement = document.getElementById('board');
            
            for (let i = 0; i < SIZE; i++) {
                board[i] = [];
                for (let j = 0; j < SIZE; j++) {
                    let cell = document.createElement('div');
                    cell.className = 'cell';
                    cell.onclick = function() {
                        if (isValidMove(i, j)) {
                            makeMove(i, j);
                            if (!hasValidMoves()) {
                                changeTurn();
                            }
                            if (!hasValidMoves()) {
                                endGame();
                            }
                        }
                    };
                    board[i][j] = cell;
                    boardElement.appendChild(cell);
                }
                boardElement.appendChild(document.createElement('br'));
            }
            
            initializeBoard();
        }
        
        function initializeBoard() {
            for (let i = 0; i < SIZE; i++) {
                for (let j = 0; j < SIZE; j++) {
                    board[i][j].innerHTML = EMPTY;
                }
            }
            
            let middle = SIZE / 2;
            board[middle - 1][middle - 1].innerHTML = CPU;
            board[middle][middle].innerHTML = CPU;
            board[middle - 1][middle].innerHTML = PLAYER;
            board[middle][middle - 1].innerHTML = PLAYER;
        }
        
        function isValidMove(row, col) {
            if (board[row][col].innerHTML !== EMPTY) {
                return false;
            }
            
            let directions = [
                [-1, -1], [-1, 0], [-1, 1],
                [0, -1],           [0, 1],
                [1, -1],  [1, 0],  [1, 1]
            ];
            
            for (let direction of directions) {
                if (hasValidMove(row, col, direction[0], direction[1])) {
                    return true;
                }
            }
            
            return false;
        }
        
        function hasValidMove(row, col, dirX, dirY) {
            let i = row + dirX;
            let j = col + dirY;
            
            if (i < 0 || i >= SIZE || j < 0 || j >= SIZE || board[i][j].innerHTML !== getOpponent()) {
                return false;
            }
            
            do {
                i += dirX;
                j += dirY;
            } while (i >= 0 && i < SIZE && j >= 0 && j < SIZE && board[i][j].innerHTML !== EMPTY);
            
            return i >= 0 && i < SIZE && j >= 0 && j < SIZE && board[i][j].innerHTML === turn;
        }
        
        function makeMove(row, col) {
            board[row][col].innerHTML = turn;
            
            let directions = [
                [-1, -1], [-1, 0], [-1, 1],
                [0, -1],           [0, 1],
                [1, -1],  [1, 0],  [1, 1]
            ];
            
            for (let direction of directions) {
                if (hasValidMove(row, col, direction[0], direction[1])) {
                    reverseStones(row, col, direction[0], direction[1]);
                }
            }
            
            changeTurn();
        }
        
        function reverseStones(row, col, dirX, dirY) {
            let i = row + dirX;
            let j = col + dirY;
            
            while (i >= 0 && i < SIZE && j >= 0 && j < SIZE && board[i][j].innerHTML !== EMPTY && board[i][j].innerHTML !== turn) {
                board[i][j].innerHTML = turn;
                i += dirX;
                j += dirY;
            }
        }
        
        function changeTurn() {
            turn = (turn === PLAYER) ? CPU : PLAYER;
        }
        
        function hasValidMoves() {
            for (let i = 0; i < SIZE; i++) {
                for (let j = 0; j < SIZE; j++) {
                    if (isValidMove(i, j)) {
                        return true;
                    }
                }
            }
            
            return false;
        }
        
        function endGame() {
            let playerCount = 0;
            let cpuCount = 0;
            
            for (let i = 0; i < SIZE; i++) {
                for (let j = 0; j < SIZE; j++) {
                    if (board[i][j].innerHTML === PLAYER) {
                        playerCount++;
                    } else if (board[i][j].innerHTML === CPU) {
                        cpuCount++;
                    }
                }
            }
            
            let message = (playerCount > cpuCount) ? 'ゲーム終了。あなたの勝利です！' : 'ゲーム終了。CPUの勝利です！';
            alert(message);
        }
        
        createBoard();
        
        function getOpponent(){
            return (turn === PLAYER) ? CPU : PLAYER;
        }
    </script>
</body>
</html>
```