3-1-Personajes
El código está diseñado para dibujar personajes en un lienzo (canvas), pero actualmente no tienen movimiento porque no se está actualizando la posición de los personajes en cada frame.
Solución: Hacer que los personajes se muevan
Para que los personajes se muevan, debes modificar sus coordenadas (x o y) dentro de la función principal() en cada iteración del bucle que setInterval ejecuta. Esto se logra simplemente alterando las propiedades this.x o this.y de los objetos creados con la función personaje.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="inicializa()">
<canvas id="canvas" width="500" height="300" style="border:2px solid #000000">
</canvas>
<script >
var canvas;
var ctx;
var FPS = 50;
console.log("FPS",FPS);
console.log("hola");
var personaje = function (x, y) {
this.x = x;
this.y = y;
this.dibuja = function () {
ctx.fillStyle = "#fff000";
ctx.fillRect(this.x, this.y, 50, 50);
};
};
function inicializa() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
setInterval(function () {
principal();
}, 1000) / FPS;
}
var per1 = new personaje(10, 50);
var per2 = new personaje(10, 120);
var per3 = new personaje(10, 230);
function borraCanvas() {
canvas.width = 500;
canvas.height = 400;
}
function principal() {
borraCanvas();
per1.dibuja();
per2.dibuja();
per3.dibuja();
console.log("funcion");
}
</script>
</body>
</html>
Comentarios
Publicar un comentario