Problem repositioning img on canvas with keyListener

Navigation
4

I'm trying to move wolf with the arrows on the keyboard, but I can not get more recharge the position of all animals, except the wolf, and what I want is to move the wolf with the arrow pointing up. I'll put the rest of the keys when I get them to move. I know I'm calling the function that places everyone again, but that's how I saw it in the example of the one that guides me. I do not know how to create that function just by changing the moveWolf function If you give me some idea to guide me, I've been without any success all afternoon. Thanks. 

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>
    
asked by gemita 09.05.2018 в 20:09
source

2 answers

1

I EDIT THE ANSWER With this change it works. Canvas draws things on top of each other, so to move the wolf, you have to redraw everything again in each movement. More or less how videogames work, in every movement or action that takes place, you have to create everything again. So you had to create the function that would re-draw everything again. I hope it is what you were looking for. 

let finca = document.getElementById('parcela')
let lienzo = finca.getContext('2d')

document.addEventListener("keydown", moverLobo)

let xLobo = 100
let yLobo = 150

let posicionCerdoX = new Array()
let posicionCerdoY = new Array()

let posicionVacaX = new Array()
let posicionVacaY = new Array()

let posicionPolloX = new Array()
let posicionPolloY = new Array()

function moverLobo(e) {
    let movement = 20
    let keys = {
        UP: 38,
        RIGHT: 39,
        DOWN: 40,
        LEFT: 37
    }

    switch (e.keyCode) {
        case keys.UP:
            yLobo -= movement
            lienzo.drawImage(imagenMapa, 0, 0)
            lienzo.drawImage(imagenLobo, xLobo, yLobo)
            for (let i = 0; i < posicionCerdoX.length; i++) {
                lienzo.drawImage(imagenCerdo, posicionCerdoX[i], posicionCerdoY[i]);
            }

            for (let i = 0; i < posicionVacaX.length; i++) {
                lienzo.drawImage(imagenVaca, posicionVacaX[i], posicionVacaY[i]);
            }

            for (let i = 0; i < posicionPolloX.length; i++) {
                lienzo.drawImage(imagenPollo, posicionPolloX[i], posicionPolloY[i]);
            }
            break

        case keys.RIGHT:
            xLobo += movement
            lienzo.drawImage(imagenMapa, 0, 0)
            lienzo.drawImage(imagenLobo, xLobo, yLobo)
            for (let i = 0; i < posicionCerdoX.length; i++) {
                lienzo.drawImage(imagenCerdo, posicionCerdoX[i], posicionCerdoY[i]);
            }

            for (let i = 0; i < posicionVacaX.length; i++) {
                lienzo.drawImage(imagenVaca, posicionVacaX[i], posicionVacaY[i]);
            }

            for (let i = 0; i < posicionPolloX.length; i++) {
                lienzo.drawImage(imagenPollo, posicionPolloX[i], posicionPolloY[i]);
            }
            break

        case keys.DOWN:
            yLobo += movement
            lienzo.drawImage(imagenMapa, 0, 0)
            lienzo.drawImage(imagenLobo, xLobo, yLobo)
            for (let i = 0; i < posicionCerdoX.length; i++) {
                lienzo.drawImage(imagenCerdo, posicionCerdoX[i], posicionCerdoY[i]);
            }

            for (let i = 0; i < posicionVacaX.length; i++) {
                lienzo.drawImage(imagenVaca, posicionVacaX[i], posicionVacaY[i]);
            }

            for (let i = 0; i < posicionPolloX.length; i++) {
                lienzo.drawImage(imagenPollo, posicionPolloX[i], posicionPolloY[i]);
            }
            break

        case keys.LEFT:
            xLobo -= movement
            lienzo.drawImage(imagenMapa, 0, 0)
            lienzo.drawImage(imagenLobo, xLobo, yLobo)
            for (let i = 0; i < posicionCerdoX.length; i++) {
                lienzo.drawImage(imagenCerdo, posicionCerdoX[i], posicionCerdoY[i]);
            }

            for (let i = 0; i < posicionVacaX.length; i++) {
                lienzo.drawImage(imagenVaca, posicionVacaX[i], posicionVacaY[i]);
            }

            for (let i = 0; i < posicionPolloX.length; i++) {
                lienzo.drawImage(imagenPollo, posicionPolloX[i], posicionPolloY[i]);
            }
            break
        default:
            alert('¡¡ Para mover al lobo\n solo puede usar las flechas: "> < ^ v " ...!!!' )
    }
}


let mapa = {
    url: "tile.png",
    carga: false
}

let vaca = {
    url: " vaca.png",
    carga: false
}

let cerdo = {
    url: "cerdo.png",
    carga: false
}
let pollo = {
    url: "pollo.png",
    carga: false
}

let lobo = {
    url: "lobo.png",
    carga: false
}


imagenMapa = new Image()
imagenMapa.src = mapa.url
imagenMapa.addEventListener("load", cargaMapa)

imagenVaca = new Image()
imagenVaca.src = vaca.url
imagenVaca.addEventListener("load", cargaVaca)

imagenCerdo = new Image()
imagenCerdo.src = cerdo.url
imagenCerdo.addEventListener("load", cargaCerdo)

imagenPollo = new Image()
imagenPollo.src = pollo.url
imagenPollo.addEventListener("load", cargaPollo)

imagenLobo = new Image()
imagenLobo.src = lobo.url
imagenLobo.addEventListener("load", cargaLobo)


function cargaMapa() {
    mapa = true
    dibujar()
}

function cargaVaca() {
    vaca = true
    dibujar()
}

function cargaCerdo() {
    cerdo = true
    dibujar()
}


function cargaPollo() {
    pollo = true
    dibujar()
}

function cargaLobo() {
    lobo = true
    dibujar()
}

function dibujar() {
    if (mapa) {
        lienzo.drawImage(imagenMapa, 0, 0)

        if (lobo) {
            for (let i = 0; i < myRandom(3, 10); i++) {
                let animalX = myRandom(0, 420)
                let animalY = myRandom(0, 420)
                lienzo.drawImage(imagenLobo, xLobo, yLobo)
            }
        }

        if (vaca) {
            for (let i = 0; i < myRandom(3, 10); i++) {
                let animalX = myRandom(0, 420)
                let animalY = myRandom(0, 420)
                posicionVacaX[i] = animalX
                posicionVacaY[i] = animalY
                lienzo.drawImage(imagenVaca, animalX, animalY)
            }
        }

        if (cerdo) {
            for (let i = 0; i < myRandom(3, 10); i++) {
                let animalX = myRandom(0, 420)
                let animalY = myRandom(0, 420)
                posicionCerdoX[i] = animalX
                posicionCerdoY[i] = animalY
                lienzo.drawImage(imagenCerdo, animalX, animalY)
            }
        }

        if (pollo) {
            for (let i = 0; i < myRandom(3, 10); i++) {
                let animalX = myRandom(0, 420)
                let animalY = myRandom(0, 420)
                posicionPolloX[i] = animalX
                posicionPolloY[i] = animalY
                lienzo.drawImage(imagenPollo, animalX, animalY)
            }
        }
    }
}



function myRandom(min, maxi) {
    let result = Math.floor(Math.random() * (maxi - min)) + min
    return result
}
    
answered by 10.05.2018 / 13:59
source
0

I miss you in the role of the wolf to put the randoms, in the "toDraw" function you have it like this: 

 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)

}

leave it like this: 

if (wolf.cargaOK == true) {
     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(wolf.imagen, x, y)

}

Only the wolf moves 

let finca = document.getElementById('terreno')
parcela = finca.getContext('2d')

document.addEventListener('keydown', moveWolf)//con esto movemos el lobo.

let xWolf = 150
let yWolf = 100
//creamos los arrays para guardar la posicion de cada animal
let cantidad = myRandom(5, 10)
var vacas = new Array(cantidad);
var pollos = new Array(cantidad);
var cerdos = new Array(cantidad);


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:
        toDrawWolf ()

        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

}

function loadFondo() {
    fondo.cargaOK = true
    toDraw()
}

function loadCow() {
    cow.cargaOK = true

}


function loadPork() {
    pork.cargaOK = true
    //toDraw()
}

function loadChicken() {
    chicken.cargaOK = true

}

function toDraw() {//creamos la funcion para dibujar la imagen en el canvas

    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
//guardamos en el array de la vaca las coordenadas de las que fueron creadas
            vacas[i]= x + "," + y;
            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)
    //guardamos en el array de los cerdos las coordenadas de las que fueron creadas
            cerdos[i]= x + "," + y;
            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
    //guardamos en el array de los pollos las coordenadas de las que fueron creadas
            pollos[i]= x + "," + y;
            parcela.drawImage(chicken.imagen, x, y)
        }
    }

    if (wolf.cargaOK == true) {

         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(wolf.imagen, x, y)

    }
}

function toDrawWolf() {//creamos la funcion para dibujar la imagen en el canvas
    if (fondo.cargaOK == true) {
        parcela.drawImage(fondo.imagen, 0, 0)
    }
    //hacemos un barrido de los arrays para redibujarlos en su posición original
    for(let j=0; j < vacas.length; j++){
            //alert(vacas[j]);
            var valorV = vacas[j].split(',');
            var valorP = pollos[j].split(',');
            var valorC = cerdos[j].split(',');
            parcela.drawImage(cow.imagen, parseInt(valorV[1]), parseInt(valorV[0]))
            parcela.drawImage(chicken.imagen, parseInt(valorP[1]), parseInt(valorP[0]))
            parcela.drawImage(pork.imagen, parseInt(valorC[1]), parseInt(valorC[0]))
    }

    if (wolf.cargaOK == true) {

         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(wolf.imagen, x, y)

    }
}
function myRandom(min, maxi) {
    let result = Math.floor(Math.random() * (maxi - min)) + min
    return result
}
    
answered by 09.05.2018 в 20:32
Is it possible to remove the header and footer when printing with browsers? Structure Json in html