Teclas

 

Teclas - Explicación de un Juego Simple con JavaScript"

En este post, vamos a desglosar un pequeño código JavaScript que simula un juego simple con personajes que se mueven en un canvas.

🔍 Partes del Código

1. Inicialización del Canvas

javascript

var canvas;
var ctx;
var FPS = 50; // Fotogramas por segundo

• canvas: Referencia al elemento HTML <canvas>.

• ctx: Contexto de dibujo 2D.

• FPS: Controla la velocidad de actualización del juego.

---

2. Carga de Imágenes

javascript

var imgMega;
function inicializa() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    imgMega = new Image();
    imgMega.src = 'img/mega.jpeg'; // Carga una imagen
    imgMega.width = 100;
    imgMega.height = 100;

    setInterval(function () {
        principal();
    }, 1000 / FPS); // Bucle principal del juego
}

• Se carga una imagen (mega.jpeg) que representará al protagonista.

• setInterval() ejecuta la función principal() 50 veces por segundo (FPS).

---

3. Clases de Personajes

Protagonista (imagen)

javascript

var protagonista = function (x, y) {
    this.x = x;
    this.y = y;
    this.velocidad = 3;

    this.dibuja = function () {
        ctx.drawImage(imgMega, this.x, this.y); // Dibuja la imagen
    };
};

• Tiene posición (x, y) y velocidad.

• dibuja() usa drawImage para renderizar la imagen en el canvas.

Personaje (cuadrados móviles)

javascript

var personaje = function (x, y) {
    this.x = x;
    this.y = y;
    this.derecha = true; // Dirección inicial

    this.dibuja = function () {
        ctx.fillStyle = "#fff000"; // Color amarillo
        ctx.fillRect(this.x, this.y, 50, 50); // Dibuja un cuadrado
    };

    this.mueve = function (velocidad) {
        if (this.derecha) {
            if (this.x < 400) this.x += velocidad;
            else this.derecha = false;
        } else {
            if (this.x > 50) this.x -= velocidad;
            else this.derecha = true;
        }
    };
};

• mueve() hace que el personaje se desplace horizontalmente, rebotando entre x=50 y x=400.

---

4. Creación de Personajes

javascript

var per1 = new personaje(10, 50);
var per2 = new personaje(10, 120);
var per3 = new personaje(10, 230);
var prota = new protagonista(200, 200);

• Tres personajes amarillos (per1, per2, per3) con diferentes posiciones iniciales.

• Un protagonista (prota) que usa la imagen cargada.

---

5. Bucle Principal del Juego

javascript

function borraCanvas() {
    canvas.width = 500;
    canvas.height = 400;
}

function principal() {
    borraCanvas(); // Limpia el canvas en cada frame
    per1.dibuja();
    per2.dibuja();
    per3.dibuja();

    per1.mueve(1);   // Mueve a diferente velocidad
    per2.mueve(3);
    per3.mueve(70);

    prota.dibuja(); // Dibuja al protagonista
}

• borraCanvas() limpia el canvas en cada iteración.

• Los personajes se mueven a distintas velocidades.

---

🎯 ¿Qué hace el código?

• Dibuja tres cuadrados amarillos que se mueven horizontalmente.

• Dibuja un personaje principal (usando una imagen) estático en el centro.

• El bucle de juego se ejecuta a 50 FPS.

🚀 Posible mejora: Añadir controles de teclado para mover al protagonista.

¿Te gustaría que profundice en alguna parte?