Ulises Ariel Cruz Aguilar
PreguntaBuenas noches comunidad, tengo una pregunta: en mi codigo logre que una nueva imagen que es un lobo se moviera pero no logro que los animales se queden quietos ya que estos al mover al lobo se ejecuta su funcion tambien intente separarlos pero el canvas a veces ponia por detras al lobo.
HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>Villa Platzi</title>
</head>
<body>
<canvas width=“500” height=“500” id=“villaplatzi”></canvas>
<script src=“platzi.js”></script>
</body>
</html>
JS.
var vp = document.getElementById(“villaplatzi”);
var papel = vp.getContext(“2d”);
var cantidadV = aleatorio(1, 2);
var cantidadC = aleatorio(1, 2);
var cantidadP = aleatorio (1, 2);
var xLobo = 0;
var yLobo = 0;
document.addEventListener(“keydown”, moverLobo);
var fondo =
{
url:“tile.png”,
cargaOK: false
}
var vaca =
{
url:“vaca.png”,
cargaOK: false
}
var pollo =
{
url:“pollo.png”,
cargaOK: false
}
var cerdo =
{
url:“cerdo.png”,
cargaOK: false
}
var lobo =
{
url:“lobo.png”,
cargaOK: false
}
fondo.imagen = new Image();
fondo.imagen.src = fondo.url;
fondo.imagen.addEventListener(“load”, cargarFondo);
vaca.imagen = new Image();
vaca.imagen.src = vaca.url;
vaca.imagen.addEventListener(“load”, cargarVacas);
cerdo.imagen = new Image();
cerdo.imagen.src = cerdo.url;
cerdo.imagen.addEventListener(“load”, cargarCerdos);
pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
pollo.imagen.addEventListener(“load”, cargarPollos);
lobo.imagen = new Image();
lobo.imagen.src = lobo.url;
lobo.imagen.addEventListener(“load”, cargarLobo);
function cargarFondo()
{
fondo.cargaOK = true;
dibujar();
}
function cargarVacas()
{
vaca.cargaOK = true;
dibujar();
}
function cargarCerdos()
{
cerdo.cargaOK = true;
dibujar();
}
function cargarPollos()
{
pollo.cargaOK = true;
dibujar();
}
function cargarLobo()
{
lobo.cargaOK = true;
dibujar();
}
function dibujar()
{
if(fondo.cargaOK == true)
{
papel.drawImage(fondo.imagen, 0, 0);
}
if(vaca.cargaOK == true)
{
for(i=0; i<cantidadV; i++)
{
var x = aleatorio(0, 3);
var y = aleatorio(0,3);
var x = x * 80
var y = y * 80
papel.drawImage(vaca.imagen, x, y);
}
}
if(cerdo.cargaOK == true)
{
for(i=0; i<cantidadC; i++)
{
var x = aleatorio(0, 2);
var y = aleatorio(0,2);
var x = x * 80
var y = y * 80
papel.drawImage(cerdo.imagen, x, y);
}
}
if(pollo.cargaOK == true)
{
for(i=0; i<cantidadP; i++)
{
var x = aleatorio(0, 3);
var y = aleatorio(0,3);
var x = x * 80
var y = y * 80
papel.drawImage(pollo.imagen, x, y);
}
}
if(lobo.cargaOK == true)
{
papel.drawImage(lobo.imagen, xLobo, yLobo)
}
}
//Termina de cargar las imagenes
function aleatorio(min, max)
{
var resultado;
resultado = Math.floor(Math.random() * (max - min + 1)) + min;
return resultado;
}
//Termina de hacer random su posicion
function moverLobo(evento)
{
var movimiento = 20;
var teclas =
{
UP: 38,
DOWN: 40,
LEFT: 37,
RIGHT: 39
};
switch (evento.keyCode)
{
case teclas.UP:
if (yLobo > 0)
{
yLobo = yLobo - movimiento;
dibujar();
}
break;
case teclas.DOWN:
if (yLobo < 450)
{
yLobo = yLobo + movimiento;
dibujar();
}
break;
case teclas.LEFT:
if (xLobo > 0)
{
xLobo = xLobo - movimiento;
dibujar();
}
break;
case teclas.RIGHT:
if(xLobo < 450)
{
xLobo = xLobo + movimiento;
dibujar();
}
break;
default:
console.log("Otra tecla : " + evento.key);
break;
}
}
Muchas Gracias.
Sneyder Barreto
¡Hola! Podrías revisar la solución propuesta por otro compañero aquí. Él propuso guardar las coordenadas de los animales en un array para que cuando se llame la función
dibujar()
