7.6 KiB

Raw Blame History

Construir un Juego Espacial Parte 5: Puntuación y Vidas

Cuestionario Previo a la Clase

En esta lección, aprenderás cómo agregar puntuación a un juego y calcular vidas.

Dibujar texto en la pantalla

Para poder mostrar la puntuación del juego en la pantalla, necesitas saber cómo colocar texto en ella. La respuesta es usar el método fillText() en el objeto canvas. También puedes controlar otros aspectos como qué fuente usar, el color del texto e incluso su alineación (izquierda, derecha, centro). A continuación, hay un código que dibuja texto en la pantalla.

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ Lee más sobre cómo agregar texto a un canvas, ¡y siéntete libre de hacerlo más llamativo!

La vida, como concepto de juego

El concepto de tener vidas en un juego es simplemente un número. En el contexto de un juego espacial, es común asignar un conjunto de vidas que se van descontando una por una cuando tu nave recibe daño. Es agradable si puedes mostrar una representación gráfica de esto, como mini-naves o corazones, en lugar de un número.

Qué construir

Vamos a agregar lo siguiente a tu juego:

Puntuación del juego: Por cada nave enemiga que sea destruida, el héroe debería recibir algunos puntos; sugerimos 100 puntos por nave. La puntuación del juego debería mostrarse en la parte inferior izquierda.
Vidas: Tu nave tiene tres vidas. Pierdes una vida cada vez que una nave enemiga choca contigo. Las vidas deberían mostrarse en la parte inferior derecha y estar representadas por el siguiente gráfico .

Pasos recomendados

Ubica los archivos que se han creado para ti en la subcarpeta your-work. Debería contener lo siguiente:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

Inicia tu proyecto en la carpeta your_work escribiendo:

cd your-work
npm start

Lo anterior iniciará un servidor HTTP en la dirección http://localhost:5000. Abre un navegador e ingresa esa dirección; en este momento debería renderizar al héroe y todos los enemigos, y al presionar las flechas izquierda y derecha, el héroe se moverá y podrá disparar a los enemigos.

Agregar código

Copia los recursos necesarios desde la carpeta solution/assets/ a la carpeta your-work; agregarás el recurso life.png. Agrega el lifeImg a la función window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Agrega el lifeImg a la lista de recursos:

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

Agrega variables. Agrega código que represente tu puntuación total (0) y las vidas restantes (3), mostrando estas puntuaciones en la pantalla.

Extiende la función updateGameObjects(). Extiende la función updateGameObjects() para manejar las colisiones con enemigos:

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

Agrega vidas y puntos.

Inicializa variables. Bajo this.cooldown = 0 en la clase Hero, establece vidas y puntos:
```
this.life = 3;
this.points = 0;
```

Dibuja las variables en la pantalla. Dibuja estos valores en la pantalla:

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

Agrega métodos al bucle del juego. Asegúrate de agregar estas funciones a tu función window.onload bajo updateGameObjects():
```
drawPoints();
drawLife();
```

Implementa las reglas del juego. Implementa las siguientes reglas del juego:

Por cada colisión entre el héroe y un enemigo, descuenta una vida.

Extiende la clase Hero para realizar esta deducción:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

Por cada láser que golpee a un enemigo, incrementa la puntuación del juego en 100 puntos.

Extiende la clase Hero para realizar este incremento:

  incrementPoints() {
    this.points += 100;
  }

Agrega estas funciones a tus emisores de eventos de colisión:

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});

✅ Investiga un poco para descubrir otros juegos que se han creado usando JavaScript/Canvas. ¿Cuáles son sus características comunes?

Al final de este trabajo, deberías ver las pequeñas naves de 'vida' en la parte inferior derecha, los puntos en la parte inferior izquierda, y deberías ver cómo tu contador de vidas disminuye al chocar con enemigos y cómo tus puntos aumentan al disparar a los enemigos. ¡Bien hecho! Tu juego está casi completo.

🚀 Desafío

Tu código está casi completo. ¿Puedes imaginar tus próximos pasos?

Cuestionario Posterior a la Clase

Cuestionario posterior a la clase

Repaso y Estudio Personal

Investiga algunas formas en las que puedes incrementar y decrementar las puntuaciones y vidas en un juego. Hay algunos motores de juego interesantes como PlayFab. ¿Cómo podría usar uno de estos mejorar tu juego?

Tarea

Construir un Juego de Puntuación

Descargo de responsabilidad:
Este documento ha sido traducido utilizando el servicio de traducción automática Co-op Translator. Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

7.6 KiB Raw Blame History