Canvas 1

 Canvas 1

Hola.

¿Qué tal?

Vamos a continuar con el desarrollo de nuestro videojuego.

Vamos a ver un ejemplo ahora con lo que es el canvas.

Vamos a irnos a nuestro archivo index.html. Tenemos aquí el canvas:

html
<canvas id="canvas" width="500" height="300" style="border: 1px solid black;"></canvas>

Le hemos puesto un ID de nombre canvas, un ancho de 500, una altura de 300 y un estilo con un borde negro (el que se ve en pantalla).

Luego, en la etiqueta <body>, llamamos a una función de JavaScript llamada inicializa() ni bien se cargue la página:

html
<body onload="inicializa()">

Programación en JavaScript

Vamos a crear un archivo llamado juego_seis.js:

javascript
// Variables iniciales
var barCanvas;
var sCTX;
var framesPorSegundo = 50;

// Constructor del personaje
var Personaje = function(x, y) {
    this.x = x;
    this.y = y;

    // Método para dibujar el personaje
    this.dibuja = function() {
        sCTX.fillStyle = "#FFFF00"; // Color amarillo (hexadecimal)
        sCTX.fillRect(this.x, this.y, 50, 50); // Dibuja un rectángulo
    };
};

// Instancias de personajes
var personajeUno = new Personaje(10, 100);
var personajeDos = new Personaje(200, 100);
var personajeTres = new Personaje(300, 350);

// Función de inicialización
function inicializa() {
    barCanvas = document.getElementById("canvas");
    sCTX = barCanvas.getContext("2d");

    // Actualiza constantemente el canvas
    setInterval(function() {
        principal();
    }, 1000 / framesPorSegundo);
}

// Función principal del juego
function principal() {
    borraCanvas(); // Limpia el canvas
    // Dibuja los personajes
    personajeUno.dibuja();
    personajeDos.dibuja();
    personajeTres.dibuja();
}

// Función para limpiar el canvas
function borraCanvas() {
    sCTX.clearRect(0, 0, barCanvas.width, barCanvas.height);
}

Explicación:

  1. Canvas: Área de dibujo en HTML con dimensiones y borde definidos.

  2. Personaje: Objeto con coordenadas (x, y) y un método para dibujarse (dibuja()).

  3. Inicialización: Configura el canvas y llama a principal() cada 20ms (50 FPS).

  4. Bucle del juego:

    • borraCanvas(): Elimina rastros anteriores.

    • dibuja(): Renderiza los personajes (rectángulos amarillos).

Próximos pasos

En el siguiente video, terminaremos de ajustar el movimiento y la interacción.

¡Nos vemos en la próxima parte!

Comentarios

Publicar un comentario