Introducción al proyecto: “Dragon’s World” es un juego en el que un dragón intenta salvarse del otro dragón saltando sobre el dragón que se interpone en su camino. La puntuación se actualiza cuando un dragón se salva del otro dragón.
El proyecto contendrá archivos HTML, CSS y JavaScript. El archivo HTML agrega estructura al juego seguido de estilo usando CSS. JavaScript agrega funcionalidad al juego.
Estructura del archivo:
- índice.html
- estilo.css
- guión.js
Código HTML:
- Parte del encabezado: mostrará el nombre del juego.
- Porción de finalización del juego: se mostrará cuando pierdas el juego.
- Porción de obstáculo: Contendrá el obstáculo del que el dragón tiene que salvarse.
- Porción de dragón: contendrá el dragón que debe salvarse del obstáculo, es decir, el otro dragón.
- Porción de puntuación: mostrará la puntuación actual del juego.
índice.html
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "style.css?_cacheOverride=1606401798626"> <link href= "https://fonts.googleapis.com/css2?family=Ubuntu:ital, wght@0, 300;1, 700&display=swap" rel="stylesheet"> </head> <body> <h1 id="gameName">Welcome to Dragon's world</h1> <div class="container"> <div class="gameover">Game Over</div> <div id="scorecount">Your score : 0</div> <div class="obstacle animateobstacle"></div> <div class="dragon" style="left: 426px;"></div> </div> </body> </html>
Código CSS:
- Posicionamiento del nombre del juego: El nombre del juego se posiciona por propiedad absoluta de CSS.
- Estilo de imagen de fondo: en la clase de contenedor , hemos puesto la imagen de fondo del juego con el tamaño de fondo configurado para cubrir .
- Estilo de la tarjeta de puntuación: hemos colocado la tarjeta de puntuación en la parte superior derecha de la página y también le hemos proporcionado un color de fondo adecuado para que sea atractiva. El texto en él se mostraría en blanco .
- Estilo de imagen de obstáculo: hemos colocado el obstáculo en la parte inferior izquierda de la página y le hemos proporcionado animación para que pueda moverse hacia la izquierda.
- Estilo del dragón: hemos colocado al dragón en la parte inferior izquierda de la página y le hemos dado animación para que pueda saltar y salvarse.
- Estilo Game Over: hemos colocado la parte Game Over en el centro de la página y aparecerá cuando el obstáculo golpee al dragón.
estilo.css
/* CSS Reset */
*{
margin:0px;
padding:0px;
}
body {
/* Hides the bottom scrollbar */
overflow: hidden;
}
/* Styling of the Game's Name */
#gameName {
position: absolute;
top:30vh;
left:38vw;
}
/* Background image styling */
.container {
background-image: url(cover.png);
background-size: cover;
width:100vw;
height:100vh;
}
/* ScoreCard Styling */
#scorecount {
position: absolute;
top:20px;
right:20px;
background-color: black;
padding: 28px;
border-radius: 20px;
color: white;
}
/* Obstacle image styling and positioning */
.obstacle {
background-image: url(obstacle.png);
background-size: cover;
width:154px;
height: 126px;
position: absolute;
bottom:0px;
right:120px;
}
/* Applying animation to the obstacle
so that it can move towards left */
.animateobstacle {
animation: aniob 5s linear infinite;
}
@keyframes aniob {
0% {
left:100vw;
}
100% {
left:-10vw;
}
}
/* Dragon's styling */
.dragon {
background-image: url(dragon.png);
background-size: cover;
width: 194px;
height: 126px;
position: absolute;
bottom:0px;
left:90px;
}
/* Applying animation to the dragon so
that it can save himself by jumping up */
.animatedragon {
animation: ani 1s linear;
}
@keyframes ani {
0% {
bottom:0px;
}
25% {
bottom:150px;
}
50% {
bottom:300px;
}
75% {
bottom:211px;
}
100% {
bottom:0px;
}
}
/* gameover styling and positioning */
.gameover {
visibility: hidden;
font-family: 'Ubuntu', sans-serif;
position: absolute;
top: 50vh;
left: 35vw;
color: red;
font-weight: bold;
font-size: 6rem;
background-color: firebrick;
border-radius: 20px;
}
Código JavaScript:
1. Movimiento del dragón: Esto lo proporciona el evento onkeydown .
- Tecla de flecha arriba: Al presionarla, el dragón saltará hacia arriba (animación proporcionada por CSS).
- Tecla de flecha izquierda: Al presionarla, el dragón se moverá hacia la izquierda (animación proporcionada por CSS).
- Tecla de flecha derecha: Al presionarla, el dragón se moverá hacia la izquierda (animación proporcionada por CSS).
document.onkeydown = function(e) {
console.log(e.keyCode);
if (e.keyCode == 38) {
dragon = document.querySelector('.dragon');
dragon.classList.add('animatedragon');
setTimeout(() => {
dragon.classList.remove('animatedragon');
}, 700);
}
if (e.keyCode == 37) {
dragon = document.querySelector('.dragon');
dragonx = parseInt(window.getComputedStyle(dragon, null)
.getPropertyValue('left'));
dragon.style.left = dragonx - 112 + "px";
}
if (e.keyCode == 39) {
dragon = document.querySelector('.dragon');
dragonx = parseInt(window.getComputedStyle(
dragon, null).getPropertyValue('left'));
dragon.style.left = dragonx + 112 + "px";
}
}
2. Actualización de la puntuación: la puntuación se cumple solo cuando se cumple una determinada condición. Calcularemos los valores de la izquierda y la parte inferior tanto del obstáculo como del dragón y luego aumentaremos la puntuación en función de un valor adecuado que muestre que el dragón se ha salvado del obstáculo. Para esto, hemos tomado la variable «cruz» y le hemos asignado «verdadero». Cuando el dragón cruza el obstáculo de forma segura, establecemos el valor en «falso». Después de aproximadamente 1 s, cambiamos el valor de cruz a «verdadero». También hemos hecho que el obstáculo corra más rápido después de cada cruce y así aumentar el nivel de dificultad.
setInterval(() => {
dragon = document.querySelector('.dragon');
gameover = document.querySelector('.gameover');
obstacle = document.querySelector('.obstacle');
dx = parseInt(window.getComputedStyle(
dragon, null).getPropertyValue('left'));
dy = parseInt(window.getComputedStyle(
dragon, null).getPropertyValue('bottom'));
ox = parseInt(window.getComputedStyle(
obstacle, null).getPropertyValue('left'));
oy = parseInt(window.getComputedStyle(
obstacle, null).getPropertyValue('bottom'));
offsetx = Math.abs(dx - ox);
offsety = Math.abs(dy - oy);
console.log(offsetx, offsety);
if (offsetx < 120 && offsety <= 144) {
gameover.style.visibility = 'visible';
obstacle.classList.remove('animateobstacle');
} else if (offsetx < 125 && cross) {
score += 1;
updateScore(score);
cross = false;
setTimeout(() => {
cross = true;
}, 1000);
setInterval(() => {
obsanidur = parseFloat(window
.getComputedStyle(obstacle, null)
.getPropertyValue('animation-duration'));
obstacle.style.animationDuration
= obsanidur - 0.01 + 's';
}, 500);
}
}, 10);
function updateScore(score) {
scorecount.innerHTML = "Your score : " + score;
}
guión.js
javascript
<script>
cross = true;
score = 0;
document.onkeydown = function(e) {
console.log(e.keyCode);
if (e.keyCode == 38) {
dragon = document.querySelector('.dragon');
dragon.classList.add('animatedragon');
setTimeout(() => {
dragon.classList.remove('animatedragon');
}, 700);
}
if (e.keyCode == 37) {
dragon = document.querySelector('.dragon');
dragonx = parseInt(window.getComputedStyle(
dragon, null).getPropertyValue('left'));
dragon.style.left = dragonx - 112 + "px";
}
if (e.keyCode == 39) {
dragon = document.querySelector('.dragon');
dragonx = parseInt(window.getComputedStyle(
dragon, null).getPropertyValue('left'));
dragon.style.left = dragonx + 112 + "px";
}
}
setInterval(() => {
dragon = document.querySelector('.dragon');
gameover = document.querySelector('.gameover');
obstacle = document.querySelector('.obstacle');
dx = parseInt(window.getComputedStyle(
dragon, null).getPropertyValue('left'));
dy = parseInt(window.getComputedStyle(
dragon, null).getPropertyValue('bottom'));
ox = parseInt(window.getComputedStyle(
obstacle, null).getPropertyValue('left'));
oy = parseInt(window.getComputedStyle(
obstacle, null).getPropertyValue('bottom'));
offsetx = Math.abs(dx - ox);
offsety = Math.abs(dy - oy);
console.log(offsetx, offsety);
if (offsetx < 120 && offsety <= 144) {
if (score != 0)
scorecount.innerHTML = "Your score : " + score;
gameover.style.visibility = 'visible';
obstacle.classList.remove('animateobstacle');
} else if (offsetx < 125 && cross) {
score += 1;
updateScore(score);
cross = false;
setTimeout(() => {
cross = true;
}, 1000);
setInterval(() => {
obsanidur = parseFloat(window
.getComputedStyle(obstacle, null)
.getPropertyValue('animation-duration'));
obstacle.style.animationDuration
= obsanidur - 0.01 + 's';
}, 500);
}
}, 10);
function updateScore(score) {
scorecount.innerHTML = "Your score : " + score;
}
</script>
Referencia: Juego de dragones
Producción:
Publicación traducida automáticamente
Artículo escrito por shahbazalam75508 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA