Webleb - HTML UI Elements - Un codice di alejandrokundrah

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Space Invaders</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="game-container">
    <div class="game-header">
      <h1>Space Invaders</h1>
      <div class="score-board">
        <span>Score: <span id="score">0</span></span>
        <span>Lives: <span id="lives">3</span></span>
      </div>
    </div>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <div class="game-controls">
      <p>Use arrow keys to move, spacebar to shoot</p>
      <button id="startBtn">Start Game</button>
      <button id="pauseBtn" style="display: none;">Pause</button>
    </div>
    <div id="gameOver" class="game-over" style="display: none;">
      <h2>Game Over!</h2>
      <p>Final Score: <span id="finalScore">0</span></p>
      <button id="restartBtn">Play Again</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #0c0c0c, #1a1a2e, #16213e);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

.game-container {
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
  border: 2px solid rgba(0, 255, 255, 0.5);
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 20px;
}

h1 {
  font-size: 2.5em;
  color: #00ffff;
  text-shadow: 0 0 10px #00ffff;
  margin: 0;
}

.score-board {
  display: flex;
  gap: 30px;
  font-size: 1.2em;
  font-weight: bold;
}

.score-board span {
  color: #00ff00;
  text-shadow: 0 0 5px #00ff00;
}

#gameCanvas {
  border: 3px solid #00ffff;
  border-radius: 10px;
  background: linear-gradient(180deg, #000428, #004e92);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

.game-controls {
  margin-top: 20px;
}

.game-controls p {
  margin-bottom: 15px;
  font-size: 1.1em;
  color: #cccccc;
}

button {
  background: linear-gradient(45deg, #00ffff, #0080ff);
  color: white;
  border: none;
  padding: 12px 25px;
  font-size: 1.1em;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  margin: 0 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3);
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 255, 255, 0.5);
}

button:active {
  transform: translateY(0);
}

.game-over {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.9);
  padding: 40px;
  border-radius: 15px;
  border: 2px solid #ff0000;
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
  text-align: center;
}

.game-over h2 {
  color: #ff0000;
  text-shadow: 0 0 10px #ff0000;
  margin-bottom: 20px;
  font-size: 2em;
}

.game-over p {
  font-size: 1.3em;
  margin-bottom: 20px;
  color: #ffffff;
}

#restartBtn {
  background: linear-gradient(45deg, #ff0000, #ff6600);
  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
}

#restartBtn:hover {
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.5);
}

@media (max-width: 850px) {
  .game-container {
    padding: 10px;
  }

#gameCanvas {
    width: 100%;
    max-width: 400px;
    height: 300px;
  }

.game-header {
    flex-direction: column;
    gap: 10px;
  }

h1 {
    font-size: 2em;
  }
}

class Game {
  constructor() {
    this.canvas = document.getElementById('gameCanvas');
    this.ctx = this.canvas.getContext('2d');
    this.score = 0;
    this.lives = 3;
    this.gameRunning = false;
    this.gamePaused = false;
    this.keys = {};
    this.lastTime = 0;

this.player = {
      x: this.canvas.width / 2 - 25,
      y: this.canvas.height - 60,
      width: 50,
      height: 40,
      speed: 5,
      color: '#00ffff'
    };

this.bullets = [];
    this.enemies = [];
    this.particles = [];
    this.enemyBullets = [];

this.enemySpawnTimer = 0;
    this.enemySpawnDelay = 2000;

this.setupEventListeners();
    this.updateUI();
  }

setupEventListeners() {
    document.addEventListener('keydown', (e) => {
      this.keys[e.code] = true;
      if (e.code === 'Space') {
        e.preventDefault();
        this.shoot();
      }
    });

document.addEventListener('keyup', (e) => {
      this.keys[e.code] = false;
    });

document.getElementById('startBtn').addEventListener('click', () => {
      this.startGame();
    });

document.getElementById('pauseBtn').addEventListener('click', () => {
      this.togglePause();
    });

document.getElementById('restartBtn').addEventListener('click', () => {
      this.restartGame();
    });
  }

startGame() {
    this.gameRunning = true;
    this.gamePaused = false;
    document.getElementById('startBtn').style.display = 'none';
    document.getElementById('pauseBtn').style.display = 'inline-block';
    this.gameLoop();
  }

togglePause() {
    this.gamePaused = !this.gamePaused;
    document.getElementById('pauseBtn').textContent = this.gamePaused ? 'Resume' : 'Pause';
    if (!this.gamePaused) {
      this.gameLoop();
    }
  }

restartGame() {
    this.score = 0;
    this.lives = 3;
    this.bullets = [];
    this.enemies = [];
    this.particles = [];
    this.enemyBullets = [];
    this.player.x = this.canvas.width / 2 - 25;
    this.player.y = this.canvas.height - 60;
    this.enemySpawnTimer = 0;

document.getElementById('gameOver').style.display = 'none';
    this.updateUI();
    this.startGame();
  }

gameLoop(currentTime = 0) {
    if (!this.gameRunning || this.gamePaused) return;

const deltaTime = currentTime - this.lastTime;
    this.lastTime = currentTime;

this.update(deltaTime);
    this.render();

requestAnimationFrame((time) => this.gameLoop(time));
  }

update(deltaTime) {
    this.updatePlayer();
    this.updateBullets();
    this.updateEnemies(deltaTime);
    this.updateEnemyBullets();
    this.updateParticles();
    this.checkCollisions();
    this.spawnEnemies(deltaTime);
  }

updatePlayer() {
    if (this.keys['ArrowLeft'] && this.player.x > 0) {
      this.player.x -= this.player.speed;
    }
    if (this.keys['ArrowRight'] && this.player.x < this.canvas.width - this.player.width) {
      this.player.x += this.player.speed;
    }
  }

shoot() {
    if (!this.gameRunning || this.gamePaused) return;

this.bullets.push({
      x: this.player.x + this.player.width / 2 - 2,
      y: this.player.y,
      width: 4,
      height: 10,
      speed: 8,
      color: '#ffff00'
    });
  }

updateBullets() {
    this.bullets = this.bullets.filter(bullet => {
      bullet.y -= bullet.speed;
      return bullet.y > -bullet.height;
    });
  }

updateEnemyBullets() {
    this.enemyBullets = this.enemyBullets.filter(bullet => {
      bullet.y += bullet.speed;
      return bullet.y < this.canvas.height;
    });
  }

spawnEnemies(deltaTime) {
    this.enemySpawnTimer += deltaTime;
    if (this.enemySpawnTimer >= this.enemySpawnDelay) {
      this.enemies.push({
        x: Math.random() * (this.canvas.width - 40),
        y: -40,
        width: 40,
        height: 30,
        speed: 1 + Math.random() * 2,
        color: `hsl(${Math.random() * 360}, 70%, 50%)`,
        lastShot: 0,
        shootDelay: 3000 + Math.random() * 2000
      });
      this.enemySpawnTimer = 0;
      this.enemySpawnDelay = Math.max(500, this.enemySpawnDelay - 50);
    }
  }

updateEnemies(deltaTime) {
    this.enemies = this.enemies.filter(enemy => {
      enemy.y += enemy.speed;

enemy.lastShot += deltaTime;
      if (enemy.lastShot >= enemy.shootDelay) {
        this.enemyBullets.push({
          x: enemy.x + enemy.width / 2 - 2,
          y: enemy.y + enemy.height,
          width: 4,
          height: 8,
          speed: 3,
          color: '#ff0000'
        });
        enemy.lastShot = 0;
      }

return enemy.y < this.canvas.height + 50;
    });
  }

updateParticles() {
    this.particles = this.particles.filter(particle => {
      particle.x += particle.vx;
      particle.y += particle.vy;
      particle.life -= 0.02;
      particle.size *= 0.98;
      return particle.life > 0 && particle.size > 0.5;
    });
  }

createExplosion(x, y, color) {
    for (let i = 0; i < 10; i++) {
      this.particles.push({
        x: x,
        y: y,
        vx: (Math.random() - 0.5) * 8,
        vy: (Math.random() - 0.5) * 8,
        size: Math.random() * 6 + 2,
        color: color,
        life: 1
      });
    }
  }

checkCollisions() {
    this.bullets.forEach((bullet, bulletIndex) => {
      this.enemies.forEach((enemy, enemyIndex) => {
        if (this.isColliding(bullet, enemy)) {
          this.createExplosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2, enemy.color);
          this.bullets.splice(bulletIndex, 1);
          this.enemies.splice(enemyIndex, 1);
          this.score += 100;
          this.updateUI();
        }
      });
    });

this.enemyBullets.forEach((bullet, bulletIndex) => {
      if (this.isColliding(bullet, this.player)) {
        this.createExplosion(this.player.x + this.player.width / 2, this.player.y + this.player.height / 2, '#ff0000');
        this.enemyBullets.splice(bulletIndex, 1);
        this.lives--;
        this.updateUI();
        if (this.lives <= 0) {
          this.gameOver();
        }
      }
    });

this.enemies.forEach((enemy, index) => {
      if (this.isColliding(enemy, this.player)) {
        this.createExplosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2, enemy.color);
        this.enemies.splice(index, 1);
        this.lives--;
        this.updateUI();
        if (this.lives <= 0) {
          this.gameOver();
        }
      }
    });
  }

isColliding(rect1, rect2) {
    return rect1.x < rect2.x + rect2.width &&
           rect1.x + rect1.width > rect2.x &&
           rect1.y < rect2.y + rect2.height &&
           rect1.y + rect1.height > rect2.y;
  }

gameOver() {
    this.gameRunning = false;
    document.getElementById('finalScore').textContent = this.score;
    document.getElementById('gameOver').style.display = 'block';
    document.getElementById('pauseBtn').style.display = 'none';
    document.getElementById('startBtn').style.display = 'inline-block';
    document.getElementById('startBtn').textContent = 'New Game';
  }

updateUI() {
    document.getElementById('score').textContent = this.score;
    document.getElementById('lives').textContent = this.lives;
  }

render() {
    this.ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

this.drawStars();
    this.drawPlayer();
    this.drawBullets();
    this.drawEnemies();
    this.drawEnemyBullets();
    this.drawParticles();
  }

drawStars() {
    this.ctx.fillStyle = 'white';
    for (let i = 0; i < 50; i++) {
      const x = (i * 37) % this.canvas.width;
      const y = (i * 53 + Date.now() * 0.1) % this.canvas.height;
      this.ctx.fillRect(x, y, 1, 1);
    }
  }

drawPlayer() {
    this.ctx.fillStyle = this.player.color;
    this.ctx.fillRect(this.player.x, this.player.y, this.player.width, this.player.height);

this.ctx.fillStyle = '#ffffff';
    this.ctx.fillRect(this.player.x + 10, this.player.y + 10, 10, 5);
    this.ctx.fillRect(this.player.x + 30, this.player.y + 10, 10, 5);
  }

drawBullets() {
    this.bullets.forEach(bullet => {
      this.ctx.fillStyle = bullet.color;
      this.ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
    });
  }

drawEnemies() {
    this.enemies.forEach(enemy => {
      this.ctx.fillStyle = enemy.color;
      this.ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);

this.ctx.fillStyle = '#ff0000';
      this.ctx.fillRect(enemy.x + 5, enemy.y + 5, 8, 8);
      this.ctx.fillRect(enemy.x + 27, enemy.y + 5, 8, 8);
    });
  }

drawEnemyBullets() {
    this.enemyBullets.forEach(bullet => {
      this.ctx.fillStyle = bullet.color;
      this.ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
    });
  }

drawParticles() {
    this.particles.forEach(particle => {
      this.ctx.save();
      this.ctx.globalAlpha = particle.life;
      this.ctx.fillStyle = particle.color;
      this.ctx.fillRect(particle.x - particle.size / 2, particle.y - particle.size / 2, particle.size, particle.size);
      this.ctx.restore();
    });
  }
}

const game = new Game();

Validating your code, please wait...

HTML

CSS