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

No:15977

115

←

Prev Next

→

横浜から家に帰る
Developer User5574｜Date and time 23/9/14 12:23:13
Build time 37.475 sec｜Game capacity 3.912KB｜

Script

では、以下に横浜から家に帰るというシンプルなゲームの実装例を示します。

横浜から家に帰る

ゴールまであと100km

ゲームオーバー
再挑戦するには画面をタップ

このゲームでは、画面をタップするとプレイヤーが進んでいき、ゴールまでの距離が減っていきます。ゴールに到達するとゲームクリアとなり、再度画面をタップすることで再挑戦することができます。また、距離が0になる前に画面をタップするとゲームオーバーとなります。注意：このゲームはシンプルな実装例であり、スマホでの操作に最適化されているわけではありません。実際にスマホでプレイする場合には、さらに調整が必要となります。

←

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 {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        
        #road {
            position: relative;
            height: 500px;
            background-color: black;
            overflow: hidden;
        }
        
        #player {
            position: absolute;
            bottom: 0;
            width: 50px;
            height: 50px;
            background-color: orange;
        }
        
        #finish {
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            color: white;
        }
        
        #game-over {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 36px;
            color: white;
        }
    </style>
</head>
<body>
    <h1>横浜から家に帰る</h1>
    <div id="road">
        <div id="player"></div>
    </div>
    <p id="finish">ゴールまであと<span id="distance">100</span>km</p>
    <p id="game-over">ゲームオーバー<br>再挑戦するには画面をタップ</p>
    
    <script>
        window.addEventListener('load', function() {
            const road = document.getElementById('road');
            const player = document.getElementById('player');
            const distance = document.getElementById('distance');
            const gameOver = document.getElementById('game-over');
            
            let playerPosition = 0;
            let remainingDistance = 100;
            let gameEnded = false;
            
            road.addEventListener('click', function() {
                if (gameEnded) {
                    // ゲームオーバー後に画面をクリックすると再挑戦
                    playerPosition = 0;
                    remainingDistance = 100;
                    distance.textContent = remainingDistance;
                    player.style.left = playerPosition + 'px';
                    gameEnded = false;
                    gameOver.style.display = 'none';
                } else {
                    // ゲーム中は画面をクリックすると進める
                    if (remainingDistance > 0) {
                        const distanceToMove = Math.min(Math.random() * 20 + 1, remainingDistance);
                        playerPosition += distanceToMove * 10;
                        remainingDistance -= distanceToMove;
                        distance.textContent = remainingDistance;
                        player.style.left = playerPosition + 'px';
                        
                        if (remainingDistance === 0) {
                            // ゴールに到達した場合
                            gameEnded = true;
                            gameOver.style.display = 'block';
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>
```

このゲームでは、画面をタップするとプレイヤーが進んでいき、ゴールまでの距離が減っていきます。ゴールに到達するとゲームクリアとなり、再度画面をタップすることで再挑戦することができます。また、距離が0になる前に画面をタップするとゲームオーバーとなります。

注意：このゲームはシンプルな実装例であり、スマホでの操作に最適化されているわけではありません。実際にスマホでプレイする場合には、さらに調整が必要となります。