Home | Clases | Videojuego sencillo con HTML5 | Los elementos HTML, CSS y JS

Los elementos HTML, CSS y JS


Creación de los elementos HTML

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.


Aplicación de estilos CSS

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;
}


Declaración de funciones JS

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:


Fecha de publicación: 12/01/2018
Asignaturas: realización de proyectos multimedia interactivosaplicaciones webmontaje y mantenimiento de equipos
Temas: javascript html5 space stars canvas
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos