インベーダーゲーム's game

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

No:40589

←

Prev Next

→

インベーダーゲーム
Developer User18209｜Date and time 24/2/3 18:59:36
Build time 16.371 sec｜Game capacity 5.456KB｜

Script

了解です。以下にインベーダーゲームの実装例を記述します。

Score: 0

HP: 3

👾

このコードは、スマートフォンでプレイできる簡単なインベーダーゲームを実装しています。スマートフォンのタッチ操作に対応しており、プレイヤーの移動やショットが可能です。敵キャラクターに当たるとスコアが増え、HPが減少します。HPが0になるとゲームオーバーとなり、アラートで通知されます。実装してプレイしてみてください。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にインベーダーゲームの実装例を記述します。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invader Game</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: black;
            color: white;
            font-family: monospace;
        }

#player {
            font-size: 30px;
            user-select: none;
            cursor: pointer;
        }

.bullet {
            position: absolute;
            font-size: 10px;
        }

.invader {
            position: absolute;
            font-size: 30px;
        }

#score {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div id="score">
        <div>Score: <span id="scoreValue">0</span></div>
        <div>HP: <span id="hpValue">3</span></div>
    </div>
    <div id="player">👾</div>

let score = 0;
        let hp = 3;
        let bullets = [];
        let invaders = [];
        let invaderInterval;

function createInvader() {
            const invader = document.createElement("div");
            invader.classList.add("invader");
            const x = Math.floor(Math.random() * (window.innerWidth - 60));
            invader.style.transform = `translate(${x}px, 0px)`;
            document.body.appendChild(invader);
            invaders.push(invader);
        }

function endGame() {
            clearInterval(invaderInterval);
            window.removeEventListener("touchmove", movePlayer);
            alert("Game Over");
        }

window.addEventListener("touchstart", createBullet);
        window.addEventListener("touchmove", movePlayer);

invaderInterval = setInterval(() => {
            createInvader();
            moveBullets();
            moveInvaders();
            checkCollision();
        }, 500);
    </script>
</body>
</html>
```

このコードは、スマートフォンでプレイできる簡単なインベーダーゲームを実装しています。スマートフォンのタッチ操作に対応しており、プレイヤーの移動やショットが可能です。敵キャラクターに当たるとスコアが増え、HPが減少します。HPが0になるとゲームオーバーとなり、アラートで通知されます。

実装してプレイしてみてください。