A game with bullets flying from 360 degrees's game

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

No:218

240

←

Prev Next

→

A game with bullets flying from 360 degrees
Developer User2922｜Date and time 23/6/10 18:00:06
Build time 34.652 sec｜Game capacity 2.606KB｜

Script

Use the ←↑↓→ or ASDW keys to move the player. A red barrage of bullets will fly from 360 degrees. The game ends when the player is hit by a bullet.

←

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>360度弾幕ゲーム</title>
<style>
canvas {
  background-color: black;
}
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

// プレイヤーの設定
const player = {
  x: canvas.width/2,
  y: canvas.height/2,
  radius: 20,
  color: "yellow"
};

// 弾幕の設定
const bullets = [];
const bulletSpeed = 5;
const bulletInterval = 50;
let bulletCount = 0;

// キー入力の設定
const keyState = {};
document.addEventListener('keydown', (event) => {
  keyState[event.keyCode || event.which] = true;
});
document.addEventListener('keyup', (event) => {
  keyState[event.keyCode || event.which] = false;
});

// メインループ
function gameLoop() {
  // プレイヤーの移動
  if (keyState[37] || keyState[65]) { // 左
    player.x -= 5;
  }
  if (keyState[38] || keyState[87]) { // 上
    player.y -= 5;
  }
  if (keyState[39] || keyState[68]) { // 右
    player.x += 5;
  }
  if (keyState[40] || keyState[83]) { // 下
    player.y += 5;
  }

// 弾幕の生成
  bulletCount += 1;
  if (bulletCount % bulletInterval === 0) {
    for (let i = 0; i < 360; i += 30) {
      const radians = i * Math.PI / 180;
      const bullet = {
        x: player.x,
        y: player.y,
        radius: 10,
        color: "red",
        velocityX: bulletSpeed * Math.cos(radians),
        velocityY: bulletSpeed * Math.sin(radians)
      };
      bullets.push(bullet);
    }
  }

// 弾幕の移動
  for (const bullet of bullets) {
    bullet.x += bullet.velocityX;
    bullet.y += bullet.velocityY;
  }

// 弾幕の消去
  bullets.forEach((bullet, index) => {
    if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
      bullets.splice(index, 1);
    }
  });

// 画面のクリア
  ctx.clearRect(0, 0, canvas.width, canvas.height);

// プレイヤーの描画
  ctx.fillStyle = player.color;
  ctx.beginPath();
  ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2, false);
  ctx.fill();

// 弾幕の描画
  bullets.forEach((bullet) => {
    ctx.fillStyle = bullet.color;
    ctx.beginPath();
    ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2, false);
    ctx.fill();
  });

// 次のフレームへ
  requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
<p>←↑↓→あるいはASDWキーでプレイヤーを移動します。赤い弾幕が360度から飛んできます。プレイヤーが弾に当たると終了です。</p>
</body>
</html>