シューティングゲーム's game

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

No:26443

←

Prev Next

→

シューティングゲーム
Developer User13122｜Date and time 23/11/30 20:52:01
Build time 65.887 sec｜Game capacity 4.292KB｜

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>シューティングゲーム</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas></canvas>
  <script>
    // ゲーム画面の幅と高さ
    const WIDTH = window.innerWidth;
    const HEIGHT = window.innerHeight;

// プレイヤーの位置
    let playerX = WIDTH / 2;
    let playerY = HEIGHT - 50;

// 弾の速度
    const BULLET_SPEED = 10;

// 敵の数と速度
    const ENEMY_COUNT = 5;
    const ENEMY_SPEED = 3;

// キャンバス要素の取得
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = WIDTH;
    canvas.height = HEIGHT;

// プレイヤーの描画
    function drawPlayer() {
      ctx.fillStyle = 'blue';
      ctx.fillRect(playerX - 25, playerY - 25, 50, 50);
    }

// 弾の描画
    function drawBullet(bulletX, bulletY) {
      ctx.fillStyle = 'red';
      ctx.fillRect(bulletX, bulletY, 10, 20);
    }

// 敵の描画
    function drawEnemy(enemyX, enemyY) {
      ctx.fillStyle = 'green';
      ctx.fillRect(enemyX - 25, enemyY - 25, 50, 50);
    }

// ゲームループ
    function gameLoop() {
      // 画面をクリア
      ctx.clearRect(0, 0, WIDTH, HEIGHT);

// プレイヤーを描画
      drawPlayer();

// 弾を描画
      for (let i = 0; i < bullets.length; i++) {
        drawBullet(bullets[i].x, bullets[i].y);
      }

// 敵を描画
      for (let i = 0; i < enemies.length; i++) {
        drawEnemy(enemies[i].x, enemies[i].y);
      }

// 弾の移動
      for (let i = bullets.length - 1; i >= 0; i--) {
        bullets[i].y -= BULLET_SPEED;
        if (bullets[i].y < 0) {
          bullets.splice(i, 1);
        }
      }

// 敵の移動
      for (let i = enemies.length - 1; i >= 0; i--) {
        enemies[i].y += ENEMY_SPEED;
        if (enemies[i].y > HEIGHT) {
          enemies.splice(i, 1);
        }
      }

// 当たり判定
      for (let i = bullets.length - 1; i >= 0; i--) {
        for (let j = enemies.length - 1; j >= 0; j--) {
          if (Math.abs(bullets[i].x - enemies[j].x) < 25 &&
              Math.abs(bullets[i].y - enemies[j].y) < 25) {
            bullets.splice(i, 1);
            enemies.splice(j, 1);
            break;
          }
        }
      }

// ゲームオーバーチェック
      for (let i = 0; i < enemies.length; i++) {
        if (Math.abs(playerX - enemies[i].x) < 25 &&
            Math.abs(playerY - enemies[i].y) < 25) {
          alert('ゲームオーバー！');
          location.reload();
          break;
        }
      }

// ループ処理
      requestAnimationFrame(gameLoop);
    }

// 弾の生成
    function createBullet() {
      const bullet = {
        x: playerX,
        y: playerY - 25
      };
      bullets.push(bullet);
    }

// 敵の生成
    function createEnemy() {
      const enemy = {
        x: Math.floor(Math.random() * (WIDTH - 50)) + 25,
        y: 0
      };
      enemies.push(enemy);
    }

// プレイヤーの移動
    function movePlayer(e) {
      const touch = e.touches[0];
      playerX = touch.clientX;
      playerY = touch.clientY;
    }

// クリックイベントで弾を発射
    canvas.addEventListener('click', createBullet);

// タッチイベントでプレイヤーを移動
    canvas.addEventListener('touchmove', movePlayer);

// 弾と敵の配列
    const bullets = [];
    const enemies = [];

// 初期敵の生成
    for (let i = 0; i < ENEMY_COUNT; i++) {
      createEnemy();
    }

// ゲーム開始
    gameLoop();
  </script>
</body>
</html>
```