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

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

No:42882

←

Prev Next

→

シューティングゲーム
Developer User18994｜Date and time 24/2/13 5:36:42
Build time 19.691 sec｜Game capacity 4.99KB｜

Script

了解です。以下にシューティングゲームのサンプルを示します。

このサンプルでは、画面上でプレイヤーを操作し、敵を倒すシューティングゲームが実装されています。プレイヤーは矢印キーで移動し、スペースキーで弾を撃つことができます。敵に弾が当たるとスコアが加算され、敵が画面外に出るか、プレイヤーが敵に触れるとゲームオーバーになります。スコアは画面上部に表示されます。このファイルを1枚のHTMLファイルとして保存し、ブラウザで開くことでシューティングゲームが遊べます。ただし、スマートフォンでの操作を前提にしていますので、開発者ツールでモバイル表示に切り替えるか、実際のスマートフォンでプレイしてください。

←

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>
    body {
      overflow: hidden;
      margin: 0;
      padding: 0;
    }
    canvas {
      background-color: #000;
    }
  </style>
</head>
<body>
  <script>
    // ゲームの設定
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;
    const playerSize = 50;
    const enemySize = 30;
    const bulletSize = 10;
    const enemySpeed = 2;
    const bulletSpeed = 5;
    let playerX = (screenWidth - playerSize) / 2;
    let playerY = screenHeight - playerSize;
    let bullets = [];
    let enemies = [];
    let score = 0;
    let gameOver = false;

// 画面サイズの設定
    canvas.width = screenWidth;
    canvas.height = screenHeight;
    document.body.appendChild(canvas);

// イベントリスナーの設定
    window.addEventListener('resize', () => {
      screenWidth = window.innerWidth;
      screenHeight = window.innerHeight;
      canvas.width = screenWidth;
      canvas.height = screenHeight;
    });

// ゲームループ
    function gameLoop() {
      if (!gameOver) {
        // 画面クリア
        context.clearRect(0, 0, screenWidth, screenHeight);

// プレイヤーの描画
        context.fillStyle = '#f00';
        context.fillRect(playerX, playerY, playerSize, playerSize);

// 弾の描画と移動
        bullets.forEach((bullet, index) => {
          context.fillStyle = '#0f0';
          context.fillRect(bullet.x, bullet.y, bulletSize, bulletSize);
          bullet.y -= bulletSpeed;
          if (bullet.y <= 0) {
            bullets.splice(index, 1);
          }
        });

// 敵の描画と移動
        enemies.forEach((enemy, index) => {
          context.fillStyle = '#00f';
          context.fillRect(enemy.x, enemy.y, enemySize, enemySize);
          enemy.y += enemySpeed;

// 敵と弾の当たり判定
          bullets.forEach((bullet, bulletIndex) => {
            if (
              bullet.x < enemy.x + enemySize &&
              bullet.x + bulletSize > enemy.x &&
              bullet.y < enemy.y + enemySize &&
              bullet.y + bulletSize > enemy.y
            ) {
              enemies.splice(index, 1);
              bullets.splice(bulletIndex, 1);
              score++;
            }
          });

// 敵とプレイヤーの当たり判定
          if (
            playerX < enemy.x + enemySize &&
            playerX + playerSize > enemy.x &&
            playerY < enemy.y + enemySize &&
            playerY + playerSize > enemy.y
          ) {
            gameOver = true;
          }

// 敵が画面外に出たらゲームオーバー
          if (enemy.y >= screenHeight) {
            gameOver = true;
          }
        });

// スコアの描画
        context.fillStyle = '#fff';
        context.font = '24px sans-serif';
        context.fillText(`Score: ${score}`, 10, 30);

// フレームごとに呼び出し
        requestAnimationFrame(gameLoop);
      } else {
        // ゲームオーバー画面の描画
        context.fillStyle = '#fff';
        context.font = '48px sans-serif';
        context.fillText('Game Over', screenWidth / 2 - 120, screenHeight / 2);
      }
    }

// 初期敵の生成
    for (let i = 0; i < 5; i++) {
      enemies.push({
        x: Math.random() * (screenWidth - enemySize),
        y: -enemySize,
      });
    }

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

このサンプルでは、画面上でプレイヤーを操作し、敵を倒すシューティングゲームが実装されています。プレイヤーは矢印キーで移動し、スペースキーで弾を撃つことができます。敵に弾が当たるとスコアが加算され、敵が画面外に出るか、プレイヤーが敵に触れるとゲームオーバーになります。スコアは画面上部に表示されます。

このファイルを1枚のHTMLファイルとして保存し、ブラウザで開くことでシューティングゲームが遊べます。ただし、スマートフォンでの操作を前提にしていますので、開発者ツールでモバイル表示に切り替えるか、実際のスマートフォンでプレイしてください。