17. El Canvas (II) La pantalla de Juego

  17 del Curso de Programación de Videojuegos con JavaScript 🚀

📌 En esta clase:

  • Solucionamos el error de pintado en rojo (¡era una "s" minúscula!).

  • Creamos un protagonista controlable con el teclado usando imágenes (PNG con transparencia).

  • Aprendimos a cargar imágenes en el Canvas y a mover el personaje con eventos de teclado (códigos 37-40).

  • ¡Agregamos texto en pantalla! Mostramos las coordenadas del personaje en tiempo real.

🔧 Código clave:

javascript
// Cargar imagen (variable global)
let imgRex = new Image();
imgRex.src = 'img/rex.png';

// Dibujar imagen en Canvas
ctx.drawImage(imgRex, protagonista.x, protagonista.y);

// Movimiento con teclado
document.addEventListener('keydown', function(tecla) {
  if (tecla.keyCode === 38) protagonista.arriba(); // Arriba
  if (tecla.keyCode === 40) protagonista.abajo();  // Abajo
  // ... (izquierda/derecha similar)
});

🦖 Resultado: ¡Un dinosaurio moviéndose por la pantalla!

👉 Próxima sesión: ¡Mapas con arrays y el clásico juego de la serpiente!

📢 ¿Te gustaría el código completo? ¡Déjalo en los comentarios! 👇

#JavaScript #GameDev #Canvas #AprendeProgramación

Notas adicionales:

  • El formato es conciso para redes sociales, pero incluye lo esencial.

  • Emojis y hashtags aumentan engagement.

  • Si es para un blog, puedes expandir secciones con más código o imágenes.

  • Incluir un GIF del dinosaurio moviéndose sería ideal.

Comentarios

Publicar un comentario

Entradas más populares de este blog

codigo

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Protagonista y Disparos con Barra de Vida </ title > </ head > < body onload = " inicializa()" >     < canvas id = "canvas" width = "500" height = "300" style = " border:2px solid #000" ></ canvas > < script > let canvas, ctx; let FPS = 50 ; let vida = 100 ; // Imagen del protagonista let imgMega = new Image(); imgMega.src = 'img/mega.jpeg' ; // Inicialización function inicializa() {     canvas = document.getElementById( "canvas" );     ctx = canvas.getContext( "2d" );     setInterval(principal, 1000 / FPS); } // Clase Protagonista class Protagonista {     constructor (x, y) {         this .x = x;       ...
Leer más

MoverPersonaje

  Explicación del Código con Movimiento del Protagonista Este código implementa un personaje (protagonista) que se puede mover por el canvas usando las teclas de flecha del teclado. Vamos a analizarlo en detalle: Estructura General El código mantiene la misma estructura básica del anterior pero añade: Control de teclado para mover al personaje Límites para que no salga del canvas Un sistema de velocidad constante La Clave:  borraCanvas() javascript function borraCanvas ( ) { ctx . clearRect ( 0 , 0 , canvas . width , canvas . height ) ; } ¿Por qué es necesario? El canvas es como una pizarra: cuando dibujas algo, permanece allí hasta que lo borras Sin borrar, cada nuevo dibujo del personaje se superpondría sobre los anteriores, creando un efecto de "estela" clearRect()  borra un área rectangular (en este caso, todo el canvas) antes de cada nuevo cuadro de animación Parámetros:  (xInicial, yInicial, ancho, alto) Movimiento del Protagonista La clase Protagoni...
Leer más