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

No:40066

←

Prev Next

→

ドット勇者
Developer User15915｜Date and time 24/1/31 22:54:29
Build time 10.711 sec｜Game capacity 2.497KB｜

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 {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        
        #game {
            display: inline-block;
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        
        .player {
            position: absolute;
            bottom: 0;
            width: 30px;
            height: 30px;
            background-color: red;
        }
        
        .enemy {
            position: absolute;
            top: 0;
            width: 30px;
            height: 30px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <h1>ドット勇者</h1>
    
    <div id="game">
        <div id="player" class="player">👦</div>
        <div id="enemy" class="enemy">👾</div>
    </div>
    
    <script>
        const player = document.getElementById("player");
        const enemy = document.getElementById("enemy");
        let interval;
        
        function startGame() {
            interval = setInterval(moveEnemy, 1000);
        }
        
        function stopGame() {
            clearInterval(interval);
        }
        
        function movePlayer(e) {
            if (e.key === "ArrowLeft") {
                const left = parseInt(getComputedStyle(player).left);
                player.style.left = (left - 10) + "px";
            } else if (e.key === "ArrowRight") {
                const left = parseInt(getComputedStyle(player).left);
                player.style.left = (left + 10) + "px";
            }
        }
        
        function moveEnemy() {
            const top = parseInt(getComputedStyle(enemy).top);
            enemy.style.top = (top + 10) + "px";
            
            if (top >= 270) {
                stopGame();
                alert("ゲームオーバー！");
            }
        }
        
        document.addEventListener("keydown", movePlayer);
        startGame();
    </script>
</body>
</html>
```