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

5. 04.funciones parte1

  Post: Funciones en JavaScript - Parte 1 https://image.png Duraci贸n:  8:17 / 8:34 Introducci贸n a las funciones en JavaScript Hola, ¿qu茅 tal? Vamos a ver ahora el tema de las funciones en JavaScript, un concepto fundamental para desarrollar nuestros videojuegos. Variables iniciales javascript var vida = 100 ; var ataque = 10 ; var pocion = 20 ; Creando nuestra primera funci贸n La sintaxis b谩sica de una funci贸n comienza con la palabra reservada  function , seguida del nombre de la funci贸n: javascript function muestraVida ( ) { console . log ( vida ) ; } Esta funci贸n tiene la tarea de mostrar nuestra vida actual en la consola. Para llamarla, simplemente usamos su nombre: javascript muestraVida ( ) ; Integrando funciones con HTML Podemos conectar esta funci贸n a un bot贸n en HTML: html < button onClick = " muestraVida ( ) " > Mostrar Vida </ button > Cada vez que hagamos clic en este bot贸n, se ejecutar谩 la funci贸n y veremos nuestro nivel de vida (10...
Leer m谩s