Personaje
Personaje - Explicación de Código HTML/JavaScript
Explicación del Código
Este código crea una animación simple de un rectángulo amarillo (nuestro "personaje") que se mueve horizontalmente por un canvas, cambiando de dirección cuando llega a los bordes.
Estructura básica HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rectángulo Amarillo Móvil</title>
</head>
<body onload="inicializa()">
<canvas id="canvas" width="500" height="300" style="border:2px solid #000"></canvas>Define un documento HTML5 básico
Crea un elemento canvas de 500x300 píxeles con borde negro
Llama a la función
inicializa()cuando la página termina de cargar
Clase Personaje
class Personaje {
constructor(x, y) {
this.x = x;
this.y = y;
this.direccion = 1; // 1 para derecha, -1 para izquierda
}
dibuja() {
ctx.fillStyle = "#fff000"; // Amarillo
ctx.fillRect(this.x, this.y, 50, 50); // Rectángulo de 50x50
}
mueve() {
this.x += 2 * this.direccion;
// Cambiar dirección al alcanzar el borde
if (this.x <= 0 || this.x >= canvas.width - 50) {
this.direccion *= -1;
}
}
}constructor(x, y): Inicializa la posición (x,y) del personaje y su dirección (1=derecha, -1=izquierda)
dibuja(): Dibuja un rectángulo amarillo de 50x50 píxeles en la posición actual
mueve():
Mueve el personaje 2 píxeles en la dirección actual
Cambia de dirección cuando llega al borde izquierdo (x ≤ 0) o derecho (x ≥ ancho del canvas - ancho del personaje)
Función de Inicialización
function inicializa() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
let personaje = new Personaje(50, 50); // Solo un personaje
function principal() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpiar canvas
personaje.dibuja();
personaje.mueve();
}
setInterval(principal, 1000 / FPS);
}Obtiene el elemento canvas y su contexto 2D
Crea una instancia de Personaje en la posición (50,50)
Define la función
principal()que:Limpia el canvas
Dibuja el personaje
Mueve el personaje
Ejecuta
principal()50 veces por segundo (FPS = 50)
Código Completo para Copiar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rectángulo Amarillo Móvil</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;
// Clase Personaje (rectángulo amarillo)
class Personaje {
constructor(x, y) {
this.x = x;
this.y = y;
this.direccion = 1; // 1 para derecha, -1 para izquierda
}
dibuja() {
ctx.fillStyle = "#fff000"; // Amarillo
ctx.fillRect(this.x, this.y, 50, 50); // Rectángulo de 50x50
}
mueve() {
this.x += 2 * this.direccion;
// Cambiar dirección al alcanzar el borde
if (this.x <= 0 || this.x >= canvas.width - 50) {
this.direccion *= -1;
}
}
}
// Inicialización
function inicializa() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
let personaje = new Personaje(50, 50); // Solo un personaje
function principal() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpiar canvas
personaje.dibuja();
personaje.mueve();
}
setInterval(principal, 1000 / FPS);
}
</script>
</body>
</html>Este código es un excelente punto de partida para entender:
Uso del elemento canvas en HTML5
Programación orientada a objetos en JavaScript
Animaciones básicas con setInterval
Manejo de coordenadas y movimiento en 2D
Puedes modificarlo para añadir más personajes, cambiar velocidades, o implementar interacción con el usuario.
Comentarios
Publicar un comentario