Attacked by a swarm of king bugs's game

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

No:5366

2410

←

Prev Next

→

Attacked by a swarm of king bugs
Developer User3812｜Date and time 23/6/30 0:18:42
Build time 41.959 sec｜Game capacity 5.474KB｜

Script

了解しました。王蟲の大群に襲われるというゲームを作成します。以下が、1枚のHTMLファイルに実装されたJavaScriptを含むゲームのコード例です。

Score: 0

このゲームでは、プレイヤーを操作して王蟲の大群から逃げるようになっています。矢印キーを使ってプレイヤーを左右に移動させ、王蟲の大群と衝突しないようにします。衝突するとゲームオーバーになり、スコアが表示されます。スコアは王蟲を躱すごとに加点されます。スマートフォンでの操作も可能ですが、物理キーボードがないため、キーボードイベントをタッチイベントに変更する必要があります。また、画面サイズに応じてCSSの値（位置やサイズ）を調整する必要があるかもしれません。以上が、王蟲の大群に襲われるゲームの実装例です。

←

Prev　Next

→ 　

Back　

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

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

了解しました。王蟲の大群に襲われるというゲームを作成します。

以下が、1枚のHTMLファイルに実装されたJavaScriptを含むゲームのコード例です。
```html
<!DOCTYPE html>
<html>
<head>
    <title>王蟲の大群に襲われる</title>
    <meta charset="UTF-8">
    <style>
        body {
            text-align: center;
            font-size: 30px;
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <script>
        // 王蟲の大群に襲われるゲームの実装
        let score = 0;
        
        function startGame() {
            const gameArea = document.createElement('div');
            gameArea.style.width = '200px';
            gameArea.style.height = '200px';
            gameArea.style.backgroundColor = 'lightgreen';
            gameArea.style.margin = '0 auto';
            gameArea.style.position = 'relative';
            gameArea.style.overflow = 'hidden';
            document.body.appendChild(gameArea);
            
            const player = document.createElement('div');
            player.style.width = '50px';
            player.style.height = '50px';
            player.style.backgroundColor = 'red';
            player.style.borderRadius = '50%';
            player.style.position = 'absolute';
            player.style.bottom = '0';
            gameArea.appendChild(player);
            
            let isGameOver = false;
            
            function movePlayer(event) {
                if (event.key === 'ArrowLeft' && !isGameOver) {
                    let leftPosition = parseInt(window.getComputedStyle(player).getPropertyValue('left'));
                    if (leftPosition > 0) {
                        player.style.left = (leftPosition - 10) + 'px';
                    }
                }
                else if (event.key === 'ArrowRight' && !isGameOver) {
                    let leftPosition = parseInt(window.getComputedStyle(player).getPropertyValue('left'));
                    if (leftPosition < 150) {
                        player.style.left = (leftPosition + 10) + 'px';
                    }
                }
            }
            document.addEventListener('keydown', movePlayer);
            
            function createEnemy() {
                const enemy = document.createElement('div');
                enemy.style.width = '20px';
                enemy.style.height = '20px';
                enemy.style.backgroundColor = 'black';
                enemy.style.borderRadius = '50%';
                enemy.style.position = 'absolute';
                enemy.style.top = '0';
                enemy.style.left = Math.floor(Math.random() * 180) + 'px';
                gameArea.appendChild(enemy);
                
                let intervalId = setInterval(() => {
                    let topPosition = parseInt(window.getComputedStyle(enemy).getPropertyValue('top'));
                    if (topPosition >= 350) {
                        clearInterval(intervalId);
                        gameArea.removeChild(enemy);
                        score++;
                        document.getElementById('score').innerHTML = 'Score: ' + score;
                    }
                    else {
                        enemy.style.top = (topPosition + 10) + 'px';
                    }
                }, 50);
                
                if (!isGameOver) {
                    setTimeout(createEnemy, 1500);
                }
            }
            createEnemy();
            
            function checkCollision() {
                let playerPosition = player.getBoundingClientRect();
                let enemies = document.querySelectorAll('.enemy');
                
                enemies.forEach((enemy) => {
                    let enemyPosition = enemy.getBoundingClientRect();
                    
                    if (playerPosition.left < enemyPosition.right &&
                        playerPosition.right > enemyPosition.left &&
                        playerPosition.top < enemyPosition.bottom &&
                        playerPosition.bottom > enemyPosition.top) {
                        isGameOver = true;
                        document.removeEventListener('keydown', movePlayer);
                        alert('ゲームオーバー！\nスコア: ' + score);
                        location.reload(); // ゲームリセット
                    }
                });
                
                if (!isGameOver) {
                    setTimeout(checkCollision, 50);
                }
            }
            checkCollision();
        }
        
        startGame();
    </script>
    
    <p id="score">Score: 0</p>
</body>
</html>
```

このゲームでは、プレイヤーを操作して王蟲の大群から逃げるようになっています。矢印キーを使ってプレイヤーを左右に移動させ、王蟲の大群と衝突しないようにします。衝突するとゲームオーバーになり、スコアが表示されます。スコアは王蟲を躱すごとに加点されます。

スマートフォンでの操作も可能ですが、物理キーボードがないため、キーボードイベントをタッチイベントに変更する必要があります。また、画面サイズに応じてCSSの値（位置やサイズ）を調整する必要があるかもしれません。

以上が、王蟲の大群に襲われるゲームの実装例です。