16. El Canvas (I) La pantalla de Juego

  16: Introducción al Canvas en JavaScript

¡Muy buenas y bienvenidos a la sesión #16 del curso de programación de videojuegos con JavaScript!

🎨 ¡Por fin llegamos al Canvas! La parte donde empezaremos a dar vida gráfica a nuestro juego. Vamos a integrar todo lo aprendido: objetos, lectura del teclado y el bucle principal del juego.

Primeros pasos con el Canvas

1️⃣ Creación del Canvas:
Recordamos cómo definirlo en HTML con un identificador, ancho (500px), alto (400px) y un borde para visualizarlo mejor:

html

<canvas id="miCanvas" width="500" height="400" style="border: 2px solid #000000;"></canvas>

El Canvas es como un lienzo (¡literalmente!) donde dibujaremos nuestros elementos.

2️⃣ Configuración inicial en JavaScript:
Para evitar errores, usamos el evento onload para asegurar que el Canvas esté cargado antes de ejecutar el código:

javascript

let canvas, ctx;
function inicializar() {
    canvas = document.getElementById('miCanvas');
    ctx = canvas.getContext('2d');
}
window.onload = inicializar;

Objetos y movimiento

Creamos una plantilla para un Personaje con coordenadas (x, y) y métodos para dibujarlo y moverlo:

javascript

function Personaje(x, y, velocidad) {
    this.x = x;
    this.y = y;
    this.velocidad = velocidad;
    this.derecha = true;

    this.dibujar = function() {
        ctx.fillStyle = "#FF0000"; // Color rojo
        ctx.fillRect(this.x, this.y, 50, 50); // Rectángulo de 50x50px
    };

    this.mover = function() {
        if (this.derecha && this.x < 400) this.x += this.velocidad;
        else if (!this.derecha && this.x > 50) this.x -= this.velocidad;
        else this.derecha = !this.derecha; // Cambia de dirección
    };
}

Bucle principal del juego

Usamos setInterval para actualizar la pantalla 50 veces por segundo:

javascript

let FPS = 50;
function buclePrincipal() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Borra el Canvas
    personaje1.mover();
    personaje1.dibujar();
    // Repetir para más personajes...
}
setInterval(buclePrincipal, 1000 / FPS);

Resultado

¡Tres personajes moviéndose a diferentes velocidades! 🎮

• Personaje 1: Velocidad 1 (lento).

• Personaje 2: Velocidad 3 (medio).

• Personaje 3: Velocidad 7 (rápido).

🔜 En la próxima sesión: Ampliaremos este código para añadir interacción y más elementos gráficos.

---

¿Te gustó? ¡Comenta qué más te gustaría ver con Canvas!