A game in which the player dodges enemy attacks and destroys them while aiming the gun.'s game

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

No:2275

8065

←

Prev Next

→

A game in which the player dodges enemy attacks an..ALL
Developer User3194｜Date and time 23/6/20 20:00:17
Build time 64.612 sec｜Game capacity 6.006KB｜

Script

このゲームは、銃の照準を合わせながら、敵の攻撃をかわして、敵を倒すゲームです。プレイヤーを左右に移動させることができ、スペースキーを押すことで、弾を撃つことができます。敵は画面外から現れ、プレイヤーに向かって攻撃してきます。敵に当たるとゲームオーバーです。スコアを一定数以上にすると、ゲームクリアです。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>銃撃戦</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    canvas {
      display: block;
    }
    #score {
      width: 100%;
      text-align: center;
      font-size: 24px;
      margin-top: 16px;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <div id="score"></div>

// 設定値
    const CANVAS_WIDTH = window.innerWidth;
    const CANVAS_HEIGHT = window.innerHeight - 70;
    const PLAYER_SIZE = 50;
    const PLAYER_SPEED = 5;
    const BULLET_SIZE = 10;
    const BULLET_SPEED = 10;
    const ENEMY_SIZE = 50;
    const ENEMY_SPEED = 3;
    const ENEMY_SPAWN_INTERVAL = 1000;
    const ENEMY_ATTACK_INTERVAL = 500;
    const GAME_OVER_SCORE = 10;

// 変数
    let player;
    let bullets = [];
    let enemies = [];
    let score = 0;
    let gameOver = false;
    let enemySpawnTimer = 0;
    let enemyAttackTimer = 0;

// プレイヤークラス
    class Player {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }

moveLeft() {
        if (this.x > 0) {
          this.x -= PLAYER_SPEED;
        }
      }

moveRight() {
        if (this.x < CANVAS_WIDTH - PLAYER_SIZE) {
          this.x += PLAYER_SPEED;
        }
      }

draw() {
        context.fillStyle = 'yellow';
        context.fillRect(this.x, this.y, PLAYER_SIZE, PLAYER_SIZE);
      }
    }

// 弾クラス
    class Bullet {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }

move() {
        this.y -= BULLET_SPEED;
      }

draw() {
        context.fillStyle = 'red';
        context.fillRect(this.x, this.y, BULLET_SIZE, BULLET_SIZE);
      }
    }

// 敵クラス
    class Enemy {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }

move() {
        this.y += ENEMY_SPEED;
      }

draw() {
        context.fillStyle = 'green';
        context.fillRect(this.x, this.y, ENEMY_SIZE, ENEMY_SIZE);
      }
    }

// 初期化処理
    function init() {
      canvas.width = CANVAS_WIDTH;
      canvas.height = CANVAS_HEIGHT;

// プレイヤーを生成
      player = new Player(CANVAS_WIDTH / 2 - PLAYER_SIZE / 2, CANVAS_HEIGHT - PLAYER_SIZE);

// ゲームループ開始
      requestAnimationFrame(gameLoop);
    }

// ゲームループ
    function gameLoop(timestamp) {
      if (gameOver) {
        return;
      }

// 背景を描画
      context.fillStyle = 'black';
      context.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

// プレイヤーを描画
      player.draw();

// 弾の移動と描画
      bullets.forEach(bullet => {
        bullet.move();
        bullet.draw();
      });

// 弾が画面外に出たら配列から削除
      bullets = bullets.filter(bullet => bullet.y > 0);

// 敵の移動と描画
      enemies.forEach(enemy => {
        enemy.move();
        enemy.draw();
      });

// 敵が画面外に出たら配列から削除
      enemies = enemies.filter(enemy => enemy.y < CANVAS_HEIGHT);

// 敵と弾の当たり判定をチェック
      bullets.forEach(bullet => {
        enemies.forEach(enemy => {
          if (bullet.x < enemy.x + ENEMY_SIZE && bullet.x + BULLET_SIZE > enemy.x &&
              bullet.y < enemy.y + ENEMY_SIZE && bullet.y + BULLET_SIZE > enemy.y) {
            // 当たった場合は敵を配列から削除してスコアを加算
            enemies.splice(enemies.indexOf(enemy), 1);
            bullets.splice(bullets.indexOf(bullet), 1);
            score++;
            scoreElement.textContent = `Score: ${score}`;
          }
        });
      });

// 新しい敵を生成
      enemySpawnTimer += timestamp - lastTimestamp;
      if (enemySpawnTimer >= ENEMY_SPAWN_INTERVAL) {
        enemies.push(new Enemy(Math.random() * (CANVAS_WIDTH - ENEMY_SIZE), -ENEMY_SIZE));
        enemySpawnTimer = 0;
      }

// 敵の攻撃
      enemyAttackTimer += timestamp - lastTimestamp;
      if (enemyAttackTimer >= ENEMY_ATTACK_INTERVAL) {
        enemies.forEach(enemy => {
          if (player.x < enemy.x + ENEMY_SIZE && player.x + PLAYER_SIZE > enemy.x &&
              player.y < enemy.y + ENEMY_SIZE && player.y + PLAYER_SIZE > enemy.y) {
            // 当たった場合はゲームオーバー
            gameOver = true;
            alert('GAME OVER!');
          }
        });
        enemyAttackTimer = 0;
      }

// 前回の時刻を更新
      lastTimestamp = timestamp;

// ゲームが続行中の場合は再度ゲームループを呼び出す
      if (score < GAME_OVER_SCORE) {
        requestAnimationFrame(gameLoop);
      } else {
        alert('YOU WIN!');
      }
    }

// キーボード操作
    document.addEventListener('keydown', event => {
      switch (event.code) {
        case 'ArrowLeft':
          player.moveLeft();
          break;
        case 'ArrowRight':
          player.moveRight();
          break;
        case 'Space':
          bullets.push(new Bullet(player.x + PLAYER_SIZE / 2 - BULLET_SIZE / 2, player.y - BULLET_SIZE));
          break;
      }
    });

let lastTimestamp = performance.now();
    init();
  </script>
</body>
</html>