Home | Clases | Videojuego sencillo con HTML5 | Los elementos del juego

Los elementos del juego


Creación del fondo

Para poder crear el fondo, lo primero que debemos hacer es recuperar nuestro elemento canvas (al que habíamos asignado el id miCanvas) e indicarle a JavaScript que queremos dibujar sobre él en un contexto 2D que llamaremos ctx. Además, vamos a aprovechar para llamar ya a las funciones que pintarán cada uno de los elementos.

Para ello, modifica la función canvasStars() de script.js para que incluya lo siguiente:


//Inicio el juego
function canvasStars(){

//Obtengo el elemento canvas
canvas = document.getElementById("miCanvas");

//Especifico el contexto 2D
ctx = canvas.getContext("2d");

//Llamo a la función que pinta el fondo con las estrellas
pintarFondo();

//Llamo a la función que pinta la nave
pintarNave();

//Llamo a la función que pinta la base
pintarBase();

//Llamo a la función que pinta los asteroides
pintarAsteroides();

}


Una vez hecho esto, ya puedo modificar la función pintarFondo() y añadir el código necesario. En concreto:


//Pinto el fondo con las estrellas
function pintarFondo(){

//Pinto el fondo negro
ctx.fillStyle = "black";
ctx.beginPath();
ctx.rect(0, 0, 600, 600); //posición x, posición y, ancho, alto (en píxeles)
ctx.closePath();
ctx.fill();

//Pinto 100 estrellas
for (i=0; i<100; i++){

//Posiciones x e y aleatorias
var x = Math.random() * 600;
var y = Math.random() * 600;

//Pinto un círculo blanco en esa posición
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(x, y, 3, 0, Math.PI * 2); //posición x, posición y, radio (en píxeles), inicio del arco (en grados), fin del arco (en grados)
ctx.closePath();
ctx.fill();

}

}


  • Pintamos un rectángulo de color negro que ocupe todo nuestro canvas
  • Pintamos 100 estrellas (círculos blancos) mediante un bucle for, en posiciones aleatorias dentro de nuestro ancho y alto de juego (600x600).


Como ves, hemos utilizado diferentes métodos de ctx como fillrect, arc, beginPath, etc. Puedes encontrar más información sobre su uso haciendo clic AQUÍ. Además, hemos hecho uso de la función Math.random() de JavaScript para generar las posiciones aleatorias de nuestras estrellas.

El resultado obtenido debería ser similar a este:

Creación de la nave y base

De la misma manera, podemos crear una nave y una base sencillas, modificando las funciones pintarNave() y pintarBase() para que pinten dos cuadrados de colores verde y azul en las esquinas superior izquierda e inferior derecha, respectivamente.


//Pinto la nave
function pintarNave(){

ctx.fillStyle = "green";
ctx.beginPath();
ctx.rect(0, 0, 30, 30); //esquina superior izquierda, tamaño 30x30
ctx.closePath();
ctx.fill();

}

//Pinto la base
function pintarBase(){

ctx.fillStyle = "blue";
ctx.beginPath();
ctx.rect(570, 570, 30, 30); //esquina inferior derecha, tamaño 30x30
ctx.closePath();
ctx.fill();

}


El resultado obtenido ahora debería ser similar a este:


Creación de los asteroides

Para completar los elementos del juego, vamos a pintar 30 asteroides rojos en posiciones aleatorias que la nave tendrá que evitar para llegar a la base. Para ello, añadiremos el código correspondiente en la función pintarAsteroides(), teniendo en cuenta además que ningún asteroide debe caer en la misma ubicación que la nave o la base, ya que no podríamos iniciar o completar el juego.


//Pintar asteroides
function pintarAsteroides(){

for (i=0; i<30; i++){

var x = Math.random() * 570;
var y = Math.random() * 570;

//Compruebo que no hay asteroides en la nave
if (x < 30 && y < 30){
x = x + 30;
y = y + 30;
}

//Compruebo que no hay asteroides en la base
if (x > 540 && y > 540){
x = x - 30;
y = y - 30;
}

//Pinto el asteroide
ctx.fillStyle = "red";
ctx.beginPath();
ctx.rect(x, y, 20, 20);
ctx.closePath();
ctx.fill();

}
}


Una vez completados todos los elementos, el resultado debería ser similar al siguiente, y las posiciones de las estrellas y los asteroides variarán cada vez que refresquemos la pantalla:


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