Vertical scrolling shooting game in which you move your ship by dragging's game

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

No:7486

2481

←

Prev Next

→

Vertical scrolling shooting game in which you move..ALL
Developer User4036｜Date and time 23/7/8 1:33:17
Build time 32.631 sec｜Game capacity 5.368KB｜

Script

以下は、ドラッグ操作で自機を動かし、縦スクロールして敵を倒すシンプルな縦スクロールシューティングゲームの例です。

上記のコードを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>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }
    
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// ゲームオブジェクト
    const game = {
      canvas: null,
      player: null,
      enemies: [],
      score: 0,
      gameOver: false,
      
      // 初期化
      init: function() {
        // キャンバスの初期化
        this.canvas = document.getElementById("gameCanvas");
        this.canvas.width = gameConfig.canvasWidth;
        this.canvas.height = gameConfig.canvasHeight;
        this.ctx = this.canvas.getContext("2d");
        
        // プレイヤーの初期化
        this.player = {
          x: gameConfig.canvasWidth / 2 - gameConfig.playerWidth / 2,
          y: gameConfig.canvasHeight - gameConfig.playerHeight - 10,
          width: gameConfig.playerWidth,
          height: gameConfig.playerHeight,
        };
        
        // イベントリスナーの追加
        this.canvas.addEventListener("mousedown", this.handleMouseDown.bind(this));
        this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
        
        // ゲームループの開始
        this.gameLoop();
      },
      
      // ゲームループ
      gameLoop: function() {
        this.update();
        this.draw();
        
        if (!this.gameOver) {
          requestAnimationFrame(this.gameLoop.bind(this));
        }
      },
      
      // ゲームの更新
      update: function() {
        // 敵の生成
        if (Math.random() < 1 / gameConfig.enemySpawnInterval) {
          this.spawnEnemy();
        }
        
        // 敵の移動と当たり判定のチェック
        for (let i = this.enemies.length - 1; i >= 0; i--) {
          const enemy = this.enemies[i];
          
          // 敵の自動移動
          enemy.y += gameConfig.enemySpeed;
          
          // 当たり判定のチェック
          if (this.isCollision(this.player, enemy)) {
            this.gameOver = true;
            break;
          }
          
          // 画面外に出た敵は削除
          if (enemy.y > gameConfig.canvasHeight) {
            this.enemies.splice(i, 1);
            this.score++;
          }
        }
      },
      
      // ゲームの描画
      draw: function() {
        // 背景
        this.ctx.fillStyle = "black";
        this.ctx.fillRect(0, 0, gameConfig.canvasWidth, gameConfig.canvasHeight);
        
        // プレイヤー
        this.ctx.fillStyle = "white";
        this.ctx.fillRect(this.player.x, this.player.y, this.player.width, this.player.height);
        
        // 敵
        this.ctx.fillStyle = "red";
        for (const enemy of this.enemies) {
          this.ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
        }
        
        // スコア表示
        this.ctx.font = "20px Arial";
        this.ctx.fillStyle = "white";
        this.ctx.fillText("Score: " + this.score, 10, 30);
        
        // ゲームオーバー表示
        if (this.gameOver) {
          this.ctx.font = "40px Arial";
          this.ctx.fillText("Game Over", gameConfig.canvasWidth / 2 - 100, gameConfig.canvasHeight / 2);
        }
      },
      
      // 敵の生成
      spawnEnemy: function() {
        const x = Math.random() * (gameConfig.canvasWidth - gameConfig.enemyWidth);
        const y = -gameConfig.enemyHeight;
        const enemy = {
          x: x,
          y: y,
          width: gameConfig.enemyWidth,
          height: gameConfig.enemyHeight,
        };
        this.enemies.push(enemy);
      },
      
      // マウスダウンイベント処理
      handleMouseDown: function(event) {
        if (this.gameOver) {
          location.reload();
        }
      },
      
      // マウス移動イベント処理
      handleMouseMove: function(event) {
        if (!this.gameOver) {
          this.player.x = event.clientX - gameConfig.playerWidth / 2;
        }
      },
      
      // 当たり判定のチェック
      isCollision: function(obj1, obj2) {
        return obj1.x < obj2.x + obj2.width &&
             obj1.x + obj1.width > obj2.x &&
             obj1.y < obj2.y + obj2.height &&
             obj1.y + obj1.height > obj2.y;
      }
    };

// ゲームの初期化
    window.addEventListener("DOMContentLoaded", function(event) {
      game.init();
    });
  </script>
</body>
</html>
```