Action game in which a robot with a buster coming out of its arm defeats an evil robot army.'s game

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

No:8228

766

←

Prev Next

→

Action game in which a robot with a buster coming ..ALL
Developer User4161｜Date and time 23/7/14 9:26:00
Build time 39.261 sec｜Game capacity 5.293KB｜

Script

では、以下に腕からバスターが出るロボットが悪のロボット軍団を倒すアクションゲームの実装例を示します。このゲームは1枚のHTMLファイルとして実装されており、JavaScriptが含まれています。

🤖

Score: 0

上記のコードでは、ロボットをマウスの動きに合わせて移動させることができます。また、ロボットをクリックするとバスターが発射され、敵を倒すことができます。敵の数が一定数倒されるとゲームクリアとなります。また、スコアも表示されます。ただし、このゲームはスマートフォンのタッチ操作には対応していませんので、パソコンなどで遊んでいただけます。

←

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>
        #robot {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 100px;
            cursor: pointer;
        }
        .enemy {
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        #score {
            font-size: 36px;
            position: fixed;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div id="robot">🤖</div>
    <div id="score">Score: 0</div>

// スコアの初期値
        let score = 0;

// ロボット要素を取得
        const robotElement = document.getElementById('robot');

// スコア要素を取得
        const scoreElement = document.getElementById('score');

// ロボットをクリックした時のイベントリスナーを追加
        robotElement.addEventListener('click', shootBuster);

// バスターが当たった敵の数を記録する配列
        const destroyedEnemies = [];

// 敵を生成して画面に表示する関数
        function createEnemy() {
            const enemy = document.createElement('div');
            enemy.className = 'enemy';
            enemy.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
            enemy.style.left = window.innerWidth + 'px';
            document.body.appendChild(enemy);
        }

// バスターを発射する関数
        function shootBuster() {
            const buster = document.createElement('div');
            buster.innerText = '💥';
            buster.className = 'buster';
            buster.style.top = robotY + 'px';
            buster.style.left = robotX + 'px';
            document.body.appendChild(buster);

// バスターのアニメーションを実行
            const busterMoveAnimation = setInterval(() => {
                const busters = document.getElementsByClassName('buster');
                const enemies = document.getElementsByClassName('enemy');

for (let i = 0; i < busters.length; i++) {
                    const buster = busters[i];
                    const busterLeft = parseInt(buster.style.left);
                    buster.style.left = busterLeft + 5 + 'px';

for (let j = 0; j < enemies.length; j++) {
                        const enemy = enemies[j];
                        const enemyRect = enemy.getBoundingClientRect();
                        const busterRect = buster.getBoundingClientRect();

if (!destroyedEnemies.includes(j) && isOverlap(enemyRect, busterRect)) {
                            destroyedEnemies.push(j);
                            enemy.remove();
                            buster.remove();
                            score += 100;
                            scoreElement.innerText = 'Score: ' + score;
                        }
                    }

if (busterLeft > window.innerWidth) {
                        buster.remove();
                    }
                }

if (destroyedEnemies.length === 10) {
                    clearInterval(busterMoveAnimation);
                    alert('Game cleared!');
                }
            }, 10);
        }

// 二つの要素が重なっているか判定する関数
        function isOverlap(rect1, rect2) {
            return rect1.left < rect2.right &&
                   rect1.right > rect2.left &&
                   rect1.top < rect2.bottom &&
                   rect1.bottom > rect2.top;
        }

// 敵を一定間隔で生成するタイマーを設定
        setInterval(createEnemy, 2000);

// ロボットの移動処理を実装
        document.addEventListener('mousemove', (event) => {
            robotX = event.clientX;
            robotY = event.clientY;
            robotElement.style.left = robotX + 'px';
            robotElement.style.top = robotY + 'px';
        });

// ゲーム開始時にフォーカスをロボットにセット
        document.addEventListener('DOMContentLoaded', () => {
            robotElement.focus();
        });
    </script>
</body>
</html>
```

上記のコードでは、ロボットをマウスの動きに合わせて移動させることができます。また、ロボットをクリックするとバスターが発射され、敵を倒すことができます。敵の数が一定数倒されるとゲームクリアとなります。また、スコアも表示されます。

ただし、このゲームはスマートフォンのタッチ操作には対応していませんので、パソコンなどで遊んでいただけます。