Vida Tres: Juego con Barra de Vida en JavaScript
Vida Tres: Juego con Barra de Vida en JavaScript
Aquí tienes el código completo de un juego simple donde controlas un personaje que puede disparar, evadir enemigos y tiene una barra de vida que disminuye al ser golpeado.
Código Completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego con Barra de Vida</title>
</head>
<body onload="inicializa()">
<canvas id="canvas" width="500" height="300" style="border:2px solid #000"></canvas>
<script>
// Variables globales
let canvas, ctx; // Canvas y contexto de dibujo
let FPS = 50; // Fotogramas por segundo
let vida = 100; // Vida inicial del personaje
// Imagen del protagonista (debes tener un archivo 'img/mega.jpeg')
let imgMega = new Image();
imgMega.src = 'img/mega.jpeg';
// Inicialización del juego
function inicializa() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
setInterval(principal, 1000 / FPS); // Bucle principal del juego
}
// Clase Protagonista (personaje controlable)
class Protagonista {
constructor(x, y) {
this.x = x; // Posición X
this.y = y; // Posición Y
this.velocidad = 3; // Velocidad de movimiento
}
// Dibuja al personaje en el canvas
dibuja() {
ctx.drawImage(imgMega, this.x, this.y, 50, 50);
}
// Dibuja la barra de vida
dibujaVida() {
ctx.fillStyle = "red";
ctx.fillRect(10, 10, vida * 2, 20); // Ancho proporcional a la vida
ctx.strokeStyle = "black";
ctx.strokeRect(10, 10, 200, 20); // Borde de la barra
}
// Métodos de movimiento
arriba() {
if (this.y > 0) this.y -= this.velocidad;
}
abajo() {
if (this.y < canvas.height - 50) this.y += this.velocidad;
}
izquierda() {
if (this.x > 0) this.x -= this.velocidad;
}
derecha() {
if (this.x < canvas.width - 50) this.x += this.velocidad;
}
}
// Clase Personaje (enemigos)
class Personaje {
constructor(x, y) {
this.x = x;
this.y = y;
this.vivo = true; // Estado del enemigo
this.direccion = 1; // 1 (derecha) o -1 (izquierda)
}
dibuja() {
if (this.vivo) {
ctx.fillStyle = "#fff000"; // Color amarillo
ctx.fillRect(this.x, this.y, 50, 50);
}
}
mueve() {
if (this.vivo) {
this.x += 2 * this.direccion;
// Cambia de dirección al llegar al borde
if (this.x <= 0 || this.x >= canvas.width - 50) {
this.direccion *= -1;
}
}
}
}
// Clase Bala (disparos del jugador)
class Bala {
constructor(x, y) {
this.x = x;
this.y = y;
this.velocidad = 5; // Velocidad de la bala
}
dibuja() {
ctx.fillStyle = "#ff0000"; // Color rojo
ctx.fillRect(this.x, this.y, 10, 5);
}
mueve() {
this.x += this.velocidad;
}
}
// Inicialización de objetos
let prota = new Protagonista(200, 200); // Jugador en posición inicial
let enemigos = [
new Personaje(50, 50),
new Personaje(150, 120),
new Personaje(250, 200)
];
let balas = []; // Array para almacenar las balas
// Control del teclado
document.addEventListener('keydown', function (tecla) {
if (tecla.keyCode == 38) prota.arriba(); // Flecha arriba
if (tecla.keyCode == 40) prota.abajo(); // Flecha abajo
if (tecla.keyCode == 37) prota.izquierda(); // Flecha izquierda
if (tecla.keyCode == 39) prota.derecha(); // Flecha derecha
if (tecla.keyCode == 32) { // Barra espaciadora (disparo)
balas.push(new Bala(prota.x + 50, prota.y + 20));
}
});
// Limpia el canvas para el siguiente fotograma
function borraCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// Detecta colisiones entre balas y enemigos
function detectaColisiones() {
balas.forEach((bala, balaIndex) => {
enemigos.forEach((enemigo, enemigoIndex) => {
if (enemigo.vivo &&
bala.x < enemigo.x + 50 &&
bala.x + 10 > enemigo.x &&
bala.y < enemigo.y + 50 &&
bala.y + 5 > enemigo.y) {
enemigo.vivo = false; // Elimina al enemigo
balas.splice(balaIndex, 1); // Elimina la bala
}
});
});
}
// Detecta colisiones entre el jugador y los enemigos
function detectaColisionesProta() {
enemigos.forEach(enemigo => {
if (enemigo.vivo &&
prota.x < enemigo.x + 50 &&
prota.x + 50 > enemigo.x &&
prota.y < enemigo.y + 50 &&
prota.y + 50 > enemigo.y) {
vida -= 1; // Reduce la vida
// Game Over si la vida llega a 0
if (vida <= 0) {
alert("¡Has perdido!");
location.reload(); // Reinicia el juego
}
}
});
}
// Función principal del juego (se ejecuta en cada fotograma)
function principal() {
borraCanvas();
prota.dibuja(); // Dibuja al jugador
prota.dibujaVida(); // Dibuja la barra de vida
// Dibuja y mueve enemigos
enemigos.forEach(enemigo => {
enemigo.dibuja();
enemigo.mueve();
});
// Dibuja y mueve balas
balas.forEach((bala, index) => {
bala.dibuja();
bala.mueve();
// Elimina balas que salen del canvas
if (bala.x > canvas.width) {
balas.splice(index, 1);
}
});
detectaColisiones(); // Verifica colisiones bala-enemigo
detectaColisionesProta(); // Verifica colisiones jugador-enemigo
}
</script>
</body>
</html>Explicación del Código
1. Estructura Básica
El juego se ejecuta en un
<canvas>de 500x300 píxeles.Se inicializa con
inicializa(), que configura el bucle principal (setInterval).
2. Clases Principales
Protagonista:Se mueve con las flechas del teclado.
Tiene una barra de vida que disminuye al chocar con enemigos.
Personaje(enemigos):Se mueven horizontalmente y rebotan en los bordes.
Mueren al ser impactados por una bala.
Bala:Se disparan con la barra espaciadora.
Desaparecen al salir del canvas o al golpear un enemigo.
3. Mecánicas del Juego
Colisiones:
Si el jugador toca un enemigo, pierde vida.
Si una bala golpea un enemigo, este desaparece.
Game Over:
Cuando la vida llega a 0, el juego se reinicia.
4. Posibles Mejoras
✔ Añadir sonidos (disparos, daño, game over).
✔ Sistema de puntuación por enemigos eliminados.
✔ Más niveles con enemigos más rápidos o diferentes.
✔ Sprites animados en lugar de figuras geométricas.
¿Cómo Probarlo?
Copia el código en un archivo
index.html.Asegúrate de tener una imagen llamada
mega.jpegen una carpetaimg/.Ábrelo en un navegador y ¡a jugar!
¿Qué más te gustaría añadir al juego
Comentarios
Publicar un comentario