jairogarcíarincón
Para generar el videojuego utilizaremos un el elemento canvas de HTML, al que podremos acceder desde JavaScript para poder dibujar en él los diferentes elementos necesarios para jugar: fondo, estrellas, nave, base y asteroides.
Modifica el contenido de tu fichero index.html para que entre las etiquetas de apertura y cierre del body (incluidas) muestre lo siguiente:
<body onload="canvasStars()">
<div>
<h1>Space Stars</h1>
<span id="mensaje" onclick="reiniciar()">Intenta llegar a la base sin chocarte con los asteroides y sin agotar los puntos.</span><br>
Puntuación: <span id="puntuacion">40</span><br>
Tiempo: <span id="tiempo">15</span>
</div>
<canvas id="miCanvas" width="600" height="600"></canvas>
</body>
Vamos a analizar brevemente cada una de las líneas:
- Hemos añadido a la etiqueta body el atributo onload="canvasStars()", esto hará que una vez que se haya cargado nuestra página, se ejecute la función canvasStars() de JavaScript, que es la que pondrá en marcha el juego.
- Hemos encerrado varios elementos dentro de un elemento div para poder aplicarle ciertos estilos más adelante.
- Hemos añadido una etiqueta span con dos atributos: id="mensaje" y onclick="reiniciar()". Con el primero podremos capturar ese elemento desde JavaScript y escribir en él los diferentes mensajes del videojuego. Con el segundo, llamaremos a una función que reiniciará la partida en cualquier momento (refrescando el navegador, simplemente).
- Hemos añadido una etiqueta span con el atributo: id="puntuacion". Con él podremos capturar ese elemento desde JavaScript e ir actualizando los pasos que le queden antes de que termine el juego.
- Hemos añadido una etiqueta span con el atributo: id="tiempo". Con él podremos capturar ese elemento desde JavaScript e ir actualizando los segundos que le queden antes de que termine el juego.
- Hemos añadido la etiqueta canvas con tres atributos: id="miCanvas" width="600" height="600". El primero nos permitirá capturarlo desde JavaScript para dibujar e interactuar con él y los otros dos nos definen el ancho y el alto del videojuego.
Para darle a los elementos un cierto estilo, modifica tu fichero style.css para que incluya los siguientes estilos:
div{
width: 590px;
background-color: black;
color: white;
margin-bottom: 2px;
padding: 5px;
text-align: center;
}
h1{
margin: 0;
}
#mensaje{
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
#puntuacion,
#tiempo{
font-size: 18px;
font-weight: bold;
font-family: "arial";
color: #0F0;
}
Si ahora refrescas la página (con la Consola de Desarrolladores abierta, lo cual te recomiendo hacer en todo momento para comprobar posibles errores), verás que se carga una parte del contenido y luego te muestra un error.
Esto es debido a que estamos llamando a lafunción canvasStars(), la cual todavía no está inicializada. En JavaScript y en cualquier lenguaje de programación, es necesario declarar las funciones antes de utilizarlas.
Para ello, vamos a declarar una serie de variables y funciones, en principio vacías en nuestro archivo script.js para poder ir completándolas más adelante a medida que añadamos las funcionalidades al juego:
//Declaración de variables
var canvas, ctx;
//Inicio el juego
function canvasStars(){
}
//Pinto el fondo con las estrellas
function pintarFondo(){
}
//Pinto la nave
function pintarNave(){
}
//Pinto la base
function pintarBase(){
}
//Pintar asteroides
function pintarAsteroides(){
}
//Muevo la nave
function moverNave(){
}
//Actualizo el contador y detecto si se ha quedado sin movimientos
function actualizarContador(){
}
//Detecto colisiones con la base o los asteroides
function detectarColision(){
}
//Finalizo el juego
function finalizar(mensaje){
}
//Reinicio el juego
function reiniciar(){
}
IMPORTANTE: Recuerda que JavaScript es un lenguaje case sensitive, o lo que es lo mismo, es sensible a mayúsculas, de modo que debes utilizar los nombres de las funciones y variables exactamente a como las hayas declarado, no es lo mismo canvasStars que canvasstars.
Si ahora refrescas la página, no deberían aparecer errores en la consola y solo habrá un bloque de información con fondo negro similar al siguiente:
Publicado el 03 de Diciembre de 2024
javascripthtml5space starscanvas