AI game creator

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

No:7564

3176

←

Prev Next

→

shooting game
Developer o2pi4｜Date and time 23/7/8 19:34:07
Build time 13.849 sec｜Game capacity 3.76KB｜

Script

了解です。以下は、1枚のHTMLファイルにて実装された簡単なシューティングゲームの例です。

🚀

このゲームでは、プレーヤーがマウスを操作して左右に移動し、クリックすることで弾を発射します。敵キャラクターは一定の間隔で上から現れ、プレーヤーの弾が敵に当たるとゲームクリアとなります。なお、この例では絵文字「🚀」をプレーヤーの代わりに使用しています。ご参考までにお使いいただければと思います。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

了解です。

以下は、1枚のHTMLファイルにて実装された簡単なシューティングゲームの例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>シューティングゲーム</title>
    <style>
        .game-container {
            position: relative;
            width: 400px;
            height: 600px;
            background-color: #ddd;
        }
        .player {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 50px;
        }
        .bullet {
            position: absolute;
            width: 4px;
            height: 10px;
            background-color: red;
            transition: top 0.5s linear;
        }
        .enemy {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="player">🚀</div>
        <div class="bullet" style="display: none;"></div>
        <div class="enemy"></div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function(){
            const gameContainer = document.querySelector(".game-container");
            const player = document.querySelector(".player");
            const bullet = document.querySelector(".bullet");
            const enemy = document.querySelector(".enemy");

let bulletInterval;
            let enemyInterval;

// プレーヤーの移動
            gameContainer.addEventListener("mousemove", function(e){
                const x = e.clientX - gameContainer.offsetLeft;
                player.style.left = x + "px";
            });

// 弾の発射
            gameContainer.addEventListener("click", function(){
                bullet.style.display = "block";
                bullet.style.top = "580px";
                bullet.style.left = player.style.left;
                bulletInterval = setInterval(moveBullet, 10);
            });

// 敵の出現と移動
            enemyInterval = setInterval(moveEnemy, 1000);

function moveBullet() {
                const currentTop = parseInt(bullet.style.top);
                bullet.style.top = (currentTop - 5) + "px";
                if (currentTop <= 0) {
                    bullet.style.display = "none";
                    clearInterval(bulletInterval);
                }
                checkCollision();
            }

function moveEnemy() {
                enemy.style.top = "-20px";
                enemy.style.left = (Math.random() * (gameContainer.offsetWidth - enemy.offsetWidth)) + "px";
            }

function checkCollision() {
                const bulletRect = bullet.getBoundingClientRect();
                const enemyRect = enemy.getBoundingClientRect();
                if (bulletRect.top <= enemyRect.bottom && bulletRect.left <= enemyRect.right && bulletRect.right >= enemyRect.left) {
                    alert("ゲームクリア！");
                    clearInterval(bulletInterval);
                    clearInterval(enemyInterval);
                }
            }
        });
    </script>
</body>
</html>
```

このゲームでは、プレーヤーがマウスを操作して左右に移動し、クリックすることで弾を発射します。敵キャラクターは一定の間隔で上から現れ、プレーヤーの弾が敵に当たるとゲームクリアとなります。なお、この例では絵文字「🚀」をプレーヤーの代わりに使用しています。

ご参考までにお使いいただければと思います。