Estoy tratando de mover lobo con las flechas del teclado, pero no consigo mas que me recargue la posición de todos los animales, menos del lobo, y lo que quiero es mover el lobo con la flecha que apunta hacia arriba. Ya pondré el resto de teclas cuando consiga hacer que se mueva. Se que estoy llamando a la función que coloca a todos de nuevo, pero es así como lo vi en el ejemplo del que me guíe. No se como crear esa función solo cambiando la función moveWolf Si me dan alguna idea para orientarme, llevo toda la tarde sin ningún éxito. Gracias.
let finca = document.getElementById('terreno')
parcela = finca.getContext('2d')
document.addEventListener('keydown', moveWolf)//con esto movemos el lobo.
let xWolf = 150
let yWolf = 100
let keys = {//Estas son las variables donde guardamos los keyCode de las teclas que usaremos.
UP: 38,
RIGHT: 39,
DOWN: 40,
LEFT: 37
}
paseando ()
function paseando (){
}
function moveWolf(e) {
let movement = 60
switch (e.keyCode) {
case keys.UP:
toDraw (xWolf, yWolf)
//drawLine(colorcito, x, y, x, y - movement, paper)//debemos de pasar el area de trabajo a la
// funcion "drawLine" para que sepa donde dibujar
yWolf = yWolf - movement//Aqui como que marcamos donde queda la linea,
//recordamos la nueva posicion de "y" al recortarla.
break
}
}
let fondo = {
url: 'http://i66.tinypic.com/35hpz0k.png',
cargaOK: false
}
let cow = {
url: 'http://i63.tinypic.com/i5og0i.png',
cargaOK: false
}
let pork = {
url: 'http://i68.tinypic.com/1emc90.png',
cargaOK: false
}
let chicken = {
url: 'http://i63.tinypic.com/2woj0g7.png',
cargaOK: false
}
let wolf = {
url: 'http://i67.tinypic.com/2w4ivwj.png',
cargaOK: false
}
//let cantidad = myRandom(5, 25)//creo una variable para crear un numero de vacas aleatorio cada vez
//poniendo en el ciclo que genera las vacas (i = 0;i<cantidad;i++)
fondo.imagen = new Image()//creamos un objeto html llamado imagen
fondo.imagen.src = fondo.url //cargamos la imagen en el nuevo objeto
fondo.imagen.addEventListener('load', loadFondo)//evento que carga la fondo
wolf.imagen = new Image()
wolf.imagen.src = wolf.url
wolf.imagen.addEventListener('load', loadWolf)//evento que carga el lobo
cow.imagen = new Image()
cow.imagen.src = cow.url
cow.imagen.addEventListener('load', loadCow)//evento que carga la vaca
pork.imagen = new Image()
pork.imagen.src = pork.url
pork.imagen.addEventListener('load', loadPork)//evento que carga la vaca
chicken.imagen = new Image()
chicken.imagen.src = chicken.url
chicken.imagen.addEventListener('load', loadChicken)//evento que carga el pollo
function loadWolf() {
wolf.cargaOK = true
toDraw()
}
function loadFondo() {
fondo.cargaOK = true
toDraw()
}
function loadCow() {
cow.cargaOK = true
toDraw()
}
function loadPork() {
pork.cargaOK = true
toDraw()
}
function loadChicken() {
chicken.cargaOK = true
toDraw()
}
function toDraw() {//creamos la funcion para dibujar la imagen en el canvas
let cantidad = myRandom(5, 10)
if (fondo.cargaOK == true) {
parcela.drawImage(fondo.imagen, 0, 0)
}
if (cow.cargaOK == true) {
// console.log(cantidad) //para saber el numero de vacas generado
for (let i = 0; i < cantidad; i++) {//creo un ciclo para cargar las vacas que queramos
let x = myRandom(0, 7)//creamos posicion de una vaca dentro del cmapa
let y = myRandom(0, 7)
x = x * 60
y = y * 60
parcela.drawImage(cow.imagen, x, y)//aqui le ponemos los valores de "x" y "y"
}
}
if (pork.cargaOK == true) {
//console.log(cantidad)
for (let i = 0; i < cantidad; i++) {//creo un ciclo para cargar las vacas que queramos
let x = myRandom(0, 420)//creamos posicion de una vaca dentro del cmapa
let y = myRandom(0, 420)
parcela.drawImage(pork.imagen, x, y)
}
}
if (chicken.cargaOK == true) {
for (let i = 0; i < cantidad; i++) {//creo un ciclo para cargar las vacas que queramos
let x = myRandom(0, 6)//creamos posicion de una vaca dentro del cmapa
let y = myRandom(0, 6)
x = x * 70
y = y * 70
parcela.drawImage(chicken.imagen, x, y)
}
}
if (wolf.cargaOK == true) {
let x = (100, 300)//creamos posicion de una vaca dentro del cmapa
let y = (100, 300)
parcela.drawImage(wolf.imagen, x, y)
}
}
function myRandom(min, maxi) {
let result = Math.floor(Math.random() * (maxi - min)) + min
return result
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Carga de imagenes en canvas</title>
</head>
<body>
<canvas height="500" width="500" id="terreno"></canvas>
</body>
</html>