ayuenme que esta mal? no me detecta el teclado <code>&lt;code&gt; </code> var vg = document.getElementById(“canvas”); var papel = vg.getC...

Hola, te envio el codigo con comentarios y sugerencias, segun lo aprendido.

Error: Esta mal escrito keyCode, tu lo tenias: keycode.

En mi aporte al video, agregue como mantener las posiciones de las demas imagenes cuando mueves una de ellas...

Espero te sirva:

var vg = document.getElementById("area_de_dibujo");
var papel = vg.getContext("2d");
var cantidad = aleatorio(5, 13);

//objetos con la sintaxis de json------->
var fondo = {
url: "fondo.png",
cargaOk: false
}

var vaca = {
url: "vaca.png",
cargaOk: false
};

var cerdo = {
url: "cerdo.png",
cargaOk: false
};

var pollo = {
url: "pollo.png",
cargaOk: false
};

//imagen del fondo canvas----------------->
fondo.objeto = new Image();
fondo.objeto.src = fondo.url;
fondo.objeto.addEventListener("load", cargarFondo);
//variables animales------------------>

vaca.objeto = new Image();
vaca.objeto.src = vaca.url;
vaca.objeto.addEventListener("load", cargarVaca);

cerdo.objeto = new Image();
cerdo.objeto.src = cerdo.url;
cerdo.objeto.addEventListener("load", cargarCerdo);

pollo.objeto = new Image();
pollo.objeto.src = pollo.url;
pollo.objeto.addEventListener("load", cargarPollo);

//variables del moverCerdo-------------------->
var xCerdo = 210;
var yCerdo = 210;

//funsioneess------------------------------->
function dibujar() { //funsion dibujar
	if (fondo.cargaOk) {
		papel.drawImage(fondo.objeto, 0, 0);
	}
	if (vaca.cargaOk) {
		console.log(cantidad);
		for (var v = 0; v < cantidad; v++) {
			var x = aleatorio(0, 7);
			var y = aleatorio(0, 7);
			var x = x * 60;
			var y = y * 60;
			papel.drawImage(vaca.objeto, x, y);
		}

	}

  // SEGUN EL CODIGO SOLO PODRIAS MOVER UN CERDO
  /*
	if (cerdo.cargaOk) {
		console.log(cantidad);
		for (var c = 0; c < cantidad; c++) {
			var x = aleatorio(0, 405);
			var y = aleatorio(0, 405);
			papel.drawImage(cerdo.objeto, x, y);
		}
	}
  */

  //SE CARGA UN SOLO CERDO
  if (cerdo.cargaOk) //cerdo en movimientoo------>
  {
    papel.drawImage(cerdo.objeto, xCerdo, yCerdo);
  }

	if (pollo.cargaOk) {

		console.log(cantidad);
		for (var p = 0; p < cantidad; p++) {
			var x = aleatorio(0, 420);
			var y = aleatorio(0, 420);
			papel.drawImage(pollo.objeto, x, y);
		}
	}

}

//general numero aleatorio--------------->
function aleatorio(min, maxi) {
	var resultado;
	resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
	return resultado;
}

//funsion para cargar imagenes------------>

function cargarFondo() {
	fondo.cargaOk = true;
	dibujar();
}

function cargarVaca() {
	vaca.cargaOk = true;
	dibujar();
}

function cargarCerdo() {
	cerdo.cargaOk = true;
	dibujar();
}

function cargarPollo() {
	pollo.cargaOk = true;
	dibujar();
}



//detectar teclado----------------->
var teclas = {
UP: 38,
DOWN: 40,
LEFT: 37,
RIGHT: 39
};

//flechas
document.addEventListener("keydown", moverCerdo);

//funsion de mover cerdo------------------>
function moverCerdo(evento) {/*
  TIENES QUE DIBUJAR OTRA VEZ TODO:
    => Recuerda cada etapa es un dibijo una sobre otra
*/
  // Dibujas nuevamente el fondo
  papel.drawImage(fondo.objeto, 0, 0);

  var movimiento = 5;

  /// Esta mal escrito keyCode, tu lo tenias: keycode
	switch (evento.keyCode) {

		case teclas.UP:
			papel.drawImage(cerdo.objeto, xCerdo, yCerdo - movimiento);
			yCerdo = yCerdo - movimiento;
			console.log("arriba");
			break;

		case teclas.DOWN:
			papel.drawImage(cerdo.objeto, xCerdo, yCerdo + movimiento);
			yCerdo = yCerdo + movimiento;
			console.log("abajo");
			break;

		case teclas.LEFT:
			papel.drawImage(cerdo.objeto, xCerdo, yCerdo - movimiento);
			xCerdo = xCerdo - movimiento;
			console.log("izquierda");
			break;

		case teclas.RIGHT:
			papel.drawImage(cerdo.objeto, xCerdo, yCerdo + movimiento);
			xCerdo = xCerdo + movimiento;
			console.log("derecha");
			break;
	}
}