En este artículo, crearemos un juego de lucha contra el covid usando HTML, CSS y JavaScript. En este juego, crearemos tres objetos, el primer objeto representará al usuario que tendrá que cruzar varios obstáculos para llegar al objeto final.
Enfoque: Primero crearemos el diseño HTML, le daremos estilo usando CSS y luego escribiremos la lógica en JavaScript. En nuestro juego, el primer objeto representa la tierra, el segundo representa el coronavirus y el tercero representa la vacuna.
Código HTML: Utilizaremos HTML para diseñar la estructura o el diseño de la página web. Cree un lienzo HTML con id «mycanvas». Incluya el archivo JavaScript «covid.js» en el código HTML.
HTML
<!DOCTYPE html> <html> <body> <h1>COVID-19 Fighter Game</h1> <canvas id="mycanvas"></canvas> <script src="covid.js"></script> </body> </html>
Código CSS: CSS se utiliza para dar un estilo general y hacerlo más atractivo visualmente. Dale un estilo general a toda la página, como color, alineación y color de fondo. Usamos flex para centrar el lienzo y establecer la imagen de fondo en el fondo de nuestro juego. Incluya lo siguiente en el código HTML anterior en la sección de estilo de la parte principal del código.
body {
text-align: center;
color: #ffff;
background: #000;
}
#mycanvas{
display: flex;
align-items: center;
justify-content: center;
background-image: url(Assets/bg.gif)
background-size: cover;
}
Salida: El resultado del diseño HTML y el estilo CSS es similar al siguiente.
La salida resultante no se parece a la salida deseada, pero ajustaremos la altura y el ancho del lienzo usando JavaScript.
Lógica: la parte lógica principal se implementa mediante JavaScript.
- Según nuestra lógica cuando el objeto tierra choca con el coronavirus (el segundo objeto) disminuiremos la salud del jugador en 50 puntos.
- La salud inicial del jugador será 100.
- Cuando la salud del jugador sea <= 0, nuestro juego terminará.
- Cuando el jugador alcance el tercer objeto, el jugador gana.
- Nuestro juego se divide básicamente en seis funciones básicas.
function load_assets(){
}
function init(){
}
function isOverlap(rect1, rect2){
}
function draw(){
}
function update(){
}
function gameloop(){
}
Paso 1:
- Inicialmente, cargaremos todos los activos necesarios. Necesitaremos un enemigo, un jugador, sonido ganador, sonido perdedor y un tercer objeto que es la vacuna.
- Crearemos la función load_assets() que cargará todos los activos necesarios.
JavaScript
function load_assets(){
// Enemy object
enemy_img = new Image();
enemy_img.src = "Assets/enemy.png";
// Main user
player_img = new Image();
player_img.src = "Assets/fighter.png";
// Vaccine
gem_img = new Image;
gem_img.src = "Assets/vac.gif";
// Winning sound
win = new Audio();
win.src = "Audio/won.wav";
// Losing sound
lose = new Audio();
lose.src = "Audio/dead.mp3";
}
Paso 2:
- En este paso, inicializaremos nuestro estado del juego. Estableceremos la altura y el ancho del lienzo.
- También estableceremos el número de segundos objetos. Crearemos cinco enemigos configurando su posición general, velocidad, altura y ancho.
- También crearemos el objeto jugador con propiedades como posición, altura, ancho, estado de velocidad y estado de movimiento.
- Cree un objeto de gema que represente el estado final de nuestro juego con propiedades como altura, ancho y posiciones.
- Al final, agregue el detector de eventos con eventos mousedown y mouseup para mover el reproductor y detenerlo.
- Estamos listos con la configuración inicial. Veamos la salida a continuación.
JavaScript
function init(){
cvs = document.getElementById('mycanvas');
// Setting the height and width of canvas
W = cvs.width = 1252;
H = cvs.height = 516;
// Getting the context the of canvas
pen = cvs.getContext('2d');
// Initially setting the variable to false
game_over = false;
// Creating the enemies object with
// coordinates x y width(w) height(h)
// and speed
e1 = {
x:200,
y:50,
w:80,
h:80,
speed:20,
};
e2 = {
x:450,
y:150,
w:80,
h:80,
speed:35,
};
e3 = {
x:700,
y:300,
w:80,
h:80,
speed:40,
};
e4 = {
x:900,
y:100,
w:80,
h:80,
speed:30,
};
// Array of enemies
enemy = [e1, e2, e3, e4];
// Creating the player object
player = {
x:20,
y:H/2,
w:110,
h:110,
speed:30,
health:100,
moving: "false"
}
// Creating the vaccine gem
gem = {
x:W-150,
y:H/2,
w:150,
h:150,
}
// The main part lets move the player
// using event mouse down and stop
//using mouse up
cvs.addEventListener('mousedown', function(){
console.log("Mouse Pressed");
player.moving = true;
});
cvs.addEventListener('mouseup', function(){
console.log("Mouse Released");
player.moving = false;
});
}
Producción:
Paso 3:
- En este paso, veremos la función de superposición que usaremos para verificar si nuestro jugador está chocando con algún otro objeto, puede ser un enemigo o una gema (vacuna).
JavaScript
function isOverlap(rect1, rect2) {
if (rect1.x < rect2.x + rect2.w &&
rect1.x + rect1.w > rect2.x &&
rect1.y < rect2.y + rect2.h &&
rect1.y + rect1.h > rect2.y) {
return true;
}
return false;
}
Paso 4:
- Veremos la función dibujar() que ayudará a dibujar imágenes gráficas del jugador enemigo y la gema en su posición respectiva.
JavaScript
function draw() {
// Drawing the images
for(let i = 0; i < enemy.length; i++) {
pen.drawImage(enemy_img, enemy[i].x,
enemy[i].y, enemy[i].w, enemy[i].h);
}
// Draw the player
pen.drawImage(player_img, player.x,
player.y, player.w, player.h);
// Draw the vaccine
pen.drawImage(gem_img, gem.x,
gem.y, gem.w, gem.h);
// Displaying score
pen.fillStyle = "white";
pen.font = "30px Roboto";
pen.fillText("Score " +
player.health, 30, 30);
}
Paso 5:
- Lo siguiente implementa la función update() .
- Vuelve cuando el juego ha terminado.
- Si el jugador todavía se está moviendo, aumentará la velocidad y la salud del jugador.
- Si nuestro jugador está chocando con alguno de los enemigos, reproducirá el sonido de pérdida y disminuirá la salud en 50 puntos.
- Si la salud es negativa o 0, el juego termina y regresa.
- Si el juego aún no ha terminado, veremos si nuestro jugador está chocando con la vacuna (gema). En este caso se acaba el juego que reproduce el sonido ganador, y alerta el marcador.
- Si el juego aún no ha terminado, ajustará la velocidad y las posiciones del enemigo.
JavaScript
function update() {
// If player is moving
if(game_over){
return;
}
if(player.moving == true){
player.x += player.speed;
player.health += 20;
}
// Checking collision of player
// with all enemies
for(let i = 0; i < enemy.length; i++){
if(isOverlap(enemy[i], player)){
lose.play();
player.health -= 50;
if(player.health < 0){
draw();
lose.play();
alert("You Lose ");
game_over = true;
return;
}
}
}
// checking the player and vaccine
// collision for the win.
if(isOverlap(player, gem)){
win.play();
alert("You Won " + player.health);
game_over = true;
return;
}
// Adjusting the speed and positions
// of enemy
for(let i = 0; i<enemy.length; i++){
enemy[i].y += enemy[i].speed;
if(enemy[i].y > H-enemy[i].h || enemy[i].y <= 0){
enemy[i].speed *= -1;
}
}
}
Paso 6:
- Completemos la función gameloop() que usaremos para ejecutar el juego.
- Si el estado del juego ha terminado, borrará todo el intervalo que llamamos al final.
- Dibujaremos el objeto y actualizaremos las cosas de acuerdo con la acción del usuario.
JavaScript
function gameloop(){
if(game_over){
clearInterval(f);
}
draw();
update();
}
Paso 7:
- Nota: llamamos a todas las funciones juntas en el archivo JavaScript «covid.js».
- Primero, llamaremos a las funciones load_assets() e init() .
- Llamaremos a la función gameloop() en un intervalo de cada 100ms.
JavaScript
load_assets(); init(); var f = setInterval(gameloop, 100);
Producción:
Código fuente:
https://github.com/Nandini-72/Covid_Fighter_Game
Publicación traducida automáticamente
Artículo escrito por NANDINIJAIN y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA