17. 8.canvas 3

 

Ejercicio Canvas 3: Moviendo a Megaman con JavaScript 🚀

En este ejercicio hemos creado un juego simple usando el elemento <canvas> de HTML5 y JavaScript, donde controlamos a Megaman con las teclas del teclado mientras otros personajes se mueven automáticamente.

📝 Código Principal

javascript

var canvas;
var ctx;
var FPS = 50;

var imgMega;

function inicializa() {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    // Cargamos la imagen de Megaman
    imgMega = new Image();
    imgMega.src = 'img/mega.jpg';
    imgMega.width = 100;
    imgMega.height = 100;

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

// Clase para el protagonista (Megaman)
var protagonista = function(x, y) {
    this.x = x;
    this.y = y;
    this.velocidad = 3;

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

    this.arriba = function() {
        this.y -= this.velocidad;
    }

    this.abajo = function() {
        this.y += this.velocidad;
    }

    this.izquierda = function() {
        this.x -= this.velocidad;
    }

    this.derecha = function() {
        this.x += this.velocidad;
    }
}

// Clase para los personajes automáticos
var personaje = function(x, y) {
    this.x = x;
    this.y = y;
    this.derecha = true;

    this.dibuja = function() {
        ctx.fillStyle = '#fff000';
        ctx.fillRect(this.x, this.y, 50, 50);
    }

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

// Instancias de personajes
var per1 = new personaje(10, 50);
var per2 = new personaje(10, 120);
var per3 = new personaje(10, 230);

// Instancia del protagonista
var prota = new protagonista(200, 200);

// Eventos del teclado
document.addEventListener('keydown', function(tecla) {
    console.log(tecla.keyCode);
    if (tecla.keyCode == 38) prota.arriba(); // Arriba
    if (tecla.keyCode == 40) prota.abajo();  // Abajo
    if (tecla.keyCode == 37) prota.izquierda(); // Izquierda
    if (tecla.keyCode == 39) prota.derecha();  // Derecha
});

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

function principal() {
    borraCanvas();
    per1.dibuja();
    per2.dibuja();
    per3.dibuja();

    per1.mueve(1);
    per2.mueve(3);
    per3.mueve(40);

    prota.dibuja();
}

🔑 Conceptos Clave

1. Canvas y Contexto: Usamos el elemento <canvas> y su contexto 2D para dibujar.

2. Carga de imágenes: Cargamos la imagen de Megaman usando new Image().

3. Clases/Objetos: Creamos dos tipos de objetos (protagonista y personajes).

4. Eventos de teclado: Usamos addEventListener para detectar las teclas presionadas.

5. Animación: Usamos setInterval para crear el bucle de animación.

🕹️ Cómo jugar

• Usa las flechas del teclado para mover a Megaman por el canvas.

• Observa cómo los otros personajes se mueven automáticamente con diferentes velocidades.

💡 Mejoras posibles

• Añadir colisiones entre los personajes

• Incluir sprites animados

• Agregar límites al canvas para que Megaman no salga

¿Qué otras funcionalidades añadirías tú? ¡Déjalo en los comentarios!