AI game creator

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

No:1908

240

←

Prev Next

→

shooting game
Developer User3272｜Date and time 23/6/19 14:04:16
Build time 53.467 sec｜Game capacity 4.697KB｜

Script

以下が、1枚のHTMLファイルに記述されたJavaScriptを含むシューティングゲームの実装例です。

このゲームは、プレイヤーがカーソルキーで移動し、スペースキーで弾を発射して敵を倒すシューティングゲームです。敵は定期的に画面上から出現し、画面下まで進んで行きます。弾が敵に当たると、スコアが加算されます。

←

Prev　Next

→ 　

Back　

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

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

以下が、1枚のHTMLファイルに記述されたJavaScriptを含むシューティングゲームの実装例です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>シューティングゲーム</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="240" height="320"></canvas>
    <script>
      // ゲームの状態を表す変数定義
      var score = 0;
      var player = {
        x: 120,
        y: 280,
        r: 10
      };
      var bullets = [];
      var enemies = [];

// キャンバスの描画コンテキスト取得
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

// プレイヤーの描画メソッド
      function drawPlayer() {
        ctx.beginPath();
        ctx.arc(player.x, player.y, player.r, 0, Math.PI*2, false);
        ctx.fillStyle = "yellow";
        ctx.fill();
        ctx.closePath();
      }

// 弾の描画メソッド
      function drawBullets() {
        for (var i = 0; i < bullets.length; i++) {
          ctx.beginPath();
          ctx.arc(bullets[i].x, bullets[i].y, bullets[i].r, 0, Math.PI*2, false);
          ctx.fillStyle = "red";
          ctx.fill();
          ctx.closePath();
        }
      }

// 敵の描画メソッド
      function drawEnemies() {
        for (var i = 0; i < enemies.length; i++) {
          ctx.beginPath();
          ctx.arc(enemies[i].x, enemies[i].y, enemies[i].r, 0, Math.PI*2, false);
          ctx.fillStyle = "blue";
          ctx.fill();
          ctx.closePath();
        }
      }

// ゲームの更新メソッド
      function update() {
        // プレイヤーが動く
        if (rightPressed) {
          player.x += 5;
        }
        if (leftPressed) {
          player.x -= 5;
        }
        if (upPressed) {
          player.y -= 5;
        }
        if (downPressed) {
          player.y += 5;
        }

// 弾の移動
        for (var i = 0; i < bullets.length; i++) {
          bullets[i].y -= 10;
        }

// 敵の移動
        for (var i = 0; i < enemies.length; i++) {
          enemies[i].y += 5;
        }

// 弾と敵の当たり判定
        for (var i = 0; i < bullets.length; i++) {
          for (var j = 0; j < enemies.length; j++) {
            var dx = bullets[i].x - enemies[j].x;
            var dy = bullets[i].y - enemies[j].y;
            var distance = Math.sqrt(dx*dx + dy*dy);
            if (distance < bullets[i].r + enemies[j].r) {
              bullets.splice(i, 1);
              enemies.splice(j, 1);
              score++;
            }
          }
        }

// キャンバスのクリア
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// プレイヤー、弾、敵の描画
        drawPlayer();
        drawBullets();
        drawEnemies();

// スコアの表示
        ctx.fillStyle = "red";
        ctx.font = "24px Arial";
        ctx.fillText("Score: " + score, 10, 30);
      }

// キーイベントの処理
      var rightPressed = false;
      var leftPressed = false;
      var upPressed = false;
      var downPressed = false;
      function keyDownHandler(e) {
        if (e.keyCode == 39) {
          rightPressed = true;
        }
        if (e.keyCode == 37) {
          leftPressed = true;
        }
        if (e.keyCode == 38) {
          upPressed = true;
        }
        if (e.keyCode == 40) {
          downPressed = true;
        }
        if (e.keyCode == 32) {
          bullets.push({x: player.x, y: player.y - player.r, r: 5});
        }
      }
      function keyUpHandler(e) {
        if (e.keyCode == 39) {
          rightPressed = false;
        }
        if (e.keyCode == 37) {
          leftPressed = false;
        }
        if (e.keyCode == 38) {
          upPressed = false;
        }
        if (e.keyCode == 40) {
          downPressed = false;
        }
      }
      document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);

// 敵の出現
      setInterval(function() {
        enemies.push({x: Math.random()*canvas.width, y: -10, r: 10});
      }, 2000);

// ゲームの実行
      setInterval(update, 1000/60);
    </script>
  </body>
</html>