Make a board game's game | AI game creator

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

No:29056

63

Make a board game
Developer User14369｜Date and time 23/12/15 17:29:35
Build time 35.324 sec｜Game capacity 3.326KB｜

Sure! Here's an example of a simple board game implemented as a single HTML file using JavaScript and enclosed in `` tags. <br><br> <br> <style> table { border-collapse: collapse; } td { width: 30px; height: 30px; text-align: center; border: 1px solid black; } .player1 { background-color: #FFCCCC; } .player2 { background-color: #CCCCFF; } .current { background-color: #FFFF99; } </style> <h1>Board Game</h1> <table id="board"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <div id="controls"> <button onclick="move('left')">Left</button> <button onclick="move('up')">Up</button> <button onclick="move('down')">Down</button> <button onclick="move('right')">Right</button> </div>

In this code, we have created a simple 3x3 board represented by a HTML table. The players are represented by different background colors: player 1 in light pink (`#FFCCCC`), player 2 in light blue (`#CCCCFF`), and the current player's position is highlighted in light yellow (`#FFFF99`). The game starts with player 1's position highlighted, and the player can use the "Left", "Up", "Down", and "Right" buttons to move to the adjacent cells on the board. As the player moves, the current player's position is updated and the background color changes accordingly. The players take turns to make their moves. This is a very basic example of a board game, and you can customize it further by adding more features, rules, or using pictograms to represent the players and their movements.

→ 　

0　

0　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

Sure! Here's an example of a simple board game implemented as a single HTML file using JavaScript and enclosed in `<script>` tags.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Board Game</title>
    <style>
        table {
            border-collapse: collapse;
        }

td {
            width: 30px;
            height: 30px;
            text-align: center;
            border: 1px solid black;
        }

.player1 {
            background-color: #FFCCCC;
        }

.player2 {
            background-color: #CCCCFF;
        }

.current {
            background-color: #FFFF99;
        }
    </style>
</head>
<body>
    <h1>Board Game</h1>
    <table id="board">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

<div id="controls">
        <button onclick="move('left')">Left</button>
        <button onclick="move('up')">Up</button>
        <button onclick="move('down')">Down</button>
        <button onclick="move('right')">Right</button>
    </div>

<script>
        var currentPlayer = 1;
        var currentRow = 0;
        var currentColumn = 0;

function move(direction) {
            // Clear current player's position
            document.getElementById("board").rows[currentRow].cells[currentColumn].className = "";

// Update current position based on direction
            if (direction === "left" && currentColumn > 0) {
                currentColumn--;
            } else if (direction === "up" && currentRow > 0) {
                currentRow--;
            } else if (direction === "down" && currentRow < 2) {
                currentRow++;
            } else if (direction === "right" && currentColumn < 2) {
                currentColumn++;
            }

// Add player's class to new position
            document.getElementById("board").rows[currentRow].cells[currentColumn].className = "player" + currentPlayer;

// Switch players
            currentPlayer = currentPlayer === 1 ? 2 : 1;
        }

// Initialize game with player 1's position
        document.getElementById("board").rows[currentRow].cells[currentColumn].className = "player1";
    </script>
</body>
</html>
```

In this code, we have created a simple 3x3 board represented by a HTML table. The players are represented by different background colors: player 1 in light pink (`#FFCCCC`), player 2 in light blue (`#CCCCFF`), and the current player's position is highlighted in light yellow (`#FFFF99`).

The game starts with player 1's position highlighted, and the player can use the "Left", "Up", "Down", and "Right" buttons to move to the adjacent cells on the board. As the player moves, the current player's position is updated and the background color changes accordingly. The players take turns to make their moves.

This is a very basic example of a board game, and you can customize it further by adding more features, rules, or using pictograms to represent the players and their movements.