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

No:7813

1771

←

Prev Next

→

traditional Japanese board game played with dice
Developer User3589｜Date and time 23/7/9 23:27:24
Build time 9.869 sec｜Game capacity 2.824KB｜

Script

了解です。以下にすごろくゲームの実装例を示します。

すごろくゲーム

上記のコードでは、16個のマス目を持つすごろく盤と、サイコロが表示されます。サイコロの絵文字をクリックすると、1から6のランダムな数が生成され、プレイヤーの位置が進みます。プレイヤーの位置が盤の最後のマス目に達すると、「ゴールしました！」というメッセージボックスが表示され、プレイヤーの位置はリセットされます。このように、部分的にゲーム化したすごろくの実装例です。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にすごろくゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>すごろくゲーム</title>
</head>
<body>
    <h1>すごろくゲーム</h1>
    <div id="board" style="display: flex; flex-wrap: wrap; width: 400px;"></div>

// マス目の生成
        for (let i = 1; i <= boardSize; i++) {
            const cell = document.createElement("div");
            cell.style.width = "50px";
            cell.style.height = "50px";
            cell.style.border = "1px solid black";
            cell.style.display = "flex";
            cell.style.justifyContent = "center";
            cell.style.alignItems = "center";

const number = document.createTextNode(i);
            cell.appendChild(number);

document.getElementById("board").appendChild(cell);
        }

// サイコロの生成
        const dice = document.createElement("div");
        dice.innerHTML = "🎲";
        dice.style.fontSize = "40px";
        dice.style.cursor = "pointer";
        dice.addEventListener("click", rollDice);

document.body.appendChild(dice);

// サイコロを振る処理
        function rollDice() {
            const diceNumber = Math.floor(Math.random() * 6) + 1;
            movePlayer(diceNumber);
        }

// プレイヤーを移動させる処理
        function movePlayer(steps) {
            currentPosition += steps;
            if (currentPosition >= boardSize) {
                alert("ゴールしました！");
                currentPosition = 0;
            }
            highlightCurrentPosition();
        }

// 現在の位置をハイライトする処理
        function highlightCurrentPosition() {
            const cells = document.getElementById("board").children;
            for (let i = 0; i < boardSize; i++) {
                cells[i].style.background = i === currentPosition ? "yellow" : "white";
            }
        }

// 初期位置のハイライト
        highlightCurrentPosition();
    </script>
</body>
</html>
```

このように、部分的にゲーム化したすごろくの実装例です。