Make a side-scrolling action game where the player automatically walks, shoots bullets and attacks.'s game

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

No:1787

995

←

Prev Next

→

Make a side-scrolling action game where the player..ALL
Developer User3406｜Date and time 23/6/19 1:16:01
Build time 49.53 sec｜Game capacity 4.705KB｜

Script

やり直し・スコアボードを設け、倒した敵の数を表示する以下が実際のプログラム例です。

←

Prev　Next

→ 　

Back　

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

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

やり直し ・スコアボードを設け、倒した敵の数を表示する

以下が実際のプログラム例です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sidebar Shooter</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      /*-- 初期設定 --*/
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var gravity = 0.3; // 重力値
      var player = { // プレイヤーオブジェクト
        x: 50,
        y: 100,
        w: 50,
        h: 50,
        vy: 0,
        jumping: false,
        shootTimer: 0,
        shootInterval: 20,
        score: 0
      };
      var bullets = []; // 弾丸配列
      var enemies = []; // 敵配列
      var enemyTimer = 0; // 敵出現タイマー
      var enemyInterval = 50; // 敵出現間隔

/*-- キーイベント --*/
      window.addEventListener("keydown", function(event) {
        if (event.keyCode === 32 && !player.jumping) { // スペースキーでジャンプ
          player.jumping = true;
          player.vy = -8;
        }
      });

/*-- タッチイベント --*/
      canvas.addEventListener("touchstart", function(event) {
        if (!player.jumping) { // タップでジャンプ
          player.jumping = true;
          player.vy = -8;
        }
      });

/*-- 更新関数 --*/
      function update() {
        /* リセット */
        ctx.clearRect(0, 0, canvas.width, canvas.height);

/* プレイヤー更新 */
        // 自動移動
        player.x += 5;
        // ジャンプ処理
        player.y += player.vy;
        player.vy += gravity;
        if (player.y > canvas.height - player.h) {
          player.y = canvas.height - player.h;
          player.jumping = false;
        }
        // 弾丸発射
        player.shootTimer++;
        if (player.shootTimer % player.shootInterval === 0) {
          var bullet = {
            x: player.x + player.w,
            y: player.y + player.h / 2,
            w: 10,
            h: 5,
            vx: 7
          };
          bullets.push(bullet);
        }
        // スコア更新
        ctx.fillStyle = "black";
        ctx.font = "bold 14px sans-serif";
        ctx.fillText("Score: " + player.score, 10, 20);

/* 弾丸更新 */
        for (var i = 0; i < bullets.length; i++) {
          var bullet = bullets[i];
          bullet.x += bullet.vx;
          // 画面外に出たら削除
          if (bullet.x > canvas.width) {
            bullets.splice(i, 1);
            i--;
          }
          // 当たり判定
          for (var j = 0; j < enemies.length; j++) {
            var enemy = enemies[j];
            if (bullet.x < enemy.x + enemy.w && bullet.y < enemy.y + enemy.h && bullet.y + bullet.h > enemy.y) {
              enemies.splice(j, 1);
              j--;
              bullets.splice(i, 1);
              i--;
              player.score++;
            }
          }
          // 描画
          ctx.fillStyle = "red";
          ctx.fillRect(bullet.x, bullet.y, bullet.w, bullet.h);
        }

/* 敵更新 */
        enemyTimer++;
        if (enemyTimer % enemyInterval === 0) {
          var enemyY = Math.floor(Math.random() * (canvas.height - 60)) + 30;
          var enemy = {
            x: 0,
            y: enemyY,
            w: 30,
            h: 30,
            vx: 5
          };
          enemies.push(enemy);
        }
        for (var i = 0; i < enemies.length; i++) {
          var enemy = enemies[i];
          enemy.x += enemy.vx;
          // 画面外に出たら削除
          if (enemy.x + enemy.w > canvas.width) {
            enemies.splice(i, 1);
            i--;
          }
          // 当たり判定
          if (enemy.x < player.x + player.w && enemy.y < player.y + player.h && enemy.y + enemy.h > player.y) {
            gameOver();
          }
          // 描画
          ctx.fillStyle = "blue";
          ctx.fillRect(enemy.x, enemy.y, enemy.w, enemy.h);
        }

/* プレイヤー描画 */
        ctx.fillStyle = "green";
        ctx.fillRect(player.x, player.y, player.w, player.h);

/* 次の更新 */
        requestAnimationFrame(update);
      }

/*-- ゲームオーバー --*/
      function gameOver() {
        alert("Game Over!\nScore: " + player.score);
        // リセット
        player.x = 50;
        player.y = 100;
        player.score = 0;
        bullets = [];
        enemies = [];
        enemyTimer = 0;
      }

/*-- ゲーム開始 --*/
      update();
    </script>
  </body>
</html>