SPACE SHOOTER GAME CODE ► MacroNepal

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Shooter Game</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body, html { height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; background: #000; font-family: Arial, sans-serif; color: white; }
  canvas { background-color: #222; border: 2px solid #fff; }
  .scoreboard { position: absolute; top: 10px; left: 10px; font-size: 1.2em; color: #fff; }
  .game-over { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #ff4c4c; display: none; }
</style>
</head>
<body>

<div class="scoreboard">Score: <span id="score">0</span></div>
<div class="game-over" id="gameOver">
  <h1>Game Over</h1>
  <p>Your score: <span id="finalScore"></span></p>
  <button onclick="restartGame()">Restart</button>
</div>
<canvas id="gameCanvas" width="500" height="700"></canvas>

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

let score = 0;
let gameInterval, enemySpawnInterval;
let isGameOver = false;

class Player {
  constructor() {
    this.width = 50;
    this.height = 60;
    this.x = canvas.width / 2 - this.width / 2;
    this.y = canvas.height - this.height - 10;
    this.speed = 5;
    this.lasers = [];
  }

  draw() {
    ctx.fillStyle = '#00f';
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }

  moveLeft() {
    this.x = Math.max(this.x - this.speed, 0);
  }

  moveRight() {
    this.x = Math.min(this.x + this.speed, canvas.width - this.width);
  }

  shoot() {
    const laser = new Laser(this.x + this.width / 2 - 2.5, this.y);
    this.lasers.push(laser);
  }

  update() {
    this.draw();
    this.lasers.forEach((laser, index) => {
      laser.update();
      if (laser.y < 0) this.lasers.splice(index, 1);
    });
  }
}

class Laser {
  constructor(x, y) {
    this.width = 5;
    this.height = 20;
    this.x = x;
    this.y = y;
    this.speed = 10;
  }

  draw() {
    ctx.fillStyle = '#0f0';
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }

  update() {
    this.y -= this.speed;
    this.draw();
  }
}

class Enemy {
  constructor(x, y, speed) {
    this.width = 40;
    this.height = 40;
    this.x = x;
    this.y = y;
    this.speed = speed;
  }

  draw() {
    ctx.fillStyle = '#f00';
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }

  update() {
    this.y += this.speed;
    this.draw();
  }
}

const player = new Player();
const enemies = [];

function spawnEnemy() {
  const x = Math.random() * (canvas.width - 40);
  const speed = Math.random() * 2 + 1;
  enemies.push(new Enemy(x, 0, speed));
}

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

  if (isGameOver) return;

  player.update();
  enemies.forEach((enemy, enemyIndex) => {
    enemy.update();

    if (enemy.y + enemy.height > canvas.height) {
      endGame();
    }

    player.lasers.forEach((laser, laserIndex) => {
      if (laser.x < enemy.x + enemy.width &&
          laser.x + laser.width > enemy.x &&
          laser.y < enemy.y + enemy.height &&
          laser.y + laser.height > enemy.y) {
        setTimeout(() => {
          player.lasers.splice(laserIndex, 1);
          enemies.splice(enemyIndex, 1);
          score++;
          document.getElementById('score').innerText = score;
        }, 0);
      }
    });

    if (enemy.x < player.x + player.width &&
        enemy.x + enemy.width > player.x &&
        enemy.y < player.y + player.height &&
        enemy.y + enemy.height > player.y) {
      endGame();
    }
  });
}

function startGame() {
  isGameOver = false;
  score = 0;
  document.getElementById('score').innerText = score;
  document.getElementById('gameOver').style.display = 'none';
  enemies.length = 0;
  player.lasers.length = 0;

  gameInterval = setInterval(gameLoop, 1000 / 60);
  enemySpawnInterval = setInterval(spawnEnemy, 1000);
}

function endGame() {
  clearInterval(gameInterval);
  clearInterval(enemySpawnInterval);
  isGameOver = true;
  document.getElementById('gameOver').style.display = 'block';
  document.getElementById('finalScore').innerText = score;
}

function restartGame() {
  startGame();
}

document.addEventListener('keydown', (e) => {
  if (isGameOver) return;
  if (e.key === 'ArrowLeft') player.moveLeft();
  if (e.key === 'ArrowRight') player.moveRight();
  if (e.key === ' ') player.shoot();
});

startGame();
</script>

</body>
</html>

HTML

Share this:

Leave a Reply Cancel reply