Webleb - UI Elements - Space shooter

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shooter Game</title>
  <style>
    body { margin: 0; background: black; overflow: hidden; }
    canvas { display: block; margin: 0 auto; background: #111; }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="600" height="400"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

// Game objects
    const player = { x: 280, y: 350, width: 40, height: 20, speed: 5, color: 'green' };
    const bullets = [];
    const enemies = [];
    let score = 0;
    let gameOver = false;

// Create enemies
    for (let i = 0; i < 5; i++) {
      enemies.push({ x: i * 100 + 20, y: 20, width: 40, height: 20, color: 'red', dy: 1 });
    }

// Key handling
    const keys = {};
    document.addEventListener('keydown', e => { keys[e.key] = true; });
    document.addEventListener('keyup', e => { keys[e.key] = false; });

function update() {
      if(gameOver) return;

// Player movement
      if (keys['ArrowLeft'] && player.x > 0) player.x -= player.speed;
      if (keys['ArrowRight'] && player.x + player.width < canvas.width) player.x += player.speed;
      if (keys[' '] || keys['Space']) {
        if (bullets.length < 3) bullets.push({ x: player.x + player.width/2 - 2, y: player.y, width: 4, height: 10, color: 'yellow' });
      }

// Update bullets position
      bullets.forEach((b, i) => {
        b.y -= 7;
        // Remove bullets when off screen
        if (b.y < 0) bullets.splice(i, 1);
      });

// Update enemies position
      enemies.forEach((e, i) => {
        e.y += e.dy;
        if (e.y > canvas.height) { gameOver = true; }
      });

// Collision detection
      bullets.forEach((b, bi) => {
        enemies.forEach((e, ei) => {
          if (b.x < e.x + e.width && b.x + b.width > e.x && b.y < e.y + e.height && b.y + b.height > e.y) {
            bullets.splice(bi, 1);
            enemies.splice(ei, 1);
            score += 10;
            // Spawn new enemy
            enemies.push({ x: Math.random() * (canvas.width - 40), y: 20, width: 40, height: 20, color: 'red', dy: 1 + Math.random() });
          }
        });
      });
    }

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

// Draw player
      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.width, player.height);

// Draw bullets
      bullets.forEach(b => {
        ctx.fillStyle = b.color;
        ctx.fillRect(b.x, b.y, b.width, b.height);
      });

// Draw enemies
      enemies.forEach(e => {
        ctx.fillStyle = e.color;
        ctx.fillRect(e.x, e.y, e.width, e.height);
      });

// Draw score
      ctx.fillStyle = 'white';
      ctx.font = '16px Arial';
      ctx.fillText('Score: ' + score, 10, 20);

if (gameOver) {
        ctx.fillStyle = 'red';
        ctx.font = '36px Arial';
        ctx.fillText('GAME OVER', canvas.width/2 - 100, canvas.height/2);
      }
    }

function gameLoop() {
      update();
      draw();
      requestAnimationFrame(gameLoop);
    }

gameLoop();
  </script>
</body>
</html>

CSS

JS

Space shooter

Recommended