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

No:31003

72

スタートボタンを押したらスタートして敵にぶつかったらゲームオーバー画面を出すシューティングゲーム　敵..ALL
Developer User14989｜Date and time 23/12/24 20:18:05
Build time 35.471 sec｜Game capacity 5.545KB｜

はい、了解しました。以下に指定された条件に従ったシューティングゲームの実装例を示します。

Game Over

上記のコードは、指定された条件に基づいたシューティングゲームのサンプル実装です。以下のような動作をします： - ページを表示し、スタートボタンを押すとゲームが開始します。 - ゲーム画面上部から敵が降りてきます。敵は時間経過とともに徐々に速くなります。 - スマホを傾けることで自機の移動が制御されます。画面の左右に自機を移動させ、敵と衝突しないようにします。 - 自機が敵と衝突した場合、ゲームオーバーとなり、リトライボタンが表示されます。リトライボタンを押すとゲームがリセットされます。お好みで絵文字やスタイルを追加したり、他の要素や機能を追加したりすることもできます。また、最終的なデザインやゲームの仕様に合わせて調整してください。

→ 　

0　

0　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

はい、了解しました。以下に指定された条件に従ったシューティングゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>シューティングゲーム</title>
    <style>
        #game-container {
            position: relative;
            width: 320px;
            height: 480px;
            border: 1px solid black;
            overflow: hidden;
        }
        #player {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: blue;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .enemy {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            animation: enemy-fall 5s linear infinite;
        }
        @keyframes enemy-fall {
            from { top: -50px; }
            to { top: calc(100% + 50px); }
        }
        #game-over {
            display: none;
            position: absolute;
            top: 200px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }
        .button {
            font-size: 24px;
            padding: 8px 16px;
            background-color: dodgerblue;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
    </div>
    <div id="game-over">
        <h1>Game Over</h1>
        <button class="button">リトライ</button>
    </div>
    <script>
        window.addEventListener('load', function() {
            // ゲーム開始フラグ
            var gameStarted = false;
            // 敵の降ってくる速度の初期値
            var enemySpeed = 3000;

// スタートボタンを押した時の処理
            function startGame() {
                gameStarted = true;
                document.getElementById('game-over').style.display = 'none';
                createEnemy();
            }

// ゲームオーバー時の処理
            function gameOver() {
                gameStarted = false;
                document.getElementById('game-over').style.display = 'block';
            }

// 定期的に敵を生成する関数
            function createEnemy() {
                if (!gameStarted) return;
                
                var enemy = document.createElement('div');
                enemy.className = 'enemy';
                enemy.style.left = Math.floor(Math.random() * (320 - 50 + 1)) + 'px';
                enemy.addEventListener('animationend', function() {
                    enemy.parentNode.removeChild(enemy);
                });
                document.getElementById('game-container').appendChild(enemy);

setTimeout(createEnemy, enemySpeed);
            }

// 自機の移動
            window.addEventListener('deviceorientation', function(event) {
                if (!gameStarted) return;
                
                var x = event.beta;  // 前後の傾き
                var y = event.gamma; // 左右の傾き

var container = document.getElementById('game-container');
                var player = document.getElementById('player');
                var containerWidth = container.offsetWidth;
                var playerWidth = player.offsetWidth;

// 自機を移動させる
                player.style.left = ((y + 90) / 180) * (containerWidth - playerWidth) + 'px';
            });

// 敵と自機の衝突判定
            setInterval(function() {
                if (!gameStarted) return;

var player = document.getElementById('player');
                var enemies = document.getElementsByClassName('enemy');

var playerRect = player.getBoundingClientRect();
                Array.from(enemies).forEach(function(enemy) {
                    var enemyRect = enemy.getBoundingClientRect();
                    if (playerRect.left < enemyRect.right && playerRect.right > enemyRect.left &&
                        playerRect.top < enemyRect.bottom && playerRect.bottom > enemyRect.top) {
                        gameOver();
                    }
                });
            }, 100);

// スタートボタンのクリックイベントを設定
            document.querySelector('.button').addEventListener('click', startGame);
        });
    </script>
</body>
</html>
```

上記のコードは、指定された条件に基づいたシューティングゲームのサンプル実装です。以下のような動作をします：

- ページを表示し、スタートボタンを押すとゲームが開始します。
- ゲーム画面上部から敵が降りてきます。敵は時間経過とともに徐々に速くなります。
- スマホを傾けることで自機の移動が制御されます。画面の左右に自機を移動させ、敵と衝突しないようにします。
- 自機が敵と衝突した場合、ゲームオーバーとなり、リトライボタンが表示されます。リトライボタンを押すとゲームがリセットされます。

お好みで絵文字やスタイルを追加したり、他の要素や機能を追加したりすることもできます。また、最終的なデザインやゲームの仕様に合わせて調整してください。