Roulette board game to reach the goal's game

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

No:10666

←

Prev Next

→

Roulette board game to reach the goal
Developer User4376｜Date and time 23/8/1 17:40:21
Build time 32.675 sec｜Game capacity 3.05KB｜

Script

プログラムのご希望に応じて、以下のコードサンプルを提供します。

🚀

上記のHTMLファイルをブラウザで開くと、ルーレットゲームがプレイできます。ゲームは以下のように進行します。 1. ゲームボードが表示されます。 2. ボタンをクリックすると、ダイスを振って出た目の分だけプレイヤーが進みます（画面上の絵文字が移動します）。 3. ゴールに到達すると、おめでとうメッセージが表示されます。このプログラムは、スマートフォンでも遊べるようにスタイルが調整されています。また、絵文字を使用しています（絵文字が表示されない場合はブラウザによる対応状況による可能性があります）。お楽しみください！

←

Prev　Next

→ 　

Back　

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

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

プログラムのご希望に応じて、以下のコードサンプルを提供します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ルーレットゲーム</title>
    <style>
        #board {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
        }

.cell {
            width: 33.3%;
            height: 33.3%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
        }

#player {
            font-size: 48px;
            text-align: center;
        }

#rollButton {
            font-size: 24px;
            margin-top: 20px;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <div id="board"></div>
    <div id="player">🚀</div>
    <button id="rollButton">Roll!</button>

const cells = [];
    let currentPlayerPosition = 0;

// ボードの初期化
    for (let i = 0; i < boardSize; i++) {
        const cell = document.createElement('div');
        cell.className = 'cell';
        cell.innerText = i + 1;
        cells.push(cell);
        board.appendChild(cell);
    }

// プレイヤーの初期位置
    cells[currentPlayerPosition].innerHTML = player.innerHTML;

// プレイヤーを指定の位置に移動する関数
    function movePlayer(position) {
        cells[currentPlayerPosition].innerHTML = '';
        currentPlayerPosition = position;
        cells[currentPlayerPosition].innerHTML = player.innerHTML;
    }

// ボタンがクリックされた時の処理
    rollButton.addEventListener('click', function() {
        const diceResult = Math.floor(Math.random() * 6) + 1;
        const newPosition = currentPlayerPosition + diceResult;

if (newPosition < boardSize) {
            movePlayer(newPosition);
        } else {
            alert('ゴールです！おめでとうございます！');
        }
    });
</script>

</body>
</html>
```

上記のHTMLファイルをブラウザで開くと、ルーレットゲームがプレイできます。ゲームは以下のように進行します。

1. ゲームボードが表示されます。
2. ボタンをクリックすると、ダイスを振って出た目の分だけプレイヤーが進みます（画面上の絵文字が移動します）。
3. ゴールに到達すると、おめでとうメッセージが表示されます。

このプログラムは、スマートフォンでも遊べるようにスタイルが調整されています。また、絵文字を使用しています（絵文字が表示されない場合はブラウザによる対応状況による可能性があります）。

お楽しみください！