インベーダーゲーム。自分の機はロケット。敵はインベーダー。's game

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

No:43166

←

Prev Next

→

インベーダーゲーム。自分の機はロケット。敵はインベーダー。
Developer User19111｜Date and time 24/2/14 15:54:01
Build time 10.319 sec｜Game capacity 2.901KB｜

Script

以下に、指定された要件に基づいたインベーダーゲームのプログラムを示します。

このプログラムは、ブラウザ上でインベーダーゲームをプレイすることができます。自分の機であるロケットは左右に移動し、敵であるインベーダーと衝突するとゲームオーバーとなります。なお、ゲームオーバー後はページをリロードして再度プレイできます。

←

Prev　Next

→ 　

Back　

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

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

以下に、指定された要件に基づいたインベーダーゲームのプログラムを示します。

```html
<!DOCTYPE html>
<html>
<head>
<title>インベーダーゲーム</title>
<style>
    body {
        margin: 0;
        overflow: hidden;
    }
    
    #player {
        position: absolute;
        bottom: 10px;
        width: 50px;
        height: 50px;
        background-color: red;
    }
    
    .invader {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: blue;
    }
</style>
</head>
<body>
    <script>
        // プレイヤーの初期位置
        let playerX = window.innerWidth / 2 - 25;
        const playerY = window.innerHeight - 60;

// インベーダーの初期位置
        let invaderX = Math.floor(Math.random() * (window.innerWidth - 50));
        let invaderY = 10;

const player = document.createElement('div');
        player.id = 'player';
        player.style.left = playerX + 'px';
        player.style.bottom = playerY + 'px';
        document.body.appendChild(player);

const invader = document.createElement('div');
        invader.className = 'invader';
        invader.style.left = invaderX + 'px';
        invader.style.top = invaderY + 'px';
        document.body.appendChild(invader);

function moveInvader() {
            invaderY += 10;
            invader.style.top = invaderY + 'px';
            if (invaderY >= playerY) {
                alert('ゲームオーバー！');
                location.reload();
            }
        }

function detectCollision() {
            const playerRect = player.getBoundingClientRect();
            const invaderRect = invader.getBoundingClientRect();

if (playerRect.bottom >= invaderRect.top &&
                playerRect.top <= invaderRect.bottom &&
                playerRect.right >= invaderRect.left &&
                playerRect.left <= invaderRect.right) {
                alert('ゲームオーバー！');
                location.reload();
            }
        }

window.addEventListener('keydown', movePlayer);
        setInterval(moveInvader, 1000);
        setInterval(detectCollision, 100);
    </script>
</body>
</html>
```

このプログラムは、ブラウザ上でインベーダーゲームをプレイすることができます。自分の機であるロケットは左右に移動し、敵であるインベーダーと衝突するとゲームオーバーとなります。なお、ゲームオーバー後はページをリロードして再度プレイできます。