BIT Game – HTML Code (Copy Only)

以下のHTMLコードをコピーしてください

全部選択をクリックしてからCtrl + Cを押してください
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Platformer – Coins + Enemies</title>
  <style>
    body { margin: 0; overflow: hidden; background: #222; }
    canvas { display: block; background: #333; }
  </style>
</head>
<body>
<canvas id="game"></canvas>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 500;

const worldWidth = 2000;
const worldHeight = 500;

let gameOver = false;
let score = 0;

/* --- Player --- */
let player = {
  x: 80,
  y: 0,
  width: 40,
  height: 40,
  dx: 0,
  dy: 0,
  speed: 4,
  jumpCount: 0,
  maxJump: 2,
  jumpPressed: false
};

/* --- Platforms --- */
let platforms = [
  {x: 0, y: 450, width: worldWidth, height: 50},
  {x: 150, y: 350, width: 120, height: 20},
  {x: 350, y: 280, width: 150, height: 20},
  {x: 650, y: 320, width: 150, height: 20},
  {x: 900, y: 250, width: 150, height: 20},
  {x: 1200, y: 200, width: 150, height: 20},
  {x: 1500, y: 300, width: 150, height: 20},
];

/* --- Coins --- */
let coins = [
  {x: 180, y: 310, size: 20, collected: false},
  {x: 380, y: 240, size: 20, collected: false},
  {x: 680, y: 280, size: 20, collected: false},
  {x: 930, y: 210, size: 20, collected: false},
  {x: 1230, y: 160, size: 20, collected: false}
];

/* --- Enemies --- */
let enemies = [
  {x: 500, y: 410, width: 40, height: 40, dir: 1, speed: 2, range: 100, startX: 500},
  {x: 1400, y: 260, width: 40, height: 40, dir: -1, speed: 2, range: 120, startX: 1400},
];

let keys = {};
document.addEventListener("keydown", e => keys[e.code] = true);
document.addEventListener("keyup", e => keys[e.code] = false);

const gravity = 0.5;
const friction = 0.8;

let cameraX = 0;

/* --- Game Loop --- */
function update() {
  if (gameOver) return;

  if (keys["ArrowRight"] || keys["KeyD"]) player.dx = player.speed;
  else if (keys["ArrowLeft"] || keys["KeyA"]) player.dx = -player.speed;
  else player.dx *= friction;

  const jumpKey = keys["ArrowUp"] || keys["Space"] || keys["KeyW"];
  if (jumpKey && !player.jumpPressed) {
    if (player.jumpCount < player.maxJump) {
      player.dy = -10;
      player.jumpCount++;
    }
    player.jumpPressed = true;
  }
  if (!jumpKey) player.jumpPressed = false;

  player.dy += gravity;
  player.y += player.dy;

  let onPlatform = false;
  for (let p of platforms) {
    if (player.x + player.width > p.x && player.x < p.x + p.width) {
      if (player.y + player.height > p.y &&
          player.y + player.height - player.dy <= p.y) {
        player.y = p.y - player.height;
        player.dy = 0;
        onPlatform = true;
      }
    }
  }
  if (onPlatform) player.jumpCount = 0;

  if (player.y + player.height > worldHeight) {
    player.y = worldHeight - player.height;
    player.dy = 0;
    player.jumpCount = 0;
  }

  player.x += player.dx;
  player.x = Math.max(0, Math.min(player.x, worldWidth - player.width));

  for (let c of coins) {
    if (!c.collected &&
        player.x < c.x + c.size &&
        player.x + player.width > c.x &&
        player.y < c.y + c.size &&
        player.y + player.height > c.y) {
      c.collected = true;
      score++;
    }
  }

  for (let e of enemies) {
    e.x += e.speed * e.dir;
    if (Math.abs(e.x - e.startX) > e.range) e.dir *= -1;

    if (player.x < e.x + e.width &&
        player.x + player.width > e.x &&
        player.y < e.y + e.height &&
        player.y + player.height > e.y) {
      gameOver = true;
    }
  }

  let targetCam = player.x - canvas.width / 2 + player.width / 2;
  cameraX += (targetCam - cameraX) * 0.1;
  cameraX = Math.max(0, Math.min(cameraX, worldWidth - canvas.width));
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = "white";
  ctx.font = "24px Arial";
  ctx.fillText("Score: " + score, 20, 30);

  if (gameOver) {
    ctx.fillStyle = "red";
    ctx.font = "48px Arial";
    ctx.fillText("GAME OVER", canvas.width / 2 - 140, canvas.height / 2);
    return;
  }

  ctx.save();
  ctx.translate(-cameraX, 0);

  ctx.fillStyle = "lightblue";
  for (let p of platforms) ctx.fillRect(p.x, p.y, p.width, p.height);

  ctx.fillStyle = "yellow";
  ctx.fillRect(player.x, player.y, player.width, player.height);

  for (let c of coins) {
    if (!c.collected) {
      ctx.fillStyle = "gold";
      ctx.beginPath();
      ctx.arc(c.x + c.size / 2, c.y + c.size / 2, c.size / 2, 0, Math.PI * 2);
      ctx.fill();
    }
  }

  ctx.fillStyle = "red";
  for (let e of enemies) ctx.fillRect(e.x, e.y, e.width, e.height);

  ctx.restore();
}

function gameLoop() {
  update();
  draw();
  requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>