jairogarcíarincón

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:

---

Publicado el 21 de Noviembre de 2024

javascripthtml5space starscanvas