Jet Space Game

by SonicBear35

166 lines2.8 KB

<!DOCTYPE html>
<html>
<head>
<title>Jet Space Game</title>
<style>
  body {
    margin: 0;
    overflow: hidden;
    background: black;
  }

  canvas {
    display: block;
    margin: auto;
    background: linear-gradient(#000010, #000000);
  }

  #score {
    position: fixed;
    top: 10px;
    left: 10px;
    color: white;
    font-size: 20px;
    font-family: Arial;
  }
</style>
</head>
<body>

<div id="score">Score: 0</div>
<canvas id="game"></canvas>

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

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let score = 0;

// 🚀 Player jet
let jet = {
  x: canvas.width / 2,
  y: canvas.height - 100,
  w: 40,
  h: 40
};

// 🔫 bullets
let bullets = [];

// 👾 enemies
let enemies = [];

document.addEventListener("mousemove", (e) => {
  jet.x = e.clientX - jet.w / 2;
});

document.addEventListener("click", () => {
  bullets.push({
    x: jet.x + jet.w / 2,
    y: jet.y,
    speed: 8
  });
});

// spawn enemies
setInterval(() => {
  enemies.push({
    x: Math.random() * canvas.width,
    y: -50,
    speed: 2 + Math.random() * 2
  });
}, 700);

function drawJet() {
  ctx.fillStyle = "cyan";
  ctx.fillRect(jet.x, jet.y, jet.w, jet.h);

  // jet flame
  ctx.fillStyle = "orange";
  ctx.fillRect(jet.x + 10, jet.y + 40, 20, 20);
}

function drawBullets() {
  ctx.fillStyle = "yellow";
  for (let b of bullets) {
    ctx.fillRect(b.x, b.y, 5, 10);
  }
}

function drawEnemies() {
  ctx.fillStyle = "red";
  for (let e of enemies) {
    ctx.beginPath();
    ctx.arc(e.x, e.y, 20, 0, Math.PI * 2);
    ctx.fill();
  }
}

function update() {
  // bullets move
  for (let b of bullets) {
    b.y -= b.speed;
  }

  // enemies move
  for (let e of enemies) {
    e.y += e.speed;
  }

  // collision bullet vs enemy
  for (let i = enemies.length - 1; i >= 0; i--) {
    for (let j = bullets.length - 1; j >= 0; j--) {
      let e = enemies[i];
      let b = bullets[j];

      if (
        b.x > e.x - 20 &&
        b.x < e.x + 20 &&
        b.y > e.y - 20 &&
        b.y < e.y + 20
      ) {
        enemies.splice(i, 1);
        bullets.splice(j, 1);
        score++;
        document.getElementById("score").innerText = "Score: " + score;
        break;
      }
    }
  }

  // remove off-screen bullets
  bullets = bullets.filter(b => b.y > -20);

  // game over (enemy hits jet)
  for (let e of enemies) {
    if (
      e.x > jet.x &&
      e.x < jet.x + jet.w &&
      e.y > jet.y &&
      e.y < jet.y + jet.h
    ) {
      alert("Game Over! Score: " + score);
      location.reload();
    }
  }
}

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

  drawJet();
  drawBullets();
  drawEnemies();
  update();

  requestAnimationFrame(loop);
}

loop();
</script>

</body>
</html>

Game Source: Jet Space Game

Creator: SonicBear35

Libraries: none

Complexity: moderate (166 lines, 2.8 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: jet-space-game-sonicbear35" to link back to the original. Then publish at arcadelab.ai/publish.