横浜線を作るゲーム's game

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

No:23752

←

Prev Next

→

横浜線を作るゲーム
Developer User11134｜Date and time 23/11/3 11:45:00
Build time 57.472 sec｜Game capacity 2.564KB｜

Script

了解です。以下に横浜線を作るゲームの実装例を示します。

横浜

磯子

🚆

戸塚

東戸塚

青葉台

都筑ふれあいの丘

センター南

新横浜

このゲームでは、"次の駅へ"ボタンをクリックすると、列車が次の駅に移動し、次の駅が黄色でハイライト表示されます。最終駅に到達した場合は、再び最初の駅に戻ります。スマートフォンでも遊べるように、画面上部に横浜線の各駅が表示されます。

←

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>
        body {
            background-color: lightblue;
            text-align: center;
            font-size: 24px;
        }
        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .station {
            margin-bottom: 20px;
        }
        .train {
            font-size: 50px;
        }
        .button {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="station">横浜</div>
        <div class="station">磯子</div>
        <div class="train">🚆</div>
        <div class="station">戸塚</div>
        <div class="station">東戸塚</div>
        <div class="station">青葉台</div>
        <div class="station">都筑ふれあいの丘</div>
        <div class="station">センター南</div>
        <div class="station">新横浜</div>
        <button class="button" onclick="moveTrain()">次の駅へ</button>
    </div>

function moveTrain() {
            // 次の駅のインデックスを計算
            currentStation++;

// 最終駅の場合は初めの駅に戻る
            if (currentStation === document.getElementsByClassName('station').length) {
                currentStation = 0;
            }

// 列車を新しい駅に移動させる
            const train = document.getElementsByClassName('train')[0];
            const stations = document.getElementsByClassName('station');
            train.style.top = `${stations[currentStation].offsetTop}px`;
            
            // 次の駅を表示する
            for (let i = 0; i < stations.length; i++) {
                stations[i].style.backgroundColor = '';
            }
            stations[currentStation].style.backgroundColor = 'yellow';
        }
    </script>
</body>
</html>
```