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

No:29801

105

←

Prev Next

→

make your own by me board game you select your boa..ALL
Developer User7632｜Date and time 23/12/19 3:22:45
Build time 23.868 sec｜Game capacity 3.471KB｜

Script

Sure! Here's a simple example of a board game implemented as a single HTML file using JavaScript:

My Board Game

This example creates a simple Tic-Tac-Toe board game. When the user clicks on a cell, their symbol ('X' or 'O') will appear in that cell. The game will check for a winning condition after each move and display an alert message if someone wins or if it's a draw. The game can be reset by clicking the "Reset" button. Feel free to modify and customize it as per your needs and preferences.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

Sure! Here's a simple example of a board game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>My Board Game</title>
    <style>
        .board {
            display: flex;
            flex-wrap: wrap;
            width: 150px;
        }
        .cell {
            width: 50px;
            height: 50px;
            border: 1px solid;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>My Board Game</h1>
    <div class="board">
        <div class="cell" onclick="makeMove(0)"></div>
        <div class="cell" onclick="makeMove(1)"></div>
        <div class="cell" onclick="makeMove(2)"></div>
        <div class="cell" onclick="makeMove(3)"></div>
        <div class="cell" onclick="makeMove(4)"></div>
        <div class="cell" onclick="makeMove(5)"></div>
        <div class="cell" onclick="makeMove(6)"></div>
        <div class="cell" onclick="makeMove(7)"></div>
        <div class="cell" onclick="makeMove(8)"></div>
    </div>
    <button onclick="resetGame()">Reset</button>

const cells = document.getElementsByClassName('cell');

function makeMove(index) {
            if (gameOver || cells[index].innerText !== '') {
                return;
            }
            cells[index].innerText = currentPlayer;
            cells[index].style.cursor = 'default';
            checkWinningCondition();
            togglePlayer();
        }

function togglePlayer() {
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
        }

function checkWinningCondition() {
            const winningCombinations = [
                [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
                [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
                [0, 4, 8], [2, 4, 6]             // Diagonals
            ];

for (const combination of winningCombinations) {
                const [a, b, c] = combination;
                if (
                    cells[a].innerText === currentPlayer &&
                    cells[b].innerText === currentPlayer &&
                    cells[c].innerText === currentPlayer
                ) {
                    announceWinner();
                    return;
                }
            }

if (Array.from(cells).every(cell => cell.innerText !== '')) {
                announceDraw();
            }
        }

function announceWinner() {
            alert('Player ' + currentPlayer + ' wins!');
            gameOver = true;
        }

function announceDraw() {
            alert('It\'s a draw!');
            gameOver = true;
        }

function resetGame() {
            Array.from(cells).forEach(cell => {
                cell.innerText = '';
                cell.style.cursor = 'pointer';
            });
            currentPlayer = 'X';
            gameOver = false;
        }
    </script>
</body>
</html>
```

Feel free to modify and customize it as per your needs and preferences.