First person shooting's game

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

No:19978

←

Prev Next

→

First person shooting
Developer バファリンヌ｜Date and time 23/10/7 16:22:40
Build time 42.724 sec｜Game capacity 7.128KB｜

Script

了解です。では、スマートフォンで操作可能なシューティングゲームのサンプルプログラムを作成します。

上記のコードは、スマートフォン上で実行可能なシューティングゲームのサンプルプログラムです。プレイヤーは赤いドットで表示され、クリック/タップした位置に黄色い弾を発射することができます。敵は緑色のドットで表示され、プレイヤーに向かって移動します。プレイヤーと敵が衝突した場合はゲームオーバーとなります。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解です。では、スマートフォンで操作可能なシューティングゲームのサンプルプログラムを作成します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Shooting Game</title>
    <style>
        #game-container {
            position: relative;
            width: 100vw;
            height: 100vh;
            background-color: #000;
            overflow: hidden;
        }

#player {
            position: absolute;
            top: calc(50vh - 10px);
            left: calc(50vw - 10px);
            width: 20px;
            height: 20px;
            background-color: #f00;
            border-radius: 50%;
        }

.bullet {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #ff0;
            border-radius: 50%;
        }

.enemy {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #0f0;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
    </div>

// プレイヤーの移動
        function movePlayer(x, y) {
            const player = document.getElementById("player");
            player.style.left = `${x}px`;
            player.style.top = `${y}px`;
        }
        
        // 初期化
        function initialize() {
            movePlayer(playerX, playerY);
            setInterval(spawnEnemy, 1000); // 1秒ごとに敵を生成
        }
        
        // ゲームオーバー
        function gameOver() {
            alert("ゲームオーバー");
            location.reload(); // ページをリロードして初期化
        }
        
        // 敵の生成
        function spawnEnemy() {
            const enemy = document.createElement("div");
            enemy.className = "enemy";
        
            const randomX = Math.random() * (GAME_WIDTH - ENEMY_SIZE);
            const randomY = Math.random() * (GAME_HEIGHT - ENEMY_SIZE);
        
            enemy.style.left = `${randomX}px`;
            enemy.style.top = `${randomY}px`;
        
            document.getElementById("game-container").appendChild(enemy);
        
            moveEnemy(enemy);
        }
        
        // 敵の移動
        function moveEnemy(enemy) {
            const player = document.getElementById("player");
            const dx = player.offsetLeft - enemy.offsetLeft;
            const dy = player.offsetTop - enemy.offsetTop;
            const distance = Math.sqrt(dx * dx + dy * dy);
            const duration = distance / ENEMY_SPEED * 1000;
        
            setTimeout(() => {
                if (distance < PLAYER_SIZE) {
                    gameOver();
                } else {
                    const randomX = Math.random() * (GAME_WIDTH - ENEMY_SIZE);
                    const randomY = Math.random() * (GAME_HEIGHT - ENEMY_SIZE);
        
                    enemy.style.left = `${randomX}px`;
                    enemy.style.top = `${randomY}px`;
        
                    moveEnemy(enemy);
                }
            }, duration);
        }
        
        // 弾の生成
        function spawnBullet(x, y) {
            const bullet = document.createElement("div");
            bullet.className = "bullet";
            bullet.style.left = `${x}px`;
            bullet.style.top = `${y}px`;
            document.getElementById("game-container").appendChild(bullet);
        
            moveBullet(bullet, x, y);
        }
        
        // 弾の移動
        function moveBullet(bullet, x, y) {
            const enemies = Array.from(document.getElementsByClassName("enemy"));
        
            if (enemies.length === 0) {
                return;
            }
        
            const nearestEnemy = enemies.reduce((a, b) => {
                const dx1 = a.offsetLeft - x;
                const dy1 = a.offsetTop - y;
                const dx2 = b.offsetLeft - x;
                const dy2 = b.offsetTop - y;
        
                return Math.sqrt(dx1 * dx1 + dy1 * dy1) < Math.sqrt(dx2 * dx2 + dy2 * dy2) ? a : b;
            });
        
            const dx = nearestEnemy.offsetLeft - x;
            const dy = nearestEnemy.offsetTop - y;
            const angle = Math.atan2(dy, dx);
            const vx = Math.cos(angle) * BULLET_SPEED;
            const vy = Math.sin(angle) * BULLET_SPEED;
        
            const newX = x + vx;
            const newY = y + vy;
        
            bullet.style.left = `${newX}px`;
            bullet.style.top = `${newY}px`;
        
            if (newX < 0 || newX > GAME_WIDTH || newY < 0 || newY > GAME_HEIGHT) {
                bullet.remove();
            }
            
            const collision = checkCollision(bullet, nearestEnemy);
        
            if (collision) {
                bullet.remove();
                nearestEnemy.remove();
            } else {
                setTimeout(() => {
                    moveBullet(bullet, newX, newY);
                }, 20);
            }
        }
        
        // 衝突判定
        function checkCollision(element1, element2) {
            const rect1 = element1.getBoundingClientRect();
            const rect2 = element2.getBoundingClientRect();
        
            return !(rect1.right < rect2.left ||
                     rect1.left > rect2.right ||
                     rect1.bottom < rect2.top ||
                     rect1.top > rect2.bottom);
        }
        
        // ゲーム開始
        window.addEventListener("load", () => {
            initialize();
        
            window.addEventListener("click", (event) => {
                const x = event.clientX;
                const y = event.clientY;
                spawnBullet(x, y);
            });
        
            window.addEventListener("touchend", (event) => {
                const touch = event.changedTouches[0];
                const x = touch.clientX;
                const y = touch.clientY;
                spawnBullet(x, y);
            });
        });
    </script>
</body>
</html>
```