Manejo de coordenadas y movimiento en 2D

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