Empieza por ac谩

1

Mi primera l铆nea de c贸digo

Fundamentos de Programaci贸n

2

驴Qu茅 es HTML/CSS/JS?

3

JavaScript no es Java

4

Primeros pasos en el navegador con alert

5

HTML, CSS, JavaScript de verdad

6

Los apuntes de Freddy en PDF

Primer proyecto: Peso en otro planeta

7

Peso en otro planeta

8

Obteniendo datos del usuario

9

Flujo y condicionales

Segundo proyecto: Dibujando con Canvas

10

C贸mo funcionan Window y Document

11

El DOM: nuestro lugar de trabajo en la web

12

Dibujando en el DOM

13

Qu茅 son las Funciones en JavaScript

14

Ciclos while y for en JavaScript

15

Eventos y Formularios en HTML y JavaScript

16

Detectar eventos del teclado con JavaScript

17

Dibujar en canvas con las flechas del teclado

Tercer proyecto: Villa platzi

18

Funciones matem谩ticas y n煤meros aleatorios en JavaScript

19

Uso y carga de im谩genes en Canvas

Cuarto proyecto: Pakimanes

20

Divisi贸n, m贸dulo y residuo en JavaScript

21

Clases y Arrays en JavaScript

Quinto proyecto: Cajero autom谩tico

22

Diagrama de Flujo del Cajero Autom谩tico

23

Implementaci贸n del Cajero Autom谩tico

Sexto proyecto: Cliente/Servidor

24

Modelo Cliente/Servidor

25

Primer servidor web con express

Programaci贸n de Hardware y Electr贸nica con Arduino

26

驴C贸mo funciona un circuito electr贸nico?

27

驴C贸mo programar un Arduino?

28

Programaci贸n de circuitos con C, Arduino y Sketch

29

C贸mo programar un Arduino con Javascript y Node

30

Construye un Robot con JavaScript

31

Robot para riego de plantas en Arduino, Javascript y Node

Materiales de apoyo

32

Las mejores notas de los estudiantes

33

驴Cu谩l lenguaje de programaci贸n aprender primero?

34

La Web con Visi贸n Profesional

Contenido Bonus

35

Qu茅 son tablas de verdad y compuertas l贸gicas

Recap Curso Gratis de Programaci贸n B谩sica

36

Recap Programaci贸n b谩sica

37

Recap Programaci贸n b谩sica ENG

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Uso y carga de im谩genes en Canvas

19/37
Recursos

En canvas puedes insertar im谩genes. En el siguiente ejemplo, insertaremos im谩genes que se mueven a lo largo de la pantalla, sin salirse del espacio marcado.

var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");
var teclas = {
	UP: 38,
	DOWN: 40,
	LEFT: 37,
	RIGHT: 39
};


var fondo = {
	url: "tile.png",
	cargaOK: false
};

var vaca = {
	url: "vaca.png",
	cargaOK: false,
	x : [],//Creo una variable X y Y para vaca y pollo en arreglo y la de cerdo la inicializo en cero
	y : []
};

var cerdo = {
	url: "cerdo.png",
	cargaOK: false,
	x : 0,
	y : 0
};

var pollo = {
	url: "pollo.png",
	cargaOK: false,
	x : [],
	y : []
};
 
 
var cantidad = aleatorio(1,50);

fondo.imagen = new Image();//creamos objeto
fondo.imagen.src = fondo.url;
fondo.imagen.addEventListener("load", cargarFondo);//escuchamos el evento de carga del navegador

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

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

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

function cargarFondo ()//cuando ocurre el evento, se llama a estas funciones para que a su vez llamen la funcion de dibujar
{
	fondo.cargaOK = true;
	dibujar();
}
 
 function cargarVaca ()
{
	vaca.cargaOK = true;
	dibujar();
}

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

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

function dibujar()//aqui se evalua cual imagen ha cargado, para que siga el orden de carga que queremos
{

	if(fondo.cargaOK)
	{
		papel.drawImage(fondo.imagen , 0 , 0);
	}
	if(vaca.cargaOK)//si el objeto de la vaca ya cargo se ejecuta el ciclo en donde se colocan cantidades y posiciones aleatorias
		//tambien se guardan en el arreglo las posiciones aleatorias que se generaron para posteriormente saber redibujar el objeto cuando
	//movamos el cerdo en el teclado
	{
		for( var v = 0; v < cantidad; v++)
		{
			var x = (aleatorio (0,7)*60);
			var y = (aleatorio (0,7)*60);
			vaca.x[v] = x;
			vaca.y[v] = y;
			papel.drawImage(vaca.imagen , x , y);
			console.log(cantidad);
		}
		
	}
	if(cerdo.cargaOK)
	{	
		var x = (aleatorio (0,7)*60);
		var y = (aleatorio (0,7)*60);
		cerdo.x = x;
		cerdo.y = y;
		papel.drawImage(cerdo.imagen , x , y);
		
	}
	if(pollo.cargaOK)
	{
		for(var p =0; p <cantidad ; p++)
		{
			var x = (aleatorio (0,7)*60);
			var y = (aleatorio (0,7)*60);
			pollo.x [p] = x;
			pollo.y [p] = y;
			papel.drawImage(pollo.imagen , x , y);
			console.log(cantidad);
		}
		
	}

}


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

function moverCerdo(x,y)
{
	papel.drawImage(cerdo.imagen,x,y);
}

function dibujarOtraVez()//redibujamos los objetos, solo que sin el ciclo y utilizando los numero aleatorios de la funcion dibujar
{
	if(fondo.cargaOK)
	{
		papel.drawImage(fondo.imagen , 0 , 0);
	}
	 if(vaca.cargaOK)
	 {
	 	for( var v = 0; v < cantidad; v++)
		{
			papel.drawImage(vaca.imagen , vaca.x[v] , vaca.y[v]);
			console.log(cantidad);
		}
	 }
	 if(pollo.cargaOK)
	 {
	 	for( var p = 0; p < cantidad; p++)
		{
			papel.drawImage(pollo.imagen , pollo.x[p] , pollo.y[p]);
			console.log(cantidad);
		}
	 }
}

document.addEventListener("keyup", moverTecla);//identificamos el evento del teclado y restamos o sumamos posicion, segun la tecla 
	function moverTecla(evento)
	{
			var movimiento = 5;
			switch (evento.keyCode)
		{
			case teclas.UP:
				dibujarOtraVez();
				moverCerdo(cerdo.x,cerdo.y);
				cerdo.y = cerdo.y - movimiento;
			break;
			case teclas.DOWN:
				dibujarOtraVez();
				moverCerdo(cerdo.x,cerdo.y);
				cerdo.y = cerdo.y + movimiento;				
			break;
			case teclas.LEFT:
				dibujarOtraVez();
				moverCerdo(cerdo.x,cerdo.y);
				cerdo.x = cerdo.x - movimiento;				
			break;
			case teclas.RIGHT:
				dibujarOtraVez();
				moverCerdo(cerdo.x,cerdo.y);
				cerdo.x = cerdo.x + movimiento;				
			break;
			default:
				console.log("Otra tecla");
			break;
		}	
	}	

Contribuci贸n creada por: Santiago G贸mez

Aportes 2902

Preguntas 930

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

馃惐鈥嶐煉 Villa con perro como pastor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Villa</title>
</head>
<body>
    <canvas width="500" height="500" id="villa_platzi"></canvas>
    <script src="platzi.js"></script>
</body>
</html>
var vp = document.getElementById("villa_platzi");
var papel = vp.getContext("2d");
document.addEventListener("keydown" , moverPastor);

var cantidadvacas = aleatorio(0, 16);
var cantidadpollo = aleatorio(0, 16);
var cantidadcerdos = aleatorio(0, 16);

var movimiento = 40;
var x = 420;
var y = 420;

var fondo = {
  url: "tile.webp",
  cargaOK: false
};

var pollo = {
  url: "pollo.webp",
  cargaOK: false
};

var perro = {
  url: "perro.png",
  cargaOK: false
};

var cerdo = {
  url: "cerdo.webp",
  cargaOK: false
};

var vaca = {
  url: "vaca.webp",
  cargaOK: false
};

var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};

fondo.imagen = new Image();
fondo.imagen.src = fondo.url;
fondo.imagen.addEventListener("load", cargarFondo);

pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
pollo.imagen.addEventListener("load", cargarPollos);

cerdo.imagen = new Image();
cerdo.imagen.src = cerdo.url;
cerdo.imagen.addEventListener("load", cargarCerdos);

vaca.imagen = new Image();
vaca.imagen.src = vaca.url;
vaca.imagen.addEventListener("load", cargarVacas);

perro.imagen = new Image();
perro.imagen.src = perro.url;
perro.imagen.addEventListener("load", cargarPerro);

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

function cargarVacas(){
  vaca.cargaOK = true;
  vaca.x = [];
  vaca.y = [];
  for(var n=0; n < cantidadvacas; n++){
    vaca.x[n] = aleatorio(0,7) * 60;
    vaca.y[n] = aleatorio(0,7) * 60;
  }
  dibujar();
}

function cargarCerdos(){
  cerdo.cargaOK = true;
  cerdo.x = [];
  cerdo.y = [];
  for(var l=0; l < cantidadcerdos; l++){
    cerdo.x[l] = aleatorio(0,7) * 60;
    cerdo.y[l] = aleatorio(0,7) * 60;
  }
  dibujar();
}

function cargarPollos(){
  pollo.cargaOK = true;
  pollo.x = [];
  pollo.y = [];
  for(var e=0; e < cantidadpollo; e++){
    pollo.x[e] = aleatorio(0,7) * 60;
    pollo.y[e] = aleatorio(0,7) * 60;
  }
  dibujar();
}

function cargarPerro(){
  perro.cargaOK = true;
  dibujar()
}

function dibujar(){
  if(fondo.cargaOK){
    papel.drawImage(fondo.imagen, 0, 0);
  }
  if(vaca.cargaOK){
    for(v = 0; v < cantidadvacas; v++){
      papel.drawImage(vaca.imagen, vaca.x[v], vaca.y[v]);
    }
  }
  if(pollo.cargaOK){
    for(p = 0; p < cantidadpollo; p++){
      papel.drawImage(pollo.imagen, pollo.x[p], pollo.y[p]);
    }
  }
  if(cerdo.cargaOK){
    for(c = 0; c < cantidadcerdos; c++){
      papel.drawImage(cerdo.imagen, cerdo.x[c], cerdo.y[c]);
    }
  }
  if(perro.cargaOK){
    papel.drawImage(perro.imagen, x, y);
  }
}

function moverPastor(evento){
  switch (evento.keyCode){
    case teclas.UP:
        y = y - movimiento;
        if(y < -40){
          y = 500;
        }
        dibujar();
        break;
    case teclas.DOWN:
        y = y + movimiento
        if(y > 500){
           y = 0;
        }
        dibujar();
        break;
    case teclas.LEFT:
        x = x - movimiento;
        if(x < -40){
           x = 500;
        }
        dibujar();
        break;
    case teclas.RIGHT:
        x = x + movimiento;
        if(x > 500){
           x = 0;
        }
        dibujar();
        break;
      default:
  }
}

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

Juego Villa Platzi

Pruebalo en: https://jlcareglio.github.io/VillaPlatzi/index.html
Mira el Codigo fuente

function preguntarSiTeGusto() {
  let r = prompt("驴Te sirvi贸 este aporte? (Yes/No)").toUpperCase();
  if (r == "YES" || r == "Y" || r == "SI" || r == "S")
    alert("Genial 馃槃, Dale like 馃憤 y deja un comentario 馃槃");
  else alert("Deja un comentario y dime como puedo mejorar 馃槃");
}```

cuando resuelves un error de codigo y aparece otro

lo hice pero el cerdito !no se borra jajaja asi que deja una cola como en interestelar.

DESAF脥O
隆Gracias totales! Realmente disfrut茅 haciendo este programa, Freddy, eres un verdadero Maestro!

Mi programa funciona as铆: Genera aleatoriamente vacas (de 1 a 5), pollos (de 1 a 10) y un cerdo.
Lo pueden probar aqu铆.
C贸digo html
C贸digo javascript

Fue relativamente sencillo hacer que el cerdo se mueva con las teclas; pero en ese punto cada vez que el cerdo avanzaba un paso todo el canvas se reiniciaba de modo que aparec铆an diferente cantidad de animales en diferentes posiciones en cada instante.

Siguiente paso: Hacer que las vacas y pollos se queden donde est谩n mientras el cerdo se mueve. Entonces la generaci贸n de posiciones aleatorias no puede estar en la funci贸n dibujar() y las posiciones deben guardarse.

驴C贸mo guardar las posiciones de cada animal cuando su cantidad es aleatoria?
Para esto encontr茅 la soluci贸n mediante un ARRAY de OBJETOS

class Position
{
	constructor(x, y)
	{
		this.x = x;
		this.y = y;
	}
}

Mediante este c贸digo se cre茅 la clase Position

var position = new Position(1, 2);

Mediante esa l铆nea se cre贸 un objeto llamado position perteneciente a la clase Position.
position es un objeto
Tiene dos atributos:

position.x
position.y

position.x vale 1 y position.y vale 2

驴Qu茅 es un ARRAY?
Creo que a煤n no estoy capacitado para responder esta pregunta; pero en t茅rminos simples varios objetos o variables juntos y enumerados conforman un array. Est谩n juntos porque tienen el mismo nombre de variable y la manera de diferenciarlos y acceder a cada uno es mediante un n煤mero de 铆ndice:

var position = [];
position[0] = new Position(1,2);
position[1] = new Position(3,4);
position[2] = new Position(5,6);

Entonces, por ejemplo, position[1].x vale 3 y position[2].y vale 6

De alg煤n modo el escribir var position = [] permite la creaci贸n del array 鈥 驴?

Entonces para agregar un objeto position al objeto vaca escrib铆:

var indice = aleatorio(1, 10);
var x = 60*aleatorio(0, 7);
var y = 60*aleatorio(0, 7);
vaca.position = [];
vaca.position[indice] = new Position(x, y);
vaca.position[indice].x = vaca.position[indice].x + 1;
vaca.position[indice].y += 1;

(a = a + 1) y (a += 1) Son dos formas de escribir la misma operaci贸n.

estoy a punto de cumplir 30 a帽os, y desde que termine el colegio no he podido estudiar ni una sola carrera, intent茅 estudiar ingenier铆a comercial al a帽o siguiente que termine mi bachillerato, pero por circunstancias de la vida me toc贸 trabajar y ayudar en la casa porque mam谩 enfermo y ya despu茅s de eso todo se complic贸. El punto es que estoy apunto de terminar este curso y eso me emociona bastante, ser铆a mi primer t铆tulo luego de 10 a帽os, el curso se me hace muy dif铆cil porque no s茅 mucho de tecnolog铆a, pero le hecho ganas, le dedico 6 horas al d铆a porque eso es lo que me toma entender cada dos cap铆tulos. Estoy muy agradecido con Platzi por hacer este curso gratuito ya que no tengo para pagar una membres铆a, pero ya comenc茅 a ahorrar, asique una vez termine este, espero seguir aprendiendo m谩s con los siguientes cursos de programaci贸n.

No lo puedo creer!! jajaj dure 4 d铆as haciendo este desafi贸, es all铆 donde uno se da cuenta de varias cosas

  1. Que no nos podemos rendir
  2. El mundo de la programaci贸n es hasta donde tu imaginaci贸n llegue
  3. Creando y queriendo agregarle m谩s cosas generas mas conocimiento.

Les comparto el resultado de tantos d铆as de estudio y practica.

Opss

Hasta este punto del curso se me hace dificil seguir sin tener algunos conocimientos basicos sobre javaScript, siento que no estoy aprendiendo a redactar codigo sino que estoy solo copiando, y no es culpa del curso, no me mal interpreten, el curso es realmente bueno pero tengo la convicci贸n de que al tener conocimientos basicos previos de javascirpt y de como funcionan sus componentes aprovechariamos a profundidad este curso de manera que encontr茅 una lectura excelente el cual explica el funcionamiento de los componentes de javascript, html y css el cual no es dificil de comprender, aqui les dejo el link de la pagina: https://lenguajejs.com/

Freddy ten铆a raz贸n 馃槃. Con este ejercicio literalmente nos explota el cerebro si prestamos total atenci贸n. Cada que vez que 鈥淓l objeto se mueve鈥, en realidad no se est谩 moviendo, solo se est谩 volviendo a dibujar sobre un mapa nuevo cada vez. 馃槷

Yo hice ese donde el lobo se mueve y los otros animales se quedan quietos. La im谩gen del lobo la hice yo:

La im谩gen del lobo es esta:

Y el c贸digo es este:

// Entorno
var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");

// Objetos de los animales
var fondo = {
  url: "tile.png",
  cargaOK: false
};

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

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

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

var lobo = {
  url: "lobo.png",
  cargaOK: false
};

// C贸digos de las teclas
var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};

var bandera = 0;
var cantidadVacas = aleatorio(1, 3);
var cantidadCerdos = aleatorio(1, 3);
var cantidadPollos = aleatorio(1, 3);
var posicionXv = new Array();
var posicionYv = new Array();
var posicionXc = new Array();
var posicionYc = new Array();
var posicionXp = new Array();
var posicionYp = new Array();
var xl = 50;
var yl = 50;

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);

document.addEventListener("keydown", moverLobo);

// funciones para cargar imagenes
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();
}

// funcion para insertar las imagenes
function dibujar(){
  if (fondo.cargaOK && vaca.cargaOK && pollo.cargaOK && cerdo.cargaOK && lobo.cargaOK){
    papel.drawImage(fondo.imagen, 0, 0);
    for (var v = 0; v < cantidadVacas; v++){
      if (bandera == 0) {
        posicionXv[v] = aleatorio(0, 7) * 60;
        posicionYv[v] = aleatorio(0, 10) * 40;
      }
      papel.drawImage(vaca.imagen, posicionXv[v], posicionYv[v]);
    }
    for (var v = 0; v < cantidadCerdos; v++){
      if (bandera == 0) {
        posicionXc[v] = aleatorio(0, 7) * 60;
        posicionYc[v] = aleatorio(0, 10) * 40;
      }
      papel.drawImage(cerdo.imagen, posicionXc[v], posicionYc[v]);
    }
    for (var v = 0; v < cantidadPollos; v++){
      if (bandera == 0) {
        posicionXp[v] = aleatorio(0, 7) * 60;
        posicionYp[v] = aleatorio(0, 10) * 40;
      }
      papel.drawImage(pollo.imagen, posicionXp[v], posicionYp[v]);
    }
    if (bandera == 0){
      papel.drawImage(lobo.imagen, xl, yl);
    }
    bandera = 1;
  }
}

function moverLobo(evento){
  switch (evento.keyCode) {
    case teclas.UP:
      dibujar();
      yl--;
      papel.drawImage(lobo.imagen, xl, yl);
      break;
    case teclas.DOWN:
      dibujar();
      yl++;
      papel.drawImage(lobo.imagen, xl, yl);
      break;
    case teclas.LEFT:
      dibujar();
      xl--;
      papel.drawImage(lobo.imagen, xl, yl);
      break;
    case teclas.RIGHT:
      dibujar();
      xl++;
      papel.drawImage(lobo.imagen, xl, yl);
      break;
    default:
      break;
    }
}

function aleatorio(min, max){
  var resultado = Math.floor(Math.random()*(max - min + 1)) + min;
  return resultado;
}

Esta es la mi respuesta al reto 馃槑

En estos momentos me encuentro en mi trabajo donde mi jefe directo me dijo que no se pod铆a aprender m谩s de un oficio en la vida. Aqu铆 me encuentro intentando superarme y ser alguien mejor en mi profesi贸n.

No logr茅 hacer mover al cerdito, pero si tengo a los tres animalitos en una bonita granja que encontr茅.

Dej茅 un rato el curso para practicar
mueves el volante con el mouse y controlas el auto
el fondo es una imagen que se repite y con un ciclo va bajando 10 pixeles por
vez con un ciclo infinito
los arboles, autos y autobus aparecen de forma aleatoria.
ahora si a darle a lo que sigue


Listo, La verdad no pude, tuve que revisar las respuestas de mis compa帽eros, entend铆 muchas cosas pero aqu铆 seguimos aprendiendo:

<var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");
document.addEventListener("keydown", moverCerdo);

var xCerdo = 700;
var yCerdo = 700;

function moverCerdo(evento)
{
    console.log(evento);
    var movimiento = 20;
    var teclas = {
      UP: 38,
      DOWN: 40,
      LEFT: 37,
      RIGHT: 39
    };
    switch (evento.keyCode)
    {
      case teclas.UP:
        yCerdo = yCerdo - movimiento;
      dibujar();
      break;

      case teclas.DOWN:
      yCerdo = yCerdo + movimiento;
      dibujar();
      break;

      case teclas.LEFT:
      xCerdo = xCerdo - movimiento;
      dibujar();
      break;

      case teclas.RIGHT:
      xCerdo = xCerdo + movimiento;
      dibujar();
      break;
    default:
    console.log("Otra Tecla");
    break;
    }
  }

var fondo =
{
  url: "Villa.png",
  cargaOk: false
}
var vaca =
{
  url: "vaca.png",
  cargaOk: false
};
var cantidadVaca = aleatorio(1, 20);

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

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);


function cargarFondo()
{
  fondo.cargaOk = true;
  dibujar();
}
function cargarVacas()
{
  vaca.cargaOk = true;
  dibujar();
}
function cargarCerdos()
{
  cerdo.cargaOk = true;
  dibujar();
}

function dibujar()
{
  if(fondo.cargaOk)
  {
    papel.drawImage(fondo.imagen, 0, 0);
  }

  if(vaca.cargaOk)
  {
    console.log(cantidadVaca);
    for(var v=0; v<cantidadVaca; v++)
    {
      var x = aleatorio(0, 7);
      var y = aleatorio(0, 7);
      var x = x * 80;
      var y = y * 80;
      papel.drawImage(vaca.imagen, x, y);
    }
   }
  if (cerdo.cargaOk)
  {
    console.log(cantidadCerdo);

      papel.drawImage(cerdo.imagen, xCerdo, yCerdo);
    }
  }

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

Segundo desafio, para los que no sepan que es esto [], se llaman arreglos, es una estructura de datos que nos permite guardar lo que queramos en el, en este caso lo utilice para guardar las posiciones de las vacas, asi que cuando tengamos que redibujar todo para que no se vea el rastro del cerdo tengamos las posiciones guardadas y solo aparezcan, entonces se guardan por posciones posX es el arreglo de las posiciones en X de la vaca y posY pues de las posiciones en Y, si le hacen console.log al arreglo osea console.log(posX) podran ver como se compone sera algo asi [1,2,3,4,5], si yo quiero sacar el primer elemento del arreglo seria con la siguiente linea de codigo posX[0] esto solo me imprimiria el 1 si quiero el 2, pues seria posX[1] y asi entonces para sacar todas las posiciones con un ciclo bastaria cualquier pregunta no duden en escribirla. Exitos

var vp = document.getElementById("villa platzi");
document.addEventListener("keyup",dibujarTeclado);
var papel = vp.getContext("2d");

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

var fondo = {
    url: "tile.png",
    cargaOK: false
};

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

var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

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);
var mov = 10;
var x = aleatorio(0,420);
var y = aleatorio(0,420);

function dibujar(){
    if (fondo.cargaOK){
        papel.drawImage(fondo.imagen,0,0);
    }
    if(cerdo.cargaOK){
        papel.drawImage(cerdo.imagen,x,y)
    }
    if(vaca.cargaOK){
        posX = [];
        posY = [];
        for (var i = 0; i < 10; i++){
            var w = aleatorio(0,420);
            var z = aleatorio(0,420);
            posX[i] = w;
            posY[i] = z;
            papel.drawImage(vaca.imagen,w,z);
        }
    }
}

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

function cargarCerdos(){
    cerdo.cargaOK = true;
    dibujar();
}

function cargarVacas(){
    vaca.cargaOK = true;
    dibujar();
}

function aleatorio(min,max)
{
    var res;
    res = Math.floor( Math.random() * (max-min + 1)) + min;
    return res;
}


function dibujarTeclado(evento)
{
    switch(evento.keyCode){
        case teclas.DOWN:
            cCerdo();
            y += mov
        break
        case teclas.UP:
            cCerdo();
            y -= mov
        break
        case teclas.LEFT:
            cCerdo();
            x -= mov
        break
        case teclas.RIGHT:
            cCerdo();
            x += mov
        break
    }

}
function cCerdo(){
    if (fondo.cargaOK){
        papel.drawImage(fondo.imagen,0,0);
    }
    if (cerdo.cargaOK){
        papel.drawImage(cerdo.imagen,x,y)
    }
    if (vaca.cargaOK){
        for (var j = 0; j < 10; j++){
            papel.drawImage(vaca.imagen,posX[j],posY[j]);
        }
    }
}```

Como dato curioso, en la pesta帽a 鈥渘etwork鈥 de la opci贸n inspeccionar podemos encontrar entre otros datos, el tiempo que tardaron en cargar todos los archivos que nuestro programa utilice

Yo hice un ovni abduciendo una vaca.

Si me cost贸 varias horas jaja, pero hice un ovni que entra por la derecha y secuestra una vaca.

El ovni se mueve con las flechas y la vaca se mueve con los n煤meros 1, 2, 3 y 5.

JS

var campo = document.getElementById("campoDeSe帽ales");
var lienzo = campo.getContext("2d");

var teclas = { 
    UP: 38, 
    DOWN: 40, 
    LEFT: 37, 
    RIGTH: 39,
    CINCO: 101, 
    DOS: 98, 
    UNO: 97, 
    TRES: 99
};

document.addEventListener("keydown", moverNave);
console.log(teclas);

var fondo = {
    url: "tile.png",
    cargaOK: false
}

var ovni = {
    url: "ovni.png",
    cargaOK: false
}

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

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

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


fondo.imagen = new Image();
fondo.imagen.src = fondo.url;
fondo.imagen.addEventListener("load", cargaFondo);

ovni.imagen = new Image();
ovni.imagen.src = ovni.url;
ovni.imagen.addEventListener("load", cargaOvni);

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

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

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


var x = 500;
var y = 0;
var xv = 150;
var yv = 300;
var xc = aleatorio(0, 400);
var yc = aleatorio(0, 400);
var xp = aleatorio(0, 400);
var yp = aleatorio(0, 400);

function cargaFondo()
{
    fondo.cargaOK = true;
    moverNave();
}

function cargaOvni()
{
    ovni.cargaOK = true;
    moverNave();
}

function cargaVaca()
{
    vaca.cargaOK = true;
    moverNave();
}

function cargaCerdo()
{
    cerdo.cargaOK = true;
    moverNave();
}

function cargaPollo()
{
    pollo.cargaOK = true;
    moverNave();
}


function moverNave(evento)
{
    var movimiento = 1;

    if(fondo.cargaOK == true)
    {
        lienzo.drawImage(fondo.imagen, 0, 0);
    }

    if(cerdo.cargaOK == true)
    {
        lienzo.drawImage(cerdo.imagen, xc, yc);
        lienzo.drawImage(cerdo.imagen, xc + 30, yc + 15);
        lienzo.drawImage(cerdo.imagen, xc + -50, yc + 50);
    }
    
    if(pollo.cargaOK == true)
    {
        lienzo.drawImage(pollo.imagen, xp, yp);
        lienzo.drawImage(pollo.imagen, xp + 10, yp + 20);
        lienzo.drawImage(pollo.imagen, xp + 60, yp + 25);
    }

    if(vaca.cargaOK == true)
    {
        lienzo.drawImage(vaca.imagen, xv, yv);

        switch(evento.keyCode)
        {
            case teclas.CINCO:
                lienzo.drawImage(vaca.imagen, xv, yv - movimiento);
                yv = yv - movimiento;
            break;
            case teclas.DOS:
                lienzo.drawImage(vaca.imagen, xv, yv + movimiento);
                yv = yv + movimiento;
            break;
            case teclas.UNO:
                lienzo.drawImage(vaca.imagen, xv - movimiento, yv);
                xv = xv - movimiento;
            break;
            case teclas.TRES:
                lienzo.drawImage(vaca.imagen, xv + movimiento, yv);
                xv = xv + movimiento;
            break;
            default: 
                lienzo.drawImage(vaca.imagen, xv, yv);
            break;
        }
    }

    if(ovni.cargaOK == true)
    {
        switch(evento.keyCode)
        {
            case teclas.UP:
                lienzo.drawImage(ovni.imagen, x, y - movimiento);
                y = y - movimiento;
            break;
            case teclas.DOWN:
                lienzo.drawImage(ovni.imagen, x, y + movimiento);
                y = y + movimiento;
            break;
            case teclas.LEFT:
                lienzo.drawImage(ovni.imagen, x - movimiento, y);
                x = x - movimiento;
            break;
            case teclas.RIGTH:
                lienzo.drawImage(ovni.imagen, x + movimiento, y);
                x = x + movimiento;
            break;
            default: 
                lienzo.drawImage(ovni.imagen, x, y);
            break;
            
        }
    }
}


function aleatorio(min, max)
{
    var resultado;
    resultado = Math.floor(Math.random()*(max - min + 1)) + min;
    return resultado;
}

HTML

<!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>Aliens</title>
    </head>
    <body>
        <canvas width="500" height="500" id="campoDeSe帽ales"></canvas>
        <script src="ovni.JS"></script>
    </body>
</html>

Yo lo hice un poco diferente 馃槂

He creado a Freddy como si fuera 8-bit. No es igual pero al menos es parecido. Espero que les guste. Y me encantar铆a que me dijeran en que lo utilizaron, lo hicieron moverse?, hablar?, hacer c贸digos?, etc. De verdad me encanta este curso, aprendo demasiado y se nota que Freddy lo hace con cari帽o. Sue帽o con un like de Freddy鉂わ笍

con los n煤meros aleatorios logr茅 darle colores random al canvas


Decid铆 hacerles un corral a las vacas

Aqu铆 est谩 mi aporte, dibuje un granjero para que se moviera entre los cerdos, los pollos y las vacas (ya que bueno quer铆a usar otra imagen). El granjero puede moverse sin salirse del canvas (solo en l铆nea recta y no en diagonal).
Cada vez que se actualiza el canvas los animales permanecen en posici贸n.












Envi贸 la respuesta al desafi贸, espero le sirva a alguien.
Este desafi贸 estuvo entretenido, fue genial.

<code>
var teclas = {
  UP:38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};

var xCerdo=0;
var yCerdo=0;




var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");
var mapa = "tile.png";

var fondo = {
  url: mapa, 
  cargaOk: false
}

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

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

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



var cantidad = aleatorio(1,10);
console.log(cantidad);

var vacaArray= new Array(cantidad);
for (var i = 0; i < cantidad; i++) {
  vacaArray[i] = new Array();
}

var polloArray= new Array(cantidad);
for (var i = 0; i < cantidad; i++) {
  polloArray[i] = new Array();
}


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", cargarCerdo);

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


document.addEventListener("keydown", dibujarTeclado);

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

}

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

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

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




function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo){
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth=3;
  lienzo.moveTo(xinicial,yinicial);
  lienzo.lineTo(xfinal,yfinal);
  lienzo.stroke();
  lienzo.closePath();
}


function dibujar(){
  if(fondo.cargaOk){
    papel.drawImage(fondo.imagen, 0, 0);
  }
  if(vaca.cargaOk){
    for(var v=0; v<cantidad; v++){
      var x = aleatorio(0, 6);
      var y = aleatorio(0, 6);
      var x = x*70;
      var y = y*70;
      papel.drawImage(vaca.imagen, x, y);
      vacaArray[v][0]=x;
      vacaArray[v][1]=y;
    }
  }

  if(pollo.cargaOk){
    for(var v=0; v<cantidad; v++){
      var x = aleatorio(0, 6);
      var y = aleatorio(0, 6);
      var x = x*70;
      var y = y*70;
      papel.drawImage(pollo.imagen, x, y);
      polloArray[v][0]=x;
      polloArray[v][1]=y;
      
    }
  }

  if(cerdo.cargaOk){
    moverCerdo(0, 0);
  }
}


function moverCerdo(x, y){
    if(fondo.cargaOk){
    papel.drawImage(fondo.imagen, 0, 0);
  }
  if(vaca.cargaOk){
    for(var v=0; v<cantidad; v++){
      var xActual = vacaArray[v][0];
      var yActual = vacaArray[v][1];
      papel.drawImage(vaca.imagen, xActual, yActual);
      
      
    }
  }

  if(pollo.cargaOk){
    for(var v=0; v<cantidad; v++){
      var xActual = polloArray[v][0];
      var yActual = polloArray[v][1];
      papel.drawImage(pollo.imagen, xActual, yActual);
      
    }
  }

  if(cerdo.cargaOk){
    papel.drawImage(cerdo.imagen, x, y);
  }
}


// console.log(vacaArray);


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


var colorcito="purple";
var movimiento=30;

function  dibujarTeclado(evento){

  switch(evento.keyCode){
    case teclas.UP:
      if(yCerdo==0){
          alert('No salgas del corral');
      }else{
        yCerdo=yCerdo-movimiento;
        moverCerdo(xCerdo, yCerdo);
      }
    break;


    case teclas.DOWN:

      if(yCerdo==420){
        alert('No salgas del corral');
      }else{
        yCerdo=yCerdo+movimiento;
        moverCerdo(xCerdo, yCerdo);
      }
    break;


    case teclas.LEFT:
      if(xCerdo==0){
        alert('No salgas del corral');
      }else{
        xCerdo=xCerdo-movimiento;
        moverCerdo(xCerdo, yCerdo);
      }
    break;


    case teclas.RIGHT:
      if(xCerdo==420){
        alert('No salgas del corral');
      }else{
        xCerdo=xCerdo+movimiento;
        moverCerdo(xCerdo, yCerdo);
      }
    break;

    default:
    console.log('otra tecla');
    break;
  }

  // console.log(xCerdo, yCerdo);

 
}
</code>

JavaScript Object Notation (JSON) : Es un formato de texto sencillo para el intercambio de datos. Se trata de un subconjunto de la notaci贸n literal de objetos de JavaScript.

Hola!

Hice ambos retos y a帽adi un prompt para preguntar el nombre del usuario, Cuando el cerdito llega a la casa, sale un mensaje con el nombre del usuario de felicitaciones; como si hubiera ganado.

Tom茅 la idea de refrescar el canvas de @ramses_ATK.

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Villa Platzi</title>
    <style media="screen">
      body
      {
        background-color: #00b300
      }
      p
      {
        size: big
        strong
      }
    </style>
  </head>
  <body>
    <p>Lleva a tu cerdito a su casa.</p>
    <canvas id="villaplatzi" width="500" height="500"></canvas>
    <script type="text/javascript" src="platzi.js"></script>
  </body>
</html>

JS

var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");
var usuario = prompt("Cu谩l es tu nombre?");
var teclas = {
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40
}
var pigPosX = 0;
var pigPosY = 0;
var housePosX = 400;
var housePosY = 400;
var winPos = housePosX * housePosY;

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
}

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);

pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
vaca.imagen.addEventListener("load", cargarPollos);

cerdo.imagen = new Image();
cerdo.imagen.src = cerdo.url;
cerdo.imagen.addEventListener("load", cargarCerdos)

function cargarFondo()
{
  fondo.cargaOK = true;
  dibujar();
}
function cargarVacas()
{
  vaca.cargaOK = true;
  dibujar();
}
function cargarPollos()
{
  pollo.cargaOK = true;
  dibujar();
}
function cargarCerdos()
{
  cerdo.cargaOK = true;
  dibujarCerdo();
}

function dibujarCerdo()
{
  if(cerdo.cargaOK)
  {
    papel.drawImage(cerdo.imagen, pigPosX, pigPosY);
  }
}
function dibujar()
{
  if(fondo.cargaOK)
  {
    papel.drawImage(fondo.imagen, 0, 0);
  }
  if(vaca.cargaOK)
  {
    var cantidad = aleatorio(5, 25);
    console.log(cantidad);
    for(var v=0; v < cantidad; v++)
    {
      var x = aleatorio(0, 6);
      var y = aleatorio(0, 9);
      var x = x * 70;
      var y = y * 47;
      papel.drawImage(vaca.imagen, x, y);
    }
  }
  if(pollo.cargaOK)
  {
    var cantidad = aleatorio(5, 25);
    console.log(cantidad);
    for(var v=0; v < cantidad; v++)
    {
      var x = aleatorio(0, 6);
      var y = aleatorio(0, 9);
      var x = x * 70;
      var y = y * 47;
      papel.drawImage(pollo.imagen, x, y);
    }
  }
}

function resetCanvas()
{
  {
    if(fondo.cargaOK)
    {
      papel.drawImage(fondo.imagen, 0, 0);
    }
    if(vaca.cargaOK)
    {
      var cantidad = aleatorio(5, 25);
      console.log(cantidad);
      for(var v=0; v < cantidad; v++)
      {
        var x = aleatorio(0, 6);
        var y = aleatorio(0, 9);
        var x = x * 70;
        var y = y * 47;
        papel.drawImage(vaca.imagen, x, y);
      }
    }
    if(pollo.cargaOK)
    {
      var cantidad = aleatorio(5, 25);
      console.log(cantidad);
      for(var v=0; v < cantidad; v++)
      {
        var x = aleatorio(0, 6);
        var y = aleatorio(0, 9);
        var x = x * 70;
        var y = y * 47;
        papel.drawImage(pollo.imagen, x, y);
      }
    }
  }
}
document.addEventListener("keydown", moverCerdo)

function moverCerdo(evento)
{
  console.log(evento.keyCode)
  switch (evento.keyCode) {
    case teclas.UP:
      var movimiento = 50;
      resetCanvas();
      papel.drawImage(cerdo.imagen, pigPosX, pigPosY - movimiento);
      pigPosY = pigPosY - movimiento
      ganarJuego();
    break;
    case teclas.DOWN:
      var movimiento = 50;
      resetCanvas();
      papel.drawImage(cerdo.imagen, pigPosX, pigPosY + movimiento);
      pigPosY = pigPosY + movimiento;
      ganarJuego();
    break;
    case teclas.RIGHT:
      var movimiento = 50;
      resetCanvas();
      papel.drawImage(cerdo.imagen, pigPosX + movimiento, pigPosY);
      pigPosX = pigPosX + movimiento;
      ganarJuego();
    break;
    case teclas.LEFT:
      var movimiento = 50;
      resetCanvas();
      papel.drawImage(cerdo.imagen, pigPosX - movimiento, pigPosY);
      pigPosX = pigPosX - movimiento;
    break;
    }
}


function ganarJuego()
{
  if(pigPosX * pigPosY == winPos)
  {
    alert("Felicidades, " + usuario + ", llevaste a tu cerdito a casa!")
    resetCanvas();
    pigPosX = 0
    pigPosY = 0
    dibujarCerdo();
  }
}
function aleatorio(min,maxi)
{
  var resultado;
  resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
  return resultado;
}

Uso y carga de im谩genes en Canvas

Lo aprendido en esta clase:
Aprendimos el orden de dibujo de un canvas y como funciona el orden de carga de un servidor.

Recuerda:
驴Qu茅 es el canvas?
El elemento HTML canvas (<canvas>) se puede utilizar para dibujar gr谩ficos a trav茅s de secuencias de comandos (por lo general JavaScript ). Por ejemplo, puede usarse para dibujar gr谩ficos, hacer composiciones de fotos o incluso realizar animaciones.
Fuente: https://developer.mozilla.org/es/docs/Web/HTML/Elemento/canvas

鈥 En programacion es una buena practica cuando tenemos la definicion de un objeto, le coloquemos de nombre a la primera letra una mayuscula.
鈥 A las definiciones completas de un objeto se le llaman clases.
鈥 la instancia de una clase es la creacion de un objeto de una clase.

  • canvas siempre dibuja encima del ultimo objeto.

hola buenas tarde este es mi logro estoy feliz con mi villa me costo pero lo logre

Quise cambiar por completo y buscar im谩genes para hacer el efecto de caminado, esto me sali贸 jaja:

_abajo dejo el c贸digo. _

隆Hola 馃榾!
Si tal vez alguien a estado teniendo problemas para realizar el movimiento del cerdito estos son algunos puntos que pueden tener en cuenta para esta tarea 馃槈

  • Primero naturalmente deben traer el codigo que se hizo anteriormente para poder que la pagina detecte cuando se levanta una tecla
var teclasFlechas = {
    UP: 38, 
    DOWN: 40, 
    LEFT: 37, 
    RIGHT: 39
};

document.addEventListener("keyup", moverCerdito)
  • Lo siguiente es que la pagina sepa cuales teclas se estan oprimiendo, esto tambien lo podemos hacer reciclando el codigo anterior con el switch; Todo esto claro dentro de la funcion que se dispara al oprimir cualquier tecla
switch (informacionEvento.keyCode) 
    {
        case teclasFlechas.UP:
            //Aqui es donde se mueve el cerdito hacia arriba
            break;
        case teclasFlechas.DOWN:
            //Aqui es donde se mueve el cerdito hacia abajo
            break;
        case teclasFlechas.LEFT:
            //Aqui es donde se mueve el cerdito hacia la izquierda
            break;
        case teclasFlechas.RIGHT:
            //Aqui es donde se mueve el cerdito hacia la derecha
            break;
    }
  • Lo que yo hice fue hacer que el cerdo aparezca siempre en la misma posicion y no en una aleatoria, ya que lo tome como si este fuera el personaje del jugador y la norma general es que este siempre aparece en una posicion concreta. Esto lo hice declarando las posiciones de los animales fuera de cualquier funcion para que este valor sea constante durante toda la ejecucion del codigo
//Establecer posicion inicial del cerdito
var xCerdo = 420;
var yCerdo = 20;

//Posiciones aleatorias de los animales
var xVaca = aleatorio(0, 420);
var yVaca = aleatorio(0, 420);

var xPollo = aleatorio(0, 420);
var yPollo = aleatorio(0, 420);
  • Ya sabiendo que la pagina detecta la accion de presionar teclas le vamos a dar la accion de que cada que se dispare el evento redibuje el cerdo en la posicion deseada. 驴Que tanto se movera el cerdo? Pues teniendo en cuenta que la imagen mide 80*80 hice que el movimiento fuera de ese tama帽o. Ahora aqui aparece un problema que puede frenar todo el proceso
switch (informacionEvento.keyCode) 
    {
        case teclasFlechas.UP:
            papel.drawImage(cerdo.imagen, xCerdo, yCerdo - movimiento);
            yCerdo = yCerdo - movimiento;
            break;

La cuestion es que el cerdito se mueve pero su imagen anterior no desaparece, por lo que da la impresion de que se esta creando uno nuevo en vez de estarse moviendo, la solucion a esto es que cada vez que llamemos a el movimiento del cerdito, redibujar el mapa entero , incluyendo a los otros animales de la granja, por eso era importante que los valores de la posicion de los animales se mantuviera constante a lo largo de todo el programa, asi ya podemos lograr un movimiento constante, sin cambios en las posiciones.
Si observamos la logica lo que se hace no es mover el cerdito sino redibujar el canvas entero cada que su posicion en las coordenadas se actualiza

Espero haya sido de utlidad 馃槈

Felicitaciones a todos los compa帽eros que han logrado hacer el reto!!! En particular no soy experta pero me gustan estos desaf铆os鈥 as铆 que comprendo a quienes les cuesta un poco鈥ero adelante, la pr谩ctica hace al maestro鈥

Comparto mi c贸digo鈥 las Vacas, Cerdos y Pollos se ubican aleatoriamente y mueve al Chupavacas con las flechas 馃槅馃懡

Navegador:

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>villa platzi</title>
        <style type="text/css">
        body
        {
            background-color: rgb(203, 162, 83);
            font-family: fantasy;
        }
        h1
        {
            color: rgb(46, 100, 46);
        }
        </style>
    </head>
    <body>
        <h1><strong>Vamos a jugar moviendo el chupavacas</strong></h1>
        <p1 style="position: absolute; top: 80px; left: 132px;">Mueve al chupavacas con las flechas!</p1>
        <P2 style="position: absolute; top: 620px; left: 25px;"><strong>By: Cristianco9</strong></p2>
        <canvas style="position: absolute; top: 100px; left: 23px;"  width = "500" height="500" id="villaplatzi"></canvas>
        <script src = "platzi.js"></script>
        <br>
    </body>
</html>

js

var a = document.getElementById("villaplatzi");
var lienzo = a.getContext("2d");
document.addEventListener("keyup", moverchupavacas);

var flechas =
{
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
}

var fondo =
{
    url: "tile.png",
    cargaOk: false
}

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

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

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

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

var cantidadVacas = aleatorio(1, 6);
var cantidadCerdos = aleatorio(2, 9);
var cantidadPollos = aleatorio(2, 12);

var posici贸nGanadoX = aleatorio(0, 440);
var posici贸nGanadoY = aleatorio(0, 440);

var posici贸nchupavacasX = aleatorio(0, 440);
var posici贸nchupavacasY = aleatorio(0, 440);

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", cargarCerdo);

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

chupavacas.imagen = new Image();
chupavacas.imagen.src = chupavacas.url;
chupavacas.imagen.addEventListener("load", cargarchupavacas);

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

function cargarVacas()
{
    vaca.cargaOk = true;
    dibujar();

};

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

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

function cargarchupavacas()
{
    chupavacas.cargaOk = true;
    dibujar();
};

function dibujar()
{
    if(fondo.cargaOk == true)
    {
        lienzo.drawImage(fondo.imagen, 0, 0);
    }

    if(vaca.cargaOk == true)
    {
         for( var v = 0; v < cantidadVacas; v++)
        {  
            posici贸nGanadoX = aleatorio(0, 10);
            posici贸nGanadoY = aleatorio(0, 10);
            posici贸nGanadoX = posici贸nGanadoX * 80;
            posici贸nGanadoY = posici贸nGanadoY * 80;
            lienzo.drawImage(vaca.imagen, posici贸nGanadoX, posici贸nGanadoY);
        }
    }

    if(cerdo.cargaOk == true)
    {
        for( var v = 0; v < cantidadCerdos; v++)
        {
            posici贸nGanadoX = aleatorio(0, 10);
            posici贸nGanadoY = aleatorio(0, 10);
            posici贸nGanadoX = posici贸nGanadoX * 80;
            posici贸nGanadoY = posici贸nGanadoY * 80;
            lienzo.drawImage(cerdo.imagen, posici贸nGanadoX, posici贸nGanadoY);
        }
    }

    if(pollo.cargaOk == true)
    {
        for( var v = 0; v < cantidadPollos; v++)
        {
            posici贸nGanadoX = aleatorio(0, 10);
            posici贸nGanadoY = aleatorio(0, 10);
            posici贸nGanadoX = posici贸nGanadoX * 80;
            posici贸nGanadoY = posici贸nGanadoY * 80;
            lienzo.drawImage(pollo.imagen, posici贸nGanadoX, posici贸nGanadoY);
        }
    }

    if(chupavacas.cargaOk == true)
    {  
            lienzo.drawImage(chupavacas.imagen, posici贸nchupavacasX, posici贸nchupavacasY);
    }
};

function moverchupavacas(evento)
{
    var movimientochupavacas = 5;
    switch(evento.keyCode)
    {
        case flechas.UP:
            dibujarFondo();
            dibujarVaca(posici贸nGanadoX, posici贸nGanadoY);
            dibujarPollo(posici贸nGanadoX, posici贸nGanadoY);
            dibujarCerdo(posici贸nGanadoX, posici贸nGanadoY);
            dibujarchupavacas(posici贸nchupavacasX, posici贸nchupavacasY - movimientochupavacas);
            posici贸nchupavacasY = posici贸nchupavacasY - movimientochupavacas;
        break;

        case flechas.DOWN:
            dibujarFondo();
            dibujarVaca(posici贸nGanadoX, posici贸nGanadoY);
            dibujarPollo(posici贸nGanadoX, posici贸nGanadoY);
            dibujarCerdo(posici贸nGanadoX, posici贸nGanadoY);
            dibujarchupavacas(posici贸nchupavacasX, posici贸nchupavacasY + movimientochupavacas);
            posici贸nchupavacasY = posici贸nchupavacasY + movimientochupavacas;
        break;

        case flechas.LEFT:
            dibujarFondo();
            dibujarVaca(posici贸nGanadoX, posici贸nGanadoY);
            dibujarPollo(posici贸nGanadoX, posici贸nGanadoY);
            dibujarCerdo(posici贸nGanadoX, posici贸nGanadoY);
            dibujarchupavacas(posici贸nchupavacasX, posici贸nchupavacasY - movimientochupavacas);
            posici贸nchupavacasX = posici贸nchupavacasX - movimientochupavacas;
        break;

        case flechas.RIGHT:
            dibujarFondo();
            dibujarVaca(posici贸nGanadoX, posici贸nGanadoY);
            dibujarPollo(posici贸nGanadoX, posici贸nGanadoY);
            dibujarCerdo(posici贸nGanadoX, posici贸nGanadoY);
            dibujarchupavacas(posici贸nchupavacasX, posici贸nchupavacasY + movimientochupavacas);
            posici贸nchupavacasX = posici贸nchupavacasX + movimientochupavacas;
        break;
    }
};

function aleatorio(min, max)
{
    var resultado;
    resultado = Math.floor(Math.random() * (max - min + 1)) + min;
    return resultado;
};

Buenas tardes a todos, les comparto mi resultado inicial. El c贸digo contiene el movimiento del cerdo por teclado ajustando aleatoriamente las vacas y los pollos cada vez que recargo la p谩gina. Adicionalmente, cuando el cerdo llega al l铆mite del canvas, se dispara una alerta indicando que no es posible sacarlo del mismo. Agradecer铆a comentariosy/o sugerencias para optimizar el c贸digo.

document.addEventListener("keyup", movimientoAnimal); //Evento teclado

var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");

var fondo = {
    url: "tile.png", 
    cargaOK: false
};

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

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

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

var teclas = {   //Teclas
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

var posVacas = {    //Arreglo posici贸n vacas
    vacasX: [],
    vacasY: []
};

var posPollos = {   //Arreglo posici贸n pollos
    pollosX: [],
    pollosY: []
};

var xCerdo = aleatorio(0, 420);   //Posici贸n inicial Cerdo
var yCerdo = aleatorio(0, 420);

var cantidad = aleatorio(5, 25);    //Cantidad de aleatoria de animales

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);

function cargarFondo()  //Confirma carga de imagen.
{
    fondo.cargaOK = true;
    dibujar();
}

function cargarVacas()
{
    vaca.cargaOK = true;
    dibujar();
}

function cargarCerdos()
{
    cerdo.cargaOK = true;
    dibujar();
}

function cargarPollos()
{
    pollo.cargaOK = true;
    dibujar();
}

function dibujar()  //Dibuja vacas y pollos en posiciones aleatorias.
{
    var i;

    if(fondo.cargaOK)
    {
        papel.drawImage(fondo.imagen, 0, 0);
    }
    if(vaca.cargaOK)
    {   
        console.log(cantidad);
        for(var i=0; i < cantidad; i++)
        {
            var x = aleatorio(0, 7);
            var y = aleatorio(0, 7);
            var x = x * 60;
            var y = y * 60;
            papel.drawImage(vaca.imagen, x, y);
            posVacas.vacasX[i] = x;
            posVacas.vacasY[i] = y;
        }
    }
    if(cerdo.cargaOK)
    {   
        papel.drawImage(cerdo.imagen, xCerdo, yCerdo);
    }
    if(pollo.cargaOK)
    {   
        console.log(cantidad);
        for(var i=0; i < cantidad; i++)
        {
            var x = aleatorio(0, 6);
            var y = aleatorio(0, 6);
            var x = x * 60;
            var y = y * 60;
            papel.drawImage(pollo.imagen, x, y);
            posPollos.pollosX[i] = x;
            posPollos.pollosY[i] = y;
        }
    }
}

function redibujar()    //Redibuja con posiciones de vacas y pollos bloqueada.
{
    var i
    papel.drawImage(fondo.imagen, 0, 0);

    for(var i=0; i < cantidad; i++)
    {
        papel.drawImage(vaca.imagen, posVacas.vacasX[i], posVacas.vacasY[i]);
    }
    
    papel.drawImage(cerdo.imagen, xCerdo, yCerdo);

    for(var i=0; i < cantidad; i++) 
    {
        papel.drawImage(pollo.imagen, posPollos.pollosX[i], posPollos.pollosY[i]);
    }
}

function aleatorio(min, maxi)   // Funcin de nmeros aleatorios.
{
    var resultado;
    resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
    return resultado; 
}

function movimientoAnimal(evento) //El animal se mueve.
{
    var movimiento = 10;
    switch(evento.keyCode)
    {
        case teclas.UP:
            if(0 <= yCerdo)
            {
                yCerdo = yCerdo - movimiento;
                redibujar();
            }
            else
            {
                alert("No se puede salir el cerdo");
            } 
        break;
        case teclas.DOWN:
            if(yCerdo <= 420)
            {
                yCerdo = yCerdo + movimiento;
                redibujar();
            }
            else
            {
                alert("No se puede salir el cerdo");
            }
        break;
        case teclas.LEFT:
            if(0 <= xCerdo)
            {
                xCerdo = xCerdo - movimiento;
                redibujar();
            }
            else
            {
                alert("No se puede salir el cerdo");
            }
        break;
        case teclas.RIGHT:
            if(xCerdo <= 420)
            {
                xCerdo = xCerdo + movimiento;
                redibujar();
            }
            else
            {
                alert("No se puede salir el cerdo");
            }             
        break;
        default:
            console.log("otra tecla");
        break;
    }
}```

Las vacas est谩n locas, pero el pollo se mueve con las flechas 馃槂

var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");
var movimiento = 10;

var fondo = {
  url: "tile.png",
  cargaOK: false
}
var vaca = {
  url: "vaca.png",
  cargaOK: false
}
var pollo = {
  url: "pollo.png",
  cargaOK: false
}
var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
}
var xPollo = 150;
var yPollo = 150;


var cantidad = aleatorio(0,10);
console.log(cantidad);

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);

pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
pollo.imagen.addEventListener("load", cargarPollos);
document.addEventListener("keydown", teclado);

function teclado(evento)
{
  switch (evento.keyCode)
  {
    case teclas.UP:
      yPollo = yPollo - movimiento;
      console.log(yPollo);
    break;
    case teclas.DOWN:
      yPollo = yPollo + movimiento;
      console.log(yPollo);
    break;
    case teclas.RIGHT:
      xPollo = xPollo + movimiento;
      console.log(xPollo);
    break;
    case teclas.LEFT:
      xPollo = xPollo - movimiento;
      console.log(xPollo);
    break;

  }
  dibujar();
}


function cargarFondo()
{
  fondo.cargaOK = true;
  dibujar();
}
function cargarVacas()
{
  vaca.cargaOK = true;
  dibujar();
}
function cargarPollos()
{
  pollo.cargaOK = true;
  dibujar();
}

function dibujar()
{
  if(fondo.cargaOK)
    {
      papel.drawImage(fondo.imagen,0,0);
    }
  if(vaca.cargaOK)
    {
      for(i=0;i<cantidad;i++)
      {
        var x = aleatorio(0, 7);
        var y = aleatorio(0, 7);
        x = x * 60;
        y = y * 60;
        papel.drawImage(vaca.imagen, x, y);
    }
    }
    if(pollo.cargaOK)
      {
        papel.drawImage(pollo.imagen, xPollo, yPollo)

        }

}
function aleatorio(min, max)
{
  var resultado;
  resultado = Math.floor((Math.random() * (max - min + 1))) +  min;
  return resultado;
}```

esto cuenta? 馃槀馃槀馃ぃ馃ぃ

Oh no鈥

No fue f谩cil, pero despu茅s de un gran esfuerzo creo que se logro el desafi贸!

<(function()
{
    var canvas=document.getElementById('villaplatzi');
    var ctx=canvas.getContext('2d');
    window.addEventListener('load',init,false);
    var teclas = 
    {
        KEY_ENTER:13,
        KEY_UP: 38,
        KEY_DOWN: 40,
        KEY_LEFT : 37,
        KEY_RIGHT : 39
    };

    var x=50,y=50;
    var lastPress=null;
    var pressing=[];
    var pause=true;
 
    function init()
    {   
        run();
        repaint();
    }
    function run(){
        setTimeout(run,50);
        act();
    }
    function repaint()
    {
        requestAnimationFrame(repaint);
        paint(ctx);
    }
    function act()
    {
        if(!pause)
        {
            // Move Rect
            if(pressing[teclas.KEY_UP])
                y-=10;
            if(pressing[teclas.KEY_RIGHT])
                x+=10;
            if(pressing[teclas.KEY_DOWN])
                y+=10;
            if(pressing[teclas.KEY_LEFT])
                x-=10;

            // Out Screen
            if(x>canvas.width)
                x=0;
            if(y>canvas.height)
                y=0;
            if(x<0)
                x=canvas.width;
            if(y<0)
                y=canvas.height;
        }
        // Pause/Unpause
        if(lastPress==teclas.KEY_ENTER)
        {
            pause=!pause;
            lastPress=null;
        }
    }

    function paint(ctx)
    {
        var fondo = 
        {
            url: "tile.png",
            cargaOk: false,
        };
        fondo.imagen = new Image();
        fondo.imagen.src = fondo.url;
        fondo.imagen.addEventListener("load", cargarfondo)
        function cargarfondo()
        {
            fondo.cargarOK = true;
            dibujar();
        }
        var vaca = 
        {
            url: "vaca.png",
            cargaOk: false,
        };
        vaca.imagen = new Image();
        vaca.imagen.src = vaca.url;
        vaca.imagen.addEventListener("load", cargarVaca)
        function cargarVaca()
        {
            vaca.cargaOk = true;
            dibujar();
        }
        var pollo = 
        {
            url: "pollo.png",
            cargaOk: false,
        };
        pollo.imagen = new Image();
        pollo.imagen.src = pollo.url;
        pollo.imagen.addEventListener("load", cargarPollo)
        function cargarPollo()
        {
            pollo.cargaOk = true;
            dibujar();
        }
        var cerdo = 
        {
            url: "cerdo.png",
            cargaOk: false,
        };
        cerdo.imagen = new Image();
        cerdo.imagen.src = cerdo.url;
        cerdo.imagen.addEventListener("load", cargarCerdo)
        function cargarCerdo()
        {
            cerdo.cargaOk = true;
            dibujar();
        }
        function dibujar()
        {
            if(fondo.cargarOK)
            {
                ctx.drawImage(fondo.imagen, 0, 0);
            }
            console.log(cerdo.cargaOk);
            if(vaca.cargaOk)
            {
                ctx.drawImage(vaca.imagen, 120, 300,);
                ctx.drawImage(vaca.imagen, 250, 100,);
            }
            if(pollo.cargaOk)
            {
                ctx.drawImage(pollo.imagen, 410, 50,);
                ctx.drawImage(pollo.imagen, 310, 350,);
            }
            if(cerdo.cargaOk)
            {
                ctx.drawImage(cerdo.imagen, x, y,);
            }
            if(pause)
            {
                ctx.textAlign='center';
                ctx.fillStyle='#fff';
                ctx.fillText('PAUSE - PRESS ENTER',150,75);
                ctx.textAlign='left';
            }
        }
    }

    document.addEventListener('keydown',function(evt)
    {
        lastPress=evt.keyCode;
        pressing[evt.keyCode]=true;
    },false);

    document.addEventListener('keyup',function(evt)
    {
        pressing[evt.keyCode]=false;
    },false);

    window.requestAnimationFrame=
    (
        function()
        {
            return window.requestAnimationFrame || 
                window.webkitRequestAnimationFrame || 
                window.mozRequestAnimationFrame || 
                function(callback){window.setTimeout(callback,17);};
        }
    )();
}
)();>

Guau, eso cost贸. El c贸digo crea vacas al azar y las redibuja, lo mismo con los pollos, y crea al cerdito y permite moverlo con las teclas. Tuve que aprender a crear arrays y agregarles datos con el m茅todo push. Seguramente mi c贸digo no est谩 muy depurado, ni debe ser la forma m谩s simple de hacerlo, pero, 隆funciona!. Agregu茅 comentarios de como y cuando cre茅 los arreglos por si a alguien le sirve para comprender el c贸digo.

C贸digo JS:

document.addEventListener("keyup", moverCerdo);
var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
}
var vp = document.getElementById("villapoban");
var papel = vp.getContext("2d");
var fondo = new Image();
fondo.addEventListener("load", cargarFondo);
var x = 150;
var y = 150;
var fondo = {
  url: "tile.png",
  cargaOK: false
};
var vaca = {
  url: "vaca.png",
  cargaOK: false
};
var cerdo = {
  url: "cerdo.png",
  cargaOK: false
};
var pollo = {
  url: "pollo.png",
  cargaOK: false
};
/*Creo una variable para que haga random en la primera pasada y poder agregar un "else"  para que las pasadas posteriores no sean random*/
var primeraPasadaVacas = true;
var primeraPasadaPollos = true;
/*Creo dos arreglos para recordar las posiciones de las vacas y los pollos en pasadas posteriores a la primera*/
var todasLasVacas = [];
var todosLosPollos = [];



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", cargarCerdo);

pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
pollo.imagen.addEventListener("load", cargarPollos);

function cargarFondo()
{
  fondo.cargaOK = true;
  dibujar();
}
function cargarVacas()
{
  vaca.cargaOK = true;
  dibujar();
}
function cargarCerdo()
{
  cerdo.cargaOK = true;
  dibujar();
}
function cargarPollos()
{
  pollo.cargaOK = true;
  dibujar();
}
function dibujar()
{
  if(fondo.cargaOK)
  {
    papel.drawImage(fondo.imagen, 0, 0);
  }
  if(vaca.cargaOK)
  {
    if (primeraPasadaVacas)
    {
        for(var v=0; v < 10; v++)
        {
        var x = aleatorio(0,7);
        var y = aleatorio(0,7);
        var x = x * 60;
        var y = y * 60;
        papel.drawImage(vaca.imagen, x, y);
        /*Agrego las posiciones x e y de cada vaca en el arreglo*/
        todasLasVacas.push(x, y);
        }
        primeraPasadaVacas = false;
    }
    else {
      for (var i = 0; i < todasLasVacas.length; i=i+2)
      {
        x=todasLasVacas[i];
        y=todasLasVacas[i+1];
        papel.drawImage(vaca.imagen, x, y);
      }
    }
  }
  if(cerdo.cargaOK)
  {
    movimiento = 7;
      moverCerdo(movimiento);
  }
  if(pollo.cargaOK)
  {
    if (primeraPasadaPollos)
    {
        for(var v=0; v < 7; v++)
        {
        var x = aleatorio(0,7);
        var y = aleatorio(0,7);
        var x = x * 60;
        var y = y * 60;
        papel.drawImage(pollo.imagen, x, y);
        /*Agrego las posiciones x e y de cada pollo en el arreglo*/
        todosLosPollos.push(x, y);
        }
        primeraPasadaPollos = false;
    }
    else {
      for (var i = 0; i < todosLosPollos.length; i=i+2)
      {
        x=todosLosPollos[i];
        y=todosLosPollos[i+1];
        papel.drawImage(pollo.imagen, x, y);
      }
    }
  }
}

function moverCerdo (evento)
{
  var movimiento = 7;
  switch (evento.keyCode)
  {
    case teclas.UP:
    y = y - movimiento;
    dibujar();
    break;
    case teclas.DOWN:
    y = y + movimiento;
    dibujar();
    break;
    case teclas.LEFT:
    x = x - movimiento;
    dibujar();
    break;
    case teclas.RIGHT:
    x = x + movimiento;
    dibujar();
    break;
    default:
    papel.drawImage(cerdo.imagen, x, y);
  }
}
function aleatorio(min, maxi)
{
  var resultado;
  resultado = Math.floor(Math.random() * (maxi - min +1)) + min;
  return resultado;
}

C贸digo HTML:

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Villa Poban</title>
    <h1>隆Mueve el cerdito con las teclas y observa absorto como no hace nada!</h1>
  </head>
  <body>
    <canvas width="500" height="500" id="villapoban"></canvas>
    <script src="poban.js"></script>
  </body>
</html>

Hola aqu铆 les traigo los dos retos resueltos.

  • Vacas y cerdos aleatorios en posiciones aleatorias.
  • Un pollo que se mueve sin salirse del papel de Canvas, que no deja rastro, y que adem谩s, al moverse no se mueven los dem谩s animales.
    Acu茅rdense que hay que dividir un problema grande en muchos peque帽os.
    Dicho eso, para que los dem谩s animales no se muevan cuando el personaje se mueve, debemos guardar sus posiciones, cierto?
    Y cada que se mueva el personaje, volver a dibujar el escenario, pero con todos los animales en donde estaban.
    Por ello, la aleatoriedad solo se usa para el dibujo inicial, posteriormente usamos las posiciones de X,Y de todas las vacas y todos los cerdos para volverlos a dibujar tantas veces como movamos al personaje.
    Para guardar dichas posiciones es claro que debemos usar: arreglos.
    Para la implementaci贸n me bas茅 en alguien que lo resolvi贸 ac谩 m谩s abajo en los comentarios, lo importante es que todos aprendamos ayud谩ndonos.








Yo introduje una condici贸n que ayuda a que no te queden encimados los animales del mismo tipo, los recorre 10x10 pixeles. No ayuda a ver claramente todos los animales que hay.
Creando dentro de cada objeto variables de tipo array que guardaran las coordenadas de 鈥渪鈥 y 鈥測鈥 de cada animal.
Y complete el desafi贸, puedo mover todos los animales, primero muevo a 1 vaca, y cada que se presione la tecla espacio, cambia de animal.

<code>
var dibujito = document.getElementById("villitaPlatzi");
var lienzo = dibujito.getContext("2d");

var cantidad;
var animales;

var fondo = {
  url: "tile.png",
  cargaOK: false
};

var vaca = {
  url: "vaca.png",
  cargaOK: false,
  numero: 0,
  cont: 0,
  x: [],
  y: []
};

var pollo = {
  url: "pollo.png",
  cargaOK: false,
  numero: 0,
  cont: 0,
  x: [],
  y: []
};

var cerdo = {
  url: "cerdo.png",
  cargaOK: false,
  numero: 0,
  cont: 0,
  x: [],
  y: []
};

var teclas = {
  ESPACIO: 32,
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40
};

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);

pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
pollo.imagen.addEventListener("load", cargarPollos);

cerdo.imagen = new Image();
cerdo.imagen.src = cerdo.url;
cerdo.imagen.addEventListener("load", cargarCerdos);

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

function cargarVacas(){
  vaca.cargaOK = true;
  obtenerVacas();
}

function cargarPollos(){
  pollo.cargaOK = true;
  obtenerPollos();
}

function cargarCerdos(){
  cerdo.cargaOK = true;
  obtenerCerdos();
}

function obtenerVacas(){
  if (vaca.cargaOK){
    vaca.numero = aleatorio(0, 5);
    console.log("Vacas: " + vaca.numero);
    for(var cont = 0; cont < vaca.numero; cont++){
      vaca.x[cont] = aleatorio(0, 7);
      vaca.y[cont] = aleatorio(0, 7);
      vaca.x[cont] = vaca.x[cont]*60;
      vaca.y[cont] = vaca.y[cont]*60;
      for(var i = 0; i < cont; i++){
        if(vaca.x[cont] == vaca.x[i] && vaca.y[cont] == vaca.y[i]){
          vaca.x[cont] = vaca.x[cont] + 10;
          vaca.y[cont] = vaca.y[cont] + 10;
        }
      }
      console.log("x: " + vaca.x[cont] + ", y: " + vaca.y[cont]);
    }
    dibujar();
    document.addEventListener("keydown", moverConTeclado);
  }
}

function obtenerCerdos(){
  if (cerdo.cargaOK){
    cerdo.numero = aleatorio(0, 5);
    console.log("Cerdos: " + cerdo.numero);
    for(var cont = 0; cont < cerdo.numero; cont++){
      cerdo.x[cont] = aleatorio(0, 7);
      cerdo.y[cont] = aleatorio(0, 7);
      cerdo.x[cont] = cerdo.x[cont]*60;
      cerdo.y[cont] = cerdo.y[cont]*60;
      for(var i = 0; i < cont; i++){
        if(cerdo.x[cont] == cerdo.x[i] && cerdo.y[cont] == cerdo.y[i]){
          cerdo.x[cont] = cerdo.x[cont] + 10;
          cerdo.y[cont] = cerdo.y[cont] + 10;
        }
      }
      console.log("x: " + cerdo.x[cont] + ", y: " + cerdo.y[cont]);
    }
    dibujar();
  }
}

function obtenerPollos(){
  if (pollo.cargaOK){
    pollo.numero = aleatorio(0, 5);
    console.log("Pollos: " + pollo.numero);
    for(var cont = 0; cont < pollo.numero; cont++){
      pollo.x[cont] = aleatorio(0, 7);
      pollo.y[cont] = aleatorio(0, 7);
      pollo.x[cont] = pollo.x[cont]*60;
      pollo.y[cont] = pollo.y[cont]*60;
      for(var i = 0; i < cont; i++){
        if(pollo.x[cont] == pollo.x[i] && pollo.y[cont] == pollo.y[i]){
          pollo.x[cont] = pollo.x[cont] + 10;
          pollo.y[cont] = pollo.y[cont] + 10;
        }
      }
      console.log("x: " + pollo.x[cont] + ", y: " + pollo.y[cont]);
    }
    dibujar();
  }
}

function dibujar(){
  if (fondo.cargaOK){
    lienzo.drawImage(fondo.imagen, 0, 0);
  }
  for(var cont = 0; cont < vaca.numero; cont++){
    lienzo.drawImage(vaca.imagen, vaca.x[cont], vaca.y[cont]);
  }
  for(var cont = 0; cont < cerdo.numero; cont++){
    lienzo.drawImage(cerdo.imagen, cerdo.x[cont], cerdo.y[cont]);
  }
  for(var cont = 0; cont < pollo.numero; cont++){
    lienzo.drawImage(pollo.imagen, pollo.x[cont], pollo.y[cont]);
  }
}

function moverConTeclado(evento){
  var movimiento = 10;
  switch(evento.keyCode){
    case teclas.LEFT:
      if(vaca.cont < vaca.numero){
        vaca.x[vaca.cont] = vaca.x[vaca.cont] - 10;
      }
      else if(pollo.cont < pollo.numero){
        pollo.x[pollo.cont] = pollo.x[pollo.cont] - 10;
      }
      else if(cerdo.cont < cerdo.numero){
        cerdo.x[cerdo.cont] = cerdo.x[cerdo.cont] - 10;
      }
      dibujar();
    break;
    case teclas.UP:
      if(vaca.cont < vaca.numero){
        vaca.y[vaca.cont] = vaca.y[vaca.cont] - 10;
      }
      else if(pollo.cont < pollo.numero){
        pollo.y[pollo.cont] = pollo.y[pollo.cont] - 10;
      }
      else if(cerdo.cont < cerdo.numero){
        cerdo.y[cerdo.cont] = cerdo.y[cerdo.cont] - 10;
      }
      dibujar();
    break;
    case teclas.RIGHT:
      if(vaca.cont < vaca.numero){
        vaca.x[vaca.cont] = vaca.x[vaca.cont] + 10;
      }
      else if(pollo.cont < pollo.numero){
        pollo.x[pollo.cont] = pollo.x[pollo.cont] + 10;
      }
      else if(cerdo.cont < cerdo.numero){
        cerdo.x[cerdo.cont] = cerdo.x[cerdo.cont] + 10;
      }
      dibujar();
    break;
    case teclas.DOWN:
      if(vaca.cont < vaca.numero){
        vaca.y[vaca.cont] = vaca.y[vaca.cont] + 10;
      }
      else if(pollo.cont < pollo.numero){
        pollo.y[pollo.cont] = pollo.y[pollo.cont] + 10;
      }
      else if(cerdo.cont < cerdo.numero){
        cerdo.y[cerdo.cont] = cerdo.y[cerdo.cont] + 10;
      }
      dibujar();
    break;
    case teclas.ESPACIO:
      if(vaca.cont < vaca.numero){
        vaca.cont++;
      }
      else if(pollo.cont < pollo.numero){
        pollo.cont++;
      }
      else if(cerdo.cont < cerdo.numero){
        cerdo.cont++;
      }
      else{
        vaca.cont = 0;
        pollo.cont = 0;
        cerdo.cont = 0;
      }
    break;
    default:
      console.log("Otra Tecla");
    break;
  }
}

function aleatorio(min, max){
  var resultado;
  resultado = Math.floor(Math.random() * (max - min + 1)) + min;
  return resultado;
}

He programado un peque帽o juego que aumenta tu puntuaci贸n 10 unidades cada vez que mueves al cerdo con las flechas sin tocar a una vaca y que pierde de lo contrario.

var vp = document.getElementById("villaplatzi"); //Elemento canvas del html
var papel = vp.getContext("2d");
var vacasX;
var vacasY;

var fondo={
  url: "tile.png",
  cargaOK: false
}
var vaca = {
  url: "vaca.png",
  cargaOK: false
};

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

var pollo = {
  url: "pollo.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", cargarVaca);

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

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

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

function  cargaCerdo(){
  cerdo.cargaOK=true;
  dibujar();
}


function dibujar(){
  var cantidad;
  var x, y;

  if(fondo.cargaOK)
    papel.drawImage(fondo.imagen, 0,0);

  if(vaca.cargaOK){
    cantidad = aleatorio(1, 20);
    console.log(cantidad);
    vacasX = [cantidad];
    vacasY = [cantidad];
    for( var v=0; v<cantidad; v++){
      x = aleatorio(0, 6)*70;
      y = aleatorio(0, 6)*70;
      vacasX[v] = x;
      vacasY[v] = y;
      papel.drawImage(vaca.imagen, x,y);
    }
  }

  if(cerdo.cargaOK){
      xCerdo = aleatorio(0, 6)*70;
      yCerdo = aleatorio(0, 6)*70;
      while(ocupaPosVacas(xCerdo, yCerdo)){
        xCerdo = aleatorio(0, 6)*70;
        yCerdo = aleatorio(0, 6)*70;
      }
      papel.drawImage(cerdo.imagen, xCerdo,yCerdo);
  }
}

function ocupaPosVacas( x, y){
  var i=0;
  while(i<vacasX.length && (x != vacasX[i] || y != vacasY[i]) ){
      i++;
  }
  if(i == vacasX.length)
    return false;
  else
    return true;
}

function aleatorio(min, max){
  var resultado;
  resultado = Math.floor( Math.random() * (max - min + 1) ) + min ;
  return resultado;
}

//Funcionalidad juego:
var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};

document.addEventListener("keydown", mueveCerdo);

var orilla = true;

function mueveCerdo(evento){
  switch(evento.keyCode){

    case teclas.UP:
      if(yCerdo>0){
        orilla=false;
        yCerdo = yCerdo - 70;
      }
      else {
        orilla=true;
      }
    break;

    case teclas.DOWN:
      if(yCerdo <=360){
        orilla=false;
        yCerdo = yCerdo + 70;
      }
      else {
        orilla=true;
      }
    break;

    case teclas.LEFT:
      if(xCerdo>0){
        orilla=false;
        xCerdo = xCerdo - 70;
      }
      else {
        orilla=true;
      }
    break;

    case teclas.RIGHT:
      if(xCerdo<=360){
        orilla=false;
        xCerdo = xCerdo + 70;
      }
      else {
        orilla=true;
      }
    break;

    default:
      console.log("OTRA TECLA");
  }

  if(!orilla){
    if(!ocupaPosVacas(xCerdo, yCerdo)){
      reDibujar();
      var pts = parseInt( document.getElementById("puntos").innerHTML);
      document.getElementById("puntos").innerHTML= pts+10;
    }
    else {
      reDibujar();
      document.removeEventListener("keydown", mueveCerdo);
      document.getElementById("message").innerHTML= "Game over!";
      document.getElementById("sidebar").style.backgroundColor = "#e74c3c";
      /*
      var button = document.createElement("button");
      button.innerHTML = "Jugar de nuevo";
      button.addEventListener("onClick", console.log(event));
      document.getElementById("btn").appendChild(button);
      */
    }
  }
}


function reDibujar(){
    if(fondo.cargaOK)
      papel.drawImage(fondo.imagen, 0,0);

    if(vaca.cargaOK)
      for(var i = 0 ; i < vacasX.length ; i++) {
        papel.drawImage(vaca.imagen, vacasX[i] , vacasY[i]);
      }
    if(cerdo.cargaOK)
      papel.drawImage(cerdo.imagen, xCerdo,yCerdo);

}

Hice un dark souls en 2D

segundo desafio me tomo un poco de tiempo pero lo logre, sin los comentarios 馃槂

// variables para cargar imagenes
var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");

var fondo = {
	url: "tile.png",
	cargaOk: false
}

var cerdoM = {
	url: "cerdo.png",
	cargaOk: false,
	movimiento: 10
};
//varialbes para movimiento 
var teclas = {
	UP: 38,
	DOWN: 40,
	LEFT: 37,
	RIGHT: 39
};

var xa = aleatorio(0, 7);
var ya = aleatorio(0, 7);
xa = xa * 60;
ya = ya * 60;

//registrar eventos de carga de imagenes
fondo.imagen = new Image();
fondo.imagen.src = fondo.url;
fondo.imagen.addEventListener("load", cargarFondo);

cerdoM.imagen = new Image();
cerdoM.imagen.src = cerdoM.url;
cerdoM.imagen.addEventListener("load", cargarCerdosM);

//registrar eventos de movimiento
document.addEventListener("keydown", mover);

//funciones de dibujo de imagenes
function cargarFondo(){
	fondo.cargaOk = true;
	dibujar();
}

function cargarCerdosM(){
	cerdoM.cargaOk = true;
	dibujar();
}

function dibujar(){
	if(fondo.cargaOk){
		papel.drawImage(fondo.imagen, 0,0);
	}
	if(cerdoM.cargaOk){
		papel.drawImage(cerdoM.imagen, xa,ya)
	}
}

//funciones de movimiento
function mover(evento){
	switch(evento.keyCode){
		case teclas.UP:
			ya = ya - cerdoM.movimiento;
			dibujar(xa, ya);
		break;
		
		case teclas.DOWN:
			ya = ya + cerdoM.movimiento;
			dibujar(xa, ya);
		break;

		case teclas.LEFT:
			xa = xa - cerdoM.movimiento;
			dibujar(xa,ya);
		break;

		case teclas.RIGHT:
			xa = xa + cerdoM.movimiento;
			dibujar(xa ,ya);
		break;
	}
}

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

Hola, en mi caso para no tener que escribir tantos 鈥渋f鈥 uno dentro de otro lo que hice fue ocupar un 鈥&&鈥 dentro de la condicion para anadir otra condicion, asi me quedo:

  if (mapa.check == true && vaca.check == true && cerdo.check == true && pollo.check == true  )
{el codigo de impresion de los animales}

Al fin logr茅 mover al cerdo sin que los dem谩s animales se muevan, us茅 posiciones iniciales (todos random) que guard茅 en vectores, y luego no los cambi茅, s贸lo cambia la posici贸n del cerdo con las teclas.

Variables necesarias

Las funciones para las posiciones iniciales

Los objetos

Las funciones de carga

La funci贸n dibujar
Captura de pantalla_2020-06-20_23-36-40.png

Moviendo al cerdo con las teclas!!

ALGUIEN QUE ME PUEDA AYUDAR. PORQUE MI CERDITO VA DEJANDO MAS CERDITOS EN LUGAR DE MOVERSE SOLO UNO?

teclas=
{
UP:38,
DOWN:40,
LEFT:37,
RIGHT:39,
};

console.log(teclas);

var vp = document.getElementById(鈥渧illaplatzi鈥);
var papel = vp.getContext(鈥2d鈥);
mapa=鈥渢ile.png鈥;

fondo=new Image();
fondo.src=mapa;
fondo.addEventListener(鈥渓oad鈥,dibujar);

cerdo=new Image();
cerdo.src=鈥渃erdo.png鈥;
cerdo.addEventListener(鈥渓oad鈥,dibujarCerdo);

function dibujar()
{
papel.drawImage(fondo,0,0);
}

function dibujarCerdo()
{
papel.drawImage(cerdo,x,y);
}

document.addEventListener(鈥渒eydown鈥,moverCerdo);
x=0;
y=0;

function moverCerdo(evento)
{

movimiento=3;
switch(evento.keyCode)
{
case teclas.UP:
y=y-movimiento;
dibujarCerdo();
console.log(鈥渁rriba鈥);
break;

   case teclas.DOWN:
    y=y+movimiento;
   dibujarCerdo();
       console.log("abajo");
       break;

       case teclas.LEFT:
        x=x-movimiento;
        dibujarCerdo();
        console.log("izquierda");
        break;

        case teclas.RIGHT:
            x=x+movimiento;
            dibujarCerdo();
            console.log("derecha");
            break;

}
}

Esta es mi respuesta al desafio: nota: incorpor茅 un cuervo (PedroCuervo) que es la figura que se mueve, en vez de un cerdo

platzi.js

var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");
//queremos una cantidad aleatoria de cargarVacas
var cantVacas = aleatorio(1, 6);
var cantPollos = aleatorio(1, 7);
var cantCerdos = aleatorio(1, 4);
//creamos arreglos con las posiciones de los animales
//para que se mantengan en su lugar mientras pedroCuervo se muerve

var arregloVacas = new Array(cantVacas);
for (iv = 0; iv < cantVacas; iv++)
{
  arregloVacas[iv] = new Array();
}

var arregloPollos = new Array(cantPollos);
for (ip = 0; ip < cantPollos; ip++)
{
  arregloPollos[ip] = new Array();
}

var arregloCerdos = new Array(cantCerdos);
for (ic = 0; ic < cantCerdos; ic++)
{
  arregloCerdos[ic] = new Array();
}
//creamos un objeto literal para poder controlar el orden de carga y dibujando
// de losobjetos
var fondo = {
  url:"../images/tile.png",
  cargaOK: false
};

var vaca = {
  url:"../images/vaca.png",
  cargaOK: false
};
var pollo = {
  url: "../images/pollo.png",
  cargaOK: false
};
var cerdo = {
  url: "../images/cerdo.png",
  cargaOK: false
};
var pedroCuervo = {
  url: "../images/pedroCuervo.png",
  cargaOK: false
};
var xPc = 0;
var yPc = 0;
var teclas = {
  UP:38,
  DOWN: 40,
  LEFT: 37,
  RIGHT:39
};
var pasos = 10;

//crearemos un onuevo objeto (la imagen) del fondo
fondo.imagen = new Image(); //creamos una estancia del objeto image
fondo.imagen.src = fondo.url; //direccion de la instancia
fondo.imagen.addEventListener("load", cargarFondo); // hay que cargarla primero

// creamos las imagenes de  los elementos m貌viles

vaca.imagen = new Image();
vaca.imagen.src = vaca.url;
vaca.imagen.addEventListener("load", cargarVacas);

pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
pollo.imagen.addEventListener("load", cargarPollos);

cerdo.imagen = new Image();
cerdo.imagen.src = cerdo.url;
cerdo.imagen.addEventListener("load", cargarCerdos);
// pedroCuervo se mueve

pedroCuervo.imagen = new Image();
pedroCuervo.imagen.src = pedroCuervo.url;
pedroCuervo.imagen.addEventListener("load", cargaPedroCuervo);

document.addEventListener("keydown", muevePedro);
//
//probando generar nros aleatorios
//var z;
//var min = 5;
//var maxi = 0;
//for (var i = 0; i<10; i++)
//{
//  z = aleatorio(min, maxi);
//  document.write(z + ", ");
//}

//area de funciones
//cargar imagenes
function cargarFondo()
{
  fondo.cargaOK = true;
  dibujar();
}
function cargarVacas()
{
  vaca.cargaOK = true;
  dibujar();
}
function cargarPollos()
{
  pollo.cargaOK = true;
  dibujar();
}
function cargarCerdos()
{
  cerdo.cargaOK = true;
  dibujar();
}
function cargaPedroCuervo()
{
  pedroCuervo.cargaOK = true;
  dibujar();
}
//dibujando


function dibujar()

{
  if (fondo.cargaOK)
  {
    papel.drawImage(fondo.imagen, 0, 0);
  }
  if (vaca.cargaOK) // se cumple s貌lo cuando es true
  {
    console.log(cantVacas);
    for(var v = 0; v < cantVacas; v++)
    {
      var x = aleatorio(1, 7);
      var y = aleatorio(1, 7);
      x = x * 60;
      y = y * 60;
      papel.drawImage(vaca.imagen, x, y);
      //cargamos en el arreglo las posiciones
      arregloVacas[v][0] = x;
      arregloVacas[v][1] = y;
    }

  }
  if (cerdo.cargaOK) // se cumple s貌lo cuando es true
  {
    console.log(cantCerdos);
    for(var k = 0; k < cantCerdos; k++)
    {
      var xC = aleatorio(1, 4);
      var yC = aleatorio(1, 4);
      xC = xC * 60;
      yC = yC * 60;
      papel.drawImage(cerdo.imagen, xC, yC);
      //cargamos en el arreglo las posiciones
      arregloCerdos[k][0] = xC;
      arregloCerdos[k][1] = yC;
    }

  }
  if (pollo.cargaOK) // se cumple s貌lo cuando es true
  {
    console.log(cantPollos);
    for(var s = 0; s < cantPollos; s++)
    {
      var xP = aleatorio(1, 7);
      var yP = aleatorio(1, 7);
      xP = xP * 60;
      yP = yP * 60;
      papel.drawImage(pollo.imagen, xP, yP);
      //cargamos en el arreglo las posiciones
      arregloPollos[s][0] = xP;
      arregloPollos[s][1] = yP;
    }

  }
  if (pedroCuervo.cargaOK)
  {
    xPc = aleatorio(1, 12);
    yPc = aleatorio(1, 12);
    xPc = xPc * 60;
    yPc = yPc * 60;
    papel.drawImage(pedroCuervo.imagen, xPc, yPc);
  }
}

function muevePedro(evento)
{
  switch (evento.keyCode)
  {
    case teclas.UP:
      if (yPc == 0)
      {
        alert("Pedro Cuervo: no puede salirse de la granja!!!!")
      }else
      {
        yPc = yPc - pasos;
        pasosPedro(xPc, yPc);
      }
      break;
    case teclas.DOWN:
      if (yPc == 460)
      {
        alert("Pedro Cuervo: no puede salirse de la granja!!!!")
      }else
      {
        yPc = yPc + pasos;
        pasosPedro(xPc, yPc);
      }
      break;
    case teclas.LEFT:
     if (xPc == 0)
     {
       alert("Pedro Cuervo: no puede salirse de la granja!!!!")
     }else
     {
       xPc = xPc - pasos;
       pasosPedro(xPc, yPc);
     }
      break;
    case teclas.RIGHT:
     if (xPc == 460)
     {
       alert("Pedro Cuervo: no puede salirse de la granja!!!!")
     }else
     {
       xPc = xPc + pasos;
       pasosPedro(xPc, yPc);
     }
      break;
    default:
      alert("!!UPS!!! tecla no v脿lida!!!!");
      break;

  }
}

function pasosPedro()
{
  if (fondo.cargaOK)
  {
    papel.drawImage(fondo.imagen, 0, 0);
  }
  if (vaca.cargaOK) // se cumple s貌lo cuando es true
  {
    for(var v = 0; v < cantVacas; v++)
    {
      var x = arregloVacas[v][0];
      var y = arregloVacas[v][1];
      papel.drawImage(vaca.imagen, x, y);
    }

  }
  if (cerdo.cargaOK) // se cumple s貌lo cuando es true
  {
    for(var k = 0; k < cantCerdos; k++)
    {
      var xC = arregloCerdos[k][0];
      var yC = arregloCerdos[k][1];
      papel.drawImage(cerdo.imagen, xC, yC);
    }

  }
  if (pollo.cargaOK) // se cumple s貌lo cuando es true
  {
    for(var s = 0; s < cantPollos; s++)
    {
      var xP = arregloPollos[s][0];
      var yP = arregloPollos[s][1];
      papel.drawImage(pollo.imagen, xP, yP);
    }

  }
  if (pedroCuervo.cargaOK)
  {
    papel.drawImage(pedroCuervo.imagen, xPc, yPc);
  }
}

function aleatorio(min,maxi)
{
  var resultado;
  resultado = Math.floor(Math.random()*(maxi - min + 1)) + min;
  return resultado;
}
console.log();

Les comparto el c贸digo que utilic茅 para mover el cerdo por todo el canvas, sin embargo, lo que no logr茅 fue guardar las posiciones de las vacas y pollos 馃槮

var VP = document.getElementById("villaPlatzi");
var papel = VP.getContext("2d");

var limiteX = parseInt(VP.width) - 80;
var limiteY = parseInt(VP.height) - 80;

var cerditoX;
var cerditoY;

var cantidadVacas = aleatorio(1, 5);
var cantidadCerdos = aleatorio(1, 3);
var cantidadPollos = aleatorio(1, 4);

document.addEventListener("keyup", moverCerdito);

var teclas = {
    UP : 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

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

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

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

var pollo = {
  url: "pollo.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", cargarVaca);

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

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

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

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

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

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

function dibujarCerdito(x, y) {
  if (x < limiteX && y < limiteY) {
    cerdo.cargaOK = false;
    dibujar();
    papel.drawImage(cerdo.imagen, x, y);
  }else{
    console.log("Te pasaste del limite!!!");
  }
  console.log(limiteX);
  console.log(limiteY);
}

function dibujar() {

  if (fondo.cargaOK) {
    papel.drawImage(fondo.imagen, 0, 0);
  }

  if (vaca.cargaOK) {
    for (var i = 0; i < cantidadVacas; i++) {
      papel.drawImage(vaca.imagen, valorX(limiteX), valorY(limiteY));
    }
  }

  if (cerdo.cargaOK) {
    cerditoX =  valorX(limiteX);
    cerditoY =  valorY(limiteY);
    papel.drawImage(cerdo.imagen, cerditoX, cerditoY);
    //dibujarCerdito();
  }
  //
  // if (cerdo.cargaOK) {
  //   for (var i = 0; i < cantidadCerdos; i++) {
  //     papel.drawImage(cerdo.imagen, aleatorio(0, limiteX), aleatorio(0, limiteY));
  //   }
  // }
  //
   if (pollo.cargaOK) {
     for (var i = 0; i < cantidadPollos; i++) {
     papel.drawImage(pollo.imagen, aleatorio(0, valorX(limiteX)), aleatorio(0, valorY(limiteY)));
    }
   }
}

function moverCerdito(event) {
    switch (event.keyCode) {
      case teclas.UP:
        dibujarCerdito(cerditoX, cerditoY - 40);
        cerditoY = cerditoY - 40;
        break;
      case teclas.DOWN:
        dibujarCerdito(cerditoX, cerditoY + 40);
        cerditoY = cerditoY + 40;
      break;
      case teclas.LEFT:
        dibujarCerdito(cerditoX - 40, cerditoY);
        cerditoX = cerditoX - 40;
      break;
      case teclas.RIGHT:
        dibujarCerdito(cerditoX + 40, cerditoY);
        cerditoX = cerditoX + 40;
      break;
      default:
        console.log("khe :v");
      break;
    }
}

function valorX(ancho) {
  var x = ancho / 90;
  var n = aleatorio(0, parseInt(x));
  n = n * 70;
  return n;
}

function valorY(alto) {
  var y = alto / 90;
  var n = aleatorio(0, parseInt(y));
  n = n * 40;
  return n;
}

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

隆Esta es mi respuesta al desafio!

El c贸digo est谩 comentado, espero le funcione a alguien.

// Creamos un JSON con los keycodes de las teclas arrow
var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

//Creamos las coordenadas de nuestro cerdo en X y Y y colocamos desde donde queremos que inicie
var cerdoX = 170;
var cerdoY = 170;

// Agregamos un event listener al objeto Document y creamos la funcion que movera a nuestro cerdo
document.addEventListener("keydown", moverCerdo);

// Creamos el objeto vp que nos funcionara para instanciar al elemento villaplatzi del HTML
var vp = document.getElementById('villaplatzi');

//creamos la variable paper que utilizaremos como un lienzo, trayendo el contexto 2D.
var paper = vp.getContext("2d");

//JSON para almacenar urls y estados de carga de cada imagen.
var background = {
    url: "assets/tile.png",
    loadOK: false
}
var vaca = {
    url: "assets/vaca.png",
    loadOK: false
}
var cerdo = {
    url: "assets/cerdo.png",
    loadOK: false
}
var pollo = {
    url: "assets/pollo.png",
    loadOK: false
}

// variable que almacena una cantidad random de 1 a 10
var quantity = random(1,10);

// Creaci贸n de instancia de imagen de fondo desde el objeto background (traemos la url y el evento load para crear la func loadBackground)
background.object = new Image();
background.object.src = background.url;
background.object.addEventListener("load", loadBackground);

vaca.object = new Image();
vaca.object.src = vaca.url;
vaca.object.addEventListener("load", loadVacas);

cerdo.object = new Image();
cerdo.object.src = cerdo.url;
cerdo.object.addEventListener("load", loadCerdos);

pollo.object = new Image();
pollo.object.src = pollo.url;
pollo.object.addEventListener("load", loadPollos);

// Definimos todas las funciones.
function loadBackground()
{
    background.cargaOK = true;
    draw();
}

function loadVacas()
{
    vaca.cargaOK = true;
    draw();
}

function loadCerdos()
{
    cerdo.cargaOK = true;
    draw();
}

function loadPollos()
{
    pollo.cargaOK = true;
    draw();
}

// Definimos la funcion draw y decimos que si cargaOK es igual a true podemos dibujar sobre nuestro objeto paper con la func drawImage
function draw()
{
    if(background.cargaOK == true)
    {  
        paper.drawImage(background.object, 0, 0);
    }

// Creamos un bucle para crear vacas en posiciones aleatorias, haciendo uso de la funcion random.
    if(vaca.cargaOK == true)
    {  
        for(var v=0; v < quantity; v++)
        {
            var x = random(0, 6);
            var y = random(0, 6);
            var x = x * 70;
            var y = y * 70;
            paper.drawImage(vaca.object, x, y);
        }
    }
// Creamos un bucle para crear pollos aleatorios.
    if(pollo.cargaOK == true)
    {
        for(var p=0; p < quantity; p++)
        {
            var x = random(0, 7);
            var y = random(0, 7);
            var x = x * 80;
            var y = y * 80;
            paper.drawImage(pollo.object, x, y);
        }   
    }
// Creamos la carga del cerdo que almacenara la ultima posicion del cerdo en X y en Y
    if(cerdo.cargaOK == true)
    {
        paper.drawImage(cerdo.object, cerdoX, cerdoY);
    }
}

// Definimos la funcion mover cerdo con el parametro evento con el que mandamos a llamar a la funcion moverCerdo
function moverCerdo(evento)

{
    var movimiento = 5;
    switch (evento.keyCode)
    {
        case teclas.UP:
            loadCerdos(cerdoX, cerdoY, cerdoX, cerdoY - movimiento, paper);
            cerdoY = cerdoY - movimiento;
        break;

        case teclas.DOWN:
            loadCerdos(cerdoX, cerdoY, cerdoX, cerdoY + movimiento, paper);
            cerdoY = cerdoY + movimiento;
        break;

        case teclas.LEFT:
            loadCerdos(cerdoX, cerdoY, cerdoX - movimiento, cerdoY, paper);
            cerdoX = cerdoX - movimiento;
        break;

        case teclas.RIGHT:
            loadCerdos(cerdoX, cerdoY, cerdoX + movimiento,cerdoY, paper);
            cerdoX = cerdoX + movimiento;
        break;
    }
}

loadCerdos(cerdoX-1, cerdoY-1, cerdoX+1, cerdoY+1, paper)

function random(min, maxi)
{
    var result;
    result = Math.floor(Math.random() * (maxi - min + 1)) + min;
    return result;
}



// var z;

// for(var i=0; i < 10; i++)
// {
//     z = random(10, 20);
//     document.write(z +", ")
// }


Este es mi aporte. No me sali贸 tal cual quise pero al menos pude mover al cerdo jajajaja.





Con este c贸digo puedes crear x cantidad de vacas/cerdos/pollos y mover a uno de cada animal con las flechas a una vaca, con WASD a un cerdo y a un pollo con UHJK. No se regeneran los animales cada vez que te muevas (al parecer es un problema que muchos tuvieron).

Tuve una idea de clickear cualquier animal y poder moverlo, lo har茅 alg煤n dia jaja.

var canvasElement = document.getElementById("eCanvas");
var canvas = canvasElement.getContext("2d");

document.addEventListener("keyup", moveAnimal);

var images = {
    tile: {
        url: "img/tile.png",
        quantity: 1,
        instances: []
    },
    cow: {
        url: "img/vaca.png",
        quantity: randomRange(0, 10),
        instances: []
    },
    pig: {
        url: "img/cerdo.png",
        quantity: randomRange(0, 10),
        instances: []
    },
    chick: {
        url: "img/pollo.png",
        quantity: randomRange(0, 10),
        instances: []
    },
};

images.tile.image = new Image(500, 500);
images.tile.image.src = "img/tile.png";
images.tile.image.onload = (e) => loadedImage(images.tile);

images.cow.image = new Image(80, 80);
images.cow.image.src = "img/vaca.png";
images.cow.image.onload = (e) => loadedImage(images.cow);

images.pig.image = new Image(80, 80);
images.pig.image.src = "img/cerdo.png";
images.pig.image.onload = (e) => loadedImage(images.pig);

images.chick.image = new Image(80, 80);
images.chick.image.src = "img/pollo.png";
images.chick.image.onload = (e) => loadedImage(images.chick);

function loadedImage(image) {
    image.loaded = true;
    createInstances(image);
}

function createInstances(image) {
    for (let i = 0; i < image.quantity; i++) {
        image.instances.push({ x: randomRange(0, 420), y: randomRange(0, 420) })
    }
    drawImages();
}

function drawImages() {
    if (images.tile.loaded) {
        canvas.drawImage(images.tile.image, 0, 0);
    }
    if (images.cow.loaded) {
        images.cow.instances.forEach(instance => {
            canvas.drawImage(images.cow.image, instance.x, instance.y);
        });
    }
    if (images.pig.loaded) {
        images.pig.instances.forEach(instance => {
            canvas.drawImage(images.pig.image, instance.x, instance.y);
        });
    }
    if (images.chick.loaded) {
        images.chick.instances.forEach(instance => {
            canvas.drawImage(images.chick.image, instance.x, instance.y);
        });
    }
}

function moveAnimal(event) {
    var movementKeys = {
        cow: {
            UP: 38,
            DOWN: 40,
            LEFT: 37,
            RIGHT: 39
        },
        pig: {
            UP: 87,
            DOWN: 83,
            LEFT: 65,
            RIGHT: 68
        },
        chick: {
            UP: 85,
            DOWN: 74,
            LEFT: 72,
            RIGHT: 75
        }
    };

    switch (event.keyCode) {
        case movementKeys.cow.UP:
            images.cow.instances[0].y -= 8;
            drawImages();
            break;
        case movementKeys.cow.DOWN:
            images.cow.instances[0].y += 8;
            drawImages();
            break;
        case movementKeys.cow.LEFT:
            images.cow.instances[0].x -= 8;
            drawImages();
            break;
        case movementKeys.cow.RIGHT:
            images.cow.instances[0].x += 8;
            drawImages();
            break;
        case movementKeys.pig.UP:
            images.pig.instances[0].y -= 8;
            drawImages();
            break;
        case movementKeys.pig.DOWN:
            images.pig.instances[0].y += 8;
            drawImages();
            break;
        case movementKeys.pig.LEFT:
            images.pig.instances[0].x -= 8;
            drawImages();
            break;
        case movementKeys.pig.RIGHT:
            images.pig.instances[0].x += 8;
            drawImages();
            break;
        case movementKeys.chick.UP:
            images.chick.instances[0].y -= 8;
            drawImages();
            break;
        case movementKeys.chick.DOWN:
            images.chick.instances[0].y += 8;
            drawImages();
            break;
        case movementKeys.chick.LEFT:
            images.chick.instances[0].x -= 8;
            drawImages();
            break;
        case movementKeys.chick.RIGHT:
            images.chick.instances[0].x += 8;
            drawImages();
            break;
    }
}

function randomRange(min, max) {
    return Math.floor((Math.random() * (max - min + 1)) + min);
}

pague platzi para comenzar desde 0 este programa/carrera, la verdad bastante decepcionado siento que en estos 40 minutos me quisieron 鈥渆nse帽ar鈥 de golpe todo, al final termin茅 copiando y me deja bastante decepcionado la forma de 鈥渟eguir el camino鈥

Raza hay va mi aporte lo ise con todo mi esfuerzo intente que se moviera una imagen con las teclas pero no pude jaj hay les dejo el aporte espero les guste.

Hola! Hice 3 botones independientes que me indica el movimiento de cada animal. Si quieres mover la vaca seleccionas la vaca
var d= document.getElementById(鈥渄ibujo鈥);
var v= document.getElementById(鈥渂oton_vaca鈥);
var p= document.getElementById(鈥渂oton_pollo鈥);
var c = document.getElementById(鈥渂oton_cerdo鈥);
var papel= d.getContext(鈥2d鈥);
document.addEventListener(鈥渒eydown鈥, moverCerdo);
c.addEventListener(鈥渃lick鈥, clickCerdo);
document.addEventListener(鈥渒eydown鈥, moverVaca);
v.addEventListener(鈥渃lick鈥, clickVaca);
document.addEventListener(鈥渒eydown鈥, moverPollo);
p.addEventListener(鈥渃lick鈥, clickPollo);

var a = 300;
var b = 100;
var x = 300;
var y = 200;
var c = 300;
var d = 300;
var estado;
var estado1;
var estado2;
function clickPollo()
{
estado2 = 1;
estado = 0;
estado1 = 0;

}

function clickCerdo()
{
estado = 1;
estado2 = 0;
estado1 = 0;

}
function clickVaca()
{
estado1 = 1;
estado = 0;
estado2 = 0;

}

var vaca=
{
url: 鈥渧aca.png鈥,
cargaOK: false
};
var fondo=
{
url: 鈥渢ile.png鈥,
cargaOK: false
};
var cerdo=
{
url: 鈥渃erdo.png鈥,
cargaOK: false
};
var pollo=
{
url: 鈥減ollo.png鈥,
cargaOK: false
};
var teclas = {
UP : 38,
DOWN: 40,
LEFT: 37,
RIGHT: 39
};

fondo.objeto = new Image();
fondo.objeto.src = fondo.url;
fondo.objeto.addEventListener(鈥渓oad鈥, cargarFondo);
vaca.objeto = new Image();
vaca.objeto.src = vaca.url;
vaca.objeto.addEventListener(鈥渓oad鈥, cargarVaca);
cerdo.objeto = new Image();
cerdo.objeto.src = cerdo.url;
cerdo.objeto.addEventListener(鈥渓oad鈥, cargarCerdo);
pollo.objeto = new Image();
pollo.objeto.src = pollo.url;
pollo.objeto.addEventListener(鈥渓oad鈥, cargarPollo);
function cargarPollo()
{
pollo.cargaOK= true;
dibujar();
}
function cargarCerdo()
{
cerdo.cargaOK= true;
dibujar();
}
function cargarFondo()
{
fondo.cargaOK= true;
dibujar();
}
function cargarVaca()
{
vaca.cargaOK= true;
dibujar();
}

function dibujar()
{
if(fondo.cargaOK == true)
{
papel.drawImage(fondo.objeto, 0, 0);
}
if(vaca.cargaOK == true)
{

papel.drawImage(vaca.objeto, x, y);

}

if(cerdo.cargaOK == true)
{

 papel.drawImage(cerdo.objeto, a, b);

}
if(pollo.cargaOK == true)
{

 papel.drawImage(pollo.objeto, c, d);

}
}
function moverCerdo(evento)
{
if(estado == 1)
{ var movi = 1;

if (evento.keyCode == teclas.UP)
{
 papel.drawImage(cerdo.objeto, a, b-movi);
 b = b - movi;
 dibujar();
}
if (evento.keyCode == teclas.DOWN)
{
  papel.drawImage(cerdo.objeto, a, b+movi);
  b = b + movi;
     dibujar();
}
if (evento.keyCode == teclas.LEFT)
{
  papel.drawImage(cerdo.objeto, a-movi, b);
  a = a - movi;
  dibujar();
}
if (evento.keyCode == teclas.RIGHT)
{
  papel.drawImage(cerdo.objeto, a+movi, b);
  a = a + movi;
     dibujar();
}

}

}
function moverVaca(evento)
{
if(estado1 == 1)
{
var movi = 1;

 if (evento.keyCode == teclas.UP)
 {
  papel.drawImage(vaca.objeto, x, y-movi);
  y = y - movi;
  dibujar();
 }
 if (evento.keyCode == teclas.DOWN)
 {
   papel.drawImage(vaca.objeto, x, y+movi);
   y = y + movi;
      dibujar();
 }
 if (evento.keyCode == teclas.LEFT)
 {
   papel.drawImage(vaca.objeto, x-movi, y);
   x = x - movi;
   dibujar();
 }
 if (evento.keyCode == teclas.RIGHT)
 {
   papel.drawImage(vaca.objeto, x+movi, y);
   x = x + movi;
      dibujar();
  }

}

}

function moverPollo(evento)
{
if(estado2 == 1)
{ var movi = 1;

  if (evento.keyCode == teclas.UP)
  {
   papel.drawImage(pollo.objeto, c, d-movi);
   d = d - movi;
   dibujar();
  }
  if (evento.keyCode == teclas.DOWN)
  {
    papel.drawImage(pollo.objeto, c, d+movi);
    d = d + movi;
       dibujar();
  }
  if (evento.keyCode == teclas.LEFT)
  {
    papel.drawImage(pollo.objeto, c-movi, d);
    c = c - movi;
    dibujar();
  }
  if (evento.keyCode == teclas.RIGHT)
  {
    papel.drawImage(pollo.objeto, c + movi, d);
    c = c + movi;
       dibujar();

  }

}

}

Si logr茅 hacer que un Pollo se moviera con el TECLADO, aunque cada vez que se mueve, se ejecuta la funci贸n dibujar y los dem谩s animales vuelven a cambiar de posici贸n.
Se necesitar铆a guardar su posici贸n aleatoria, para mantener a los animales ah铆 cuando el Pollo se mueva.

var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");
var mapa = "tile.png";
document.addEventListener("keyup", moverPollito);
var xPollo = 150;
var yPollo = 150;

var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};

function moverPollito(evento)
{
  var movimiento = 20;
  switch(evento.keyCode)
  {
    case teclas.UP:
      yPollo = yPollo - movimiento;
      dibujar();
    break;

    case teclas.DOWN:
      yPollo = yPollo + movimiento;
      dibujar();
    break;

    case teclas.LEFT:
      xPollo = xPollo - movimiento;
      dibujar();
    break;

    case teclas.RIGHT:
    xPollo = xPollo + movimiento;
    dibujar();
    break;
    default:
      console.log("otra tecla");
  }
}

var fondo = {
  url: "tile.png",
  cargaOK: false
};

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

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

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

var cantidad = aleatorio(5, 25);
console.log(cantidad);

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);

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

function cargarVacas()
{
  vaca.cargaOK = true;
  dibujar();
}

function cargarPollos()
{
  pollo.cargaOK = true;
  dibujar();
}

function cargarCerdos()
{
  cerdo.cargaOK = true;
  dibujar();
}

function dibujar()
{
  if(fondo.cargaOK)
  {
    papel.drawImage(fondo.imagen, 0, 0);
  }

  if(vaca.cargaOK)
  {
    for(var v=0; v<cantidad; v++)
    {
    var x = aleatorio(0, 420);
    var y = aleatorio(0, 420);
    papel.drawImage(vaca.imagen, x, y);
    }
  }

  if(cerdo.cargaOK)
  {
    for(var v=0; v<cantidad; v++)
    {
    var x = aleatorio(0, 420);
    var y = aleatorio(0, 420);
    papel.drawImage(cerdo.imagen, x, y);
    }
  }

  if(pollo.cargaOK)
  {
    papel.drawImage(pollo.imagen, xPollo, yPollo);
  }
}

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

Para hacer mover el cerdo s贸lito en el fondo

var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

var xc = 3;
var yc = 3;

var vp = document.getElementById("cerdito");
var papel = vp.getContext("2d");
var mapa = "tile.png";

var fondo = {
    url: "tile.png",
    cargaOK: false
};

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

fondo.imagen = new Image();
fondo.imagen.src = fondo.url;
fondo.imagen.addEventListener("load", cargarFondo);

cerdo.imagen = new Image();
cerdo.imagen.src = cerdo.url;
cerdo.imagen.addEventListener("load", cargarCerdos);

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

function cargarCerdos() {
    cerdo.cargaOK = true;
    dibujar();
}


function dibujar() 
{
    if (fondo.cargaOK) {
        papel.drawImage(fondo.imagen, 0, 0);

    }
}

document.addEventListener("keydown", moverCerdo);


function moverCerdo(evento){
    switch (evento.keyCode) {
      case teclas.UP:
        dibujar();
        yc--;
        papel.drawImage(cerdo.imagen, xc, yc);
        break;
      case teclas.DOWN:
        dibujar();
        yc++;
        papel.drawImage(cerdo.imagen, xc, yc);
        break;
      case teclas.LEFT:
        dibujar();
        xc--;
        papel.drawImage(cerdo.imagen, xc, yc);
        break;
      case teclas.RIGHT:
        dibujar();
        xc++;
        papel.drawImage(cerdo.imagen, xc, yc);
        break;
      default:
        break;
      }
}

Aqu铆 esta el c贸digo del desaf铆o 1 y 2. el 1 estuvo sencillo solo era poner el resto de animales en aleatorio, pero para el desaf铆o 2 tuve que mirar los cometarios de los compa帽eros para terminarlo, y al desaf铆o 2 le puse una imagen de Saitama.

Desaf铆o 1:
HTML

<code> 
<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     <title>Villa platzi</title>
 </head>>
 <body>
     <canvas width="500" height="500" id="villaplatzi">
     </canvas>
  <script src="platzivilla.js">
  </script>
 </body>
</html>

JavaScript

<code>
var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");

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

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

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

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

var cantidad = aleatorio(1, 15);
var cantidad2 = aleatorio(1, 10);
var cantidad3 = aleatorio(1, 5);


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);

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 dibujar()
{
  if(fondo.cargaOk)
  {
    papel.drawImage(fondo.imagen, 0, 0);
  }
  if(vaca.cargaOk)
  {
    console.log(cantidad);
    for (var v=0; v < cantidad; v++)
    {
      var x = aleatorio(0, 5);
      var y = aleatorio(0, 5);
      var x = x * 80;
      var y = y * 80;
      papel.drawImage(vaca.imagen, x, y);   
    }  
  }
  if (cerdo.cargaOk)
  {
    console.log(cantidad2);
    for (var c=0; c < cantidad2; c++)
    {
      var x = aleatorio(0, 5);
      var y = aleatorio(0, 5);
      var x = x * 80;
      var y = y * 80;
      papel.drawImage(cerdo.imagen, x, y);
    }
  }
  if (pollo.cargaOk)
  {
    console.log(cantidad3);
    for (var p=0; p < cantidad3; p++)
    {
      var x = aleatorio(0, 5);
      var y = aleatorio(0, 5);
      var x = x * 80;
      var y = y * 80;
      papel.drawImage(pollo.imagen, x, y);
    }
  }
}


function aleatorio (min, max)
{
    var resultado;
    resultado =  Math.floor(Math.random() * (max - min + 1)) + min;
    return resultado;
} 

Desafio 2:
HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>El granjero saitama</title>
  </head>
  <body>
    <h1>La granja de saitama</h1>
    <canvas width="500" height="500" id= "granjasaitama"></canvas>
    <p>Para jugar y mover a saitama usa las flechas del teaclado</p>
    <script src="desafioflechascerdo.js">
    </script>
  </body>
</html>

Java Script

var gp = document.getElementById("granjasaitama");
var papel = gp.getContext("2d");


var teclas ={
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};


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

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

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

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

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

var cantidad = aleatorio(1, 12);
var cantidad2 = aleatorio(1, 9);
var cantidad3 = aleatorio(1, 7);

var xsaitama = 80;
var ysaitama = 80;



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);

saitama.imagen = new Image();
saitama.imagen.src = saitama.url;
saitama.imagen.addEventListener("load", cargarSaitama);

document.addEventListener("keydown", moverSaitama);

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 cargarSaitama()
{
  saitama.cargaOk = true;
  dibujar();
}

function dibujar()
{
  if (fondo.cargaOk)
  {
    papel.drawImage(fondo.imagen, 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.imagen, x, y);
    }
  }
  if (cerdo.cargaOk)
  {
    console.log(cantidad2);
    for (var c=0; c < cantidad2; c++)
    {
      var x = aleatorio(0, 7);
      var y = aleatorio(0, 7);
      var x = x * 60;
      var y = y * 60;
      papel.drawImage(cerdo.imagen, x, y);
    }
  }
  if (pollo.cargaOk)
  {
    console.log(cantidad3);
    for (var p=0; p < cantidad3; p++)
    {
      var x = aleatorio(0, 7);
      var y = aleatorio(0, 7);
      var x = x * 60;
      var y = y * 60;
      papel.drawImage(pollo.imagen, x, y);
    }
  }
  if (saitama.cargaOk)
  {
      papel.drawImage(saitama.imagen, xsaitama, ysaitama);
  }
}

function moverSaitama(evento)
{
  var movimiento = 40;
  switch(evento.keyCode)
 {
   case teclas.UP:
     cargarSaitama(xsaitama, ysaitama);
     ysaitama = ysaitama - movimiento;
    
   break;
   case teclas.DOWN:
    cargarSaitama(xsaitama, ysaitama);
    ysaitama = ysaitama + movimiento;
    
   break;
   case teclas.LEFT:
    cargarSaitama(xsaitama, ysaitama);
    xsaitama = xsaitama - movimiento;
    
   break;
   case teclas.RIGHT:
    cargarSaitama(xsaitama, ysaitama);
    xsaitama = xsaitama + movimiento;
    
   break;
 }
}

function aleatorio (min, max)
{
    var resultado;
    resultado =  Math.floor(Math.random() * (max - min + 1)) + min;
    return resultado;
}

Este es mi c贸digo:

// Esta clase servir谩 para poder redibujar las cordenadas de todos los animales
class Punto {

    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}

let vp = document.getElementById("villaplatzi");
let papel = vp.getContext("2d");

let fondo = {
    url: "img/tile.png",
    cargaOK: false
};

let vaca = {
    url: "img/vaca.png",
    cargaOK: false
};

let cerdo = {
    url: "img/cerdo.png",
    cargaOK: false
};

let pollo = {
    url: "img/pollo.png",
    cargaOK: false
};

// Declaramos los siguientes arreglos para recordar las posiciones originales de los animales
let arregloVacas = [];
let arregloCerdos = [];
let arregloPollos = [];

// Estas variables servir谩n para recordar la 煤ltima posici贸n del cerdo que se va a mover
let posX;
let posY;

let teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

let cantidad = aleatorio(1, 10);

fondo.imagen = new Image(); // Estamos creando una etiqueta <img>
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);

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 dibujar() {
    if (fondo.cargaOK) {
        papel.drawImage(fondo.imagen, 0, 0); // En el canvas, el punto 0, 0 est谩 en la esquina superior izquierda
        // El segundo y tercer par谩metro indican desde donde se va a empezar a dibujar la imagen dentro del canvas
    }

    console.log(cantidad);

    if (vaca.cargaOK) {
        for (let v = 0; v < cantidad; v++) {

            // Generar n煤meros aleatorios en una grilla
            let x = aleatorio(0, 7);
            let y = aleatorio(0, 7);

            x = x * 70;
            y = y * 70;

            // let x = aleatorio(0, 420);
            // let y = aleatorio(0, 420);

            arregloVacas.push(new Punto(x, y));

            papel.drawImage(vaca.imagen, x, y);

        }
    }

    if (cerdo.cargaOK) {
        for (let c = 0; c < cantidad; c++) {
            let x = aleatorio(0, 7);
            let y = aleatorio(0, 7);

            x = x * 70;
            y = y * 70;

            // let x = aleatorio(0, 420);
            // let y = aleatorio(0, 420);

            arregloCerdos.push(new Punto(x, y));

            papel.drawImage(cerdo.imagen, x, y);
        }

        posX = arregloCerdos[0].x;
        posY = arregloCerdos[0].y;

        document.addEventListener("keydown", redibujar); // El evento para mover un cerdo, se a帽ade al finalizar la carga
        // de las imagenes para evitar un error al dibujar en caso de que no se hayan cargado las imagenes de los cerdos
    }

    if (pollo.cargaOK) {
        for (let p = 0; p < cantidad; p++) {
            let x = aleatorio(0, 7);
            let y = aleatorio(0, 7);

            x = x * 70;
            y = y * 70;

            // let x = aleatorio(0, 420);
            // let y = aleatorio(0, 420);

            arregloPollos.push(new Punto(x, y));

            papel.drawImage(pollo.imagen, x, y);
        }
    }

}

function redibujar(evento) {
    let movimiento = 1;
    papel.drawImage(fondo.imagen, 0, 0);

    for (let v = 0; v < cantidad; v++) {
        papel.drawImage(vaca.imagen, arregloVacas[v].x, arregloVacas[v].y);
    }

    switch (evento.keyCode) {
        case teclas.UP:
            posY = posY - movimiento;
            papel.drawImage(cerdo.imagen, posX, posY);
            break;
        case teclas.DOWN:
            posY = posY + movimiento;
            papel.drawImage(cerdo.imagen, posX, posY);
            break;
        case teclas.LEFT:
            posX = posX - movimiento;
            papel.drawImage(cerdo.imagen, posX, posY);
            break;
        case teclas.RIGHT:
            posX = posX + movimiento;
            papel.drawImage(cerdo.imagen, posX, posY);
            break;
        default:
            papel.drawImage(cerdo.imagen, posX, posY);
            break;
    }

    for (let c = 1; c < cantidad; c++) {
        papel.drawImage(cerdo.imagen, arregloCerdos[c].x, arregloCerdos[c].y);
    }

    for (let p = 0; p < cantidad; p++) {
        papel.drawImage(pollo.imagen, arregloPollos[p].x, arregloPollos[p].y);
    }
}

function aleatorio(min, maxi) {
    let resultado;
    resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
    return resultado;
}

Me gusta que con muy poco se pueden hacer cosas interesantes

![](

le a帽ad铆 un granjero a Villa Platzi, la idea es que llegue a casa, movi茅ndose con las flechas, logr茅 que se moviera sin dejar rastro, y adem谩s que quede un n煤mero definido de animales, ahora lo que me falta es que los animales no se muevan cada vez que se mueva, supongo que es f谩cil de arreglar con un array de posiciones que me cree las posiciones definidas para cada uno de los animales.

<code>
var vp = document.getElementById("villaplatzi");//obtenci贸n del canvas.
var papel = vp.getContext("2d");//obtenci贸n del contexto en el cual se va a trabajar.
var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};//objeto literal para las teclas, definen sus codigos.
document.addEventListener("keyup", moverGranjero);
var fondo = {
  url: "tile.png",
  cargaOK: false
};// objeto literal para el fondo, donde se especifican las variables que lo definen.
var vaca = {
  url: "vaca.png",
  cargaOK: false
};// objeto literal para las vacas, donde se especifican las variables que la definen.
var cerdo = {
  url: "cerdo.png",
  cargaOK: false
};// objeto literal para los cerdos, donde se especifican las variables que la definen.
var pollo = {
  url: "pollo.png",
  cargaOK: false
};// objeto literal para los pollos, donde se especifican las variables que la definen.
var granjero = {
  url: "farmer.png",
  cargaOK: false,
  x:0,
  y:0
}
var cantidadVacas = aleatorio(0, 4);//cantidad de vacas.
var cantidadCerdos = aleatorio(0,10);//cantidad de cerdos.
var cantidadPollos = aleatorio(1,5);//cantidad de pollos.

fondo.objeto = new Image();
fondo.objeto.src = fondo.url;
fondo.objeto.addEventListener("load", cargarFondo);

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

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

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

granjero.objeto = new Image();
granjero.objeto.src = granjero.url;
granjero.objeto.addEventListener("load", cargarGranjero);


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 cargarGranjero ()
{
  granjero.cargaOK = true;
  dibujar();
}

function dibujar()
{

  if(fondo.cargaOK)
  {
      papel.drawImage(fondo.objeto, 0, 0);
  }
  if(vaca.cargaOK)
  {
    for (var i = 0; i < cantidadVacas ; i++) {
      var x = aleatorio(0,5);
      var y = aleatorio(0,5);
      x = x * 60 + 80;
      y = y * 60 + 80;
      papel.drawImage(vaca.objeto, x, y);
    }
  }
  if(cerdo.cargaOK)
  {
    for (var i = 0; i < cantidadCerdos ; i++) {
      var x = aleatorio(0,5);
      var y = aleatorio(0,5);
      x = x * 60 + 80;
      y = y * 60 + 80;
      papel.drawImage(cerdo.objeto, x, y);
  }
}
  if(pollo.cargaOK)
  {
    for (var i = 0; i < cantidadPollos ; i++) {
      var x = aleatorio(0,5);
      var y = aleatorio(0,5);
      x = x * 60 + 80;
      y = y * 60 + 80;
      papel.drawImage(pollo.objeto, x, y);
    }
  if (granjero.cargaOK) {
    var x = granjero.x;
    var y = granjero.y;
    papel.drawImage(granjero.objeto, x, y);
  }
  }
}


function aleatorio(min, max)
{
  var resultado
  resultado = Math.floor(Math.random() *(max - min + 1)) + min;
  return resultado;
}

function moverGranjero (evento)
{
  var movimiento = 10;
 console.log(evento);
  switch (evento.keyCode) {
    case teclas.UP:
        granjero.y = granjero.y - movimiento;
        console.log(granjero.y);
        dibujar();
      break;
    case teclas.DOWN:
        granjero.y = granjero.y + movimiento;
        dibujar();
      break;
      case teclas.RIGHT:
        granjero.x = granjero.x + movimiento;
        dibujar();
        break;
      case teclas.LEFT:
        granjero.x = granjero.x - movimiento;
        dibujar();
        break;
      default:

      break
    }
}
</code>

2 Retos cumplidos.

El cerdo se mueve desde el centro del canvas sin dejar rastro.

![](

var z;
var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");
var x = 210
var y = 210

var fondo = {
  url: "tile.png",
  cargaOK: false
}

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

fondo.imagen = new Image();
fondo.imagen.src = fondo.url;
fondo.imagen.addEventListener("load", cargamapa);

cerdo.imagen = new Image();
cerdo.imagen.src = cerdo.url;
cerdo.imagen.addEventListener("load", cargaCerdos);

function cargamapa()
{
  fondo.cargaOK = true;
  dibujar();
}

function cargaCerdos()
{
  cerdo.cargaOK = true;
  dibujar();
}

function dibujar()
{
  if(fondo.cargaOK == true)
  {
    papel.drawImage(fondo.imagen, 0,0);
  }

  if(cerdo.cargaOK == true)
  {
    papel.drawImage(cerdo.imagen, x, y);
  }
}

document.addEventListener("keydown", moverCerdo);

var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};
console.log(teclas);

function pasoCerdo(x, y)
{
  papel.drawImage(fondo.imagen, 0,0);
  papel.drawImage(cerdo.imagen, x, y);
}

function moverCerdo(evento)
{
  var movimiento = 10;
  switch(evento.keyCode)
  {
    case teclas.UP:
      pasoCerdo (x, y - movimiento, papel);
      y = y - movimiento;
      console.log("Arriba");
    break;
    case teclas.DOWN:
      pasoCerdo (x, y + movimiento, papel);
      y = y + movimiento;
      console.log("Abajo");
    break;
    case teclas.LEFT:
      pasoCerdo (x - movimiento, y, papel);
      x = x - movimiento;
      console.log("Izquierda");
    break;
    case teclas.RIGHT:
      pasoCerdo (x + movimiento, y, papel);
      x = x + movimiento;
      console.log("Derecha");
    break;
      default:
      console.log("Otra tecla")
    break;
  }
}

Animal Rebelde

Hola, por fin lo termine
Aqui mi codigo:

<code>
var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");
posX = 250;
posY = 250;

var fondo = 
{
  url : "tile.png",
  cargaOK : false
}
var vacaA = 
{
  url:"vaca.png",
  cargaOK : false
}
var polloA = 
{
  url:"pollo.png",
  cargaOK : false
}
var cerdoA =
{
  url:"cerdo.png",
  movCerdo : 10,
  cargaOK : false
}
var teclas = 
{
  arrowLeft:37,
  arrowUp:38,
  arrowRight:39,
  arrowDown:40,
};  

var numAleatorioV = aleatorio(0, 2);
var numAleatorioP = aleatorio(0, 5);
var numAleatorioC = aleatorio(0, 5);

var numAleatorioVX = aleatorio(20, 420);
var numAleatorioVY = aleatorio(20, 420);

var numAleatorioPX = aleatorio(20, 420);
var numAleatorioPY = aleatorio(20, 420);

fondo.objeto = new Image();
fondo.objeto.src = fondo.url;
fondo.objeto.addEventListener("load",cargarFondo);

vacaA.objeto = new Image();
vacaA.objeto.src = vacaA.url;
vacaA.objeto.addEventListener("load", cargarVacas);

polloA.objeto = new Image();
polloA.objeto.src = polloA.url;
polloA.objeto.addEventListener("load", cargarPollos);

cerdoA.objeto = new Image();
cerdoA.objeto.src = cerdoA.url;
cerdoA.objeto.addEventListener("load", cargarCerdos);

function cargarFondo()
{
  fondo.cargaOK = true;
  dibujar();
}
function cargarVacas()
{
  vacaA.cargaOK = true; 
  dibujar();
}

function cargarPollos()
{
  polloA.cargaOK = true; 
  dibujar();
}
function cargarCerdos()
{
  cerdoA.cargaOK = true; 
  dibujar();
}

function dibujar()
{
  if(fondo.cargaOK)
  {
    papel.drawImage(fondo.objeto, 0, 0);
  }
  if(vacaA.cargaOK)
  {
   for (var i=0; i<=numAleatorioV; i++)
   { 
    papel.drawImage(vacaA.objeto, numAleatorioVX, numAleatorioVY);
   }
  }
  if(cerdoA.cargaOK)
  {
    papel.drawImage(cerdoA.objeto, 250, 250);
  }
  if(polloA.cargaOK)
  {
   for (var k=0; k<=numAleatorioP; k++)
   { 
    papel.drawImage(polloA.objeto, numAleatorioPX, numAleatorioPY);
   }
  }
  
}
function aleatorio(min, max)
{
  resultado =Math.floor(Math.random() * (max - min + 1)) + min;
  return resultado;
}
document.addEventListener("keyup",dibujarTeclado);
function dibujarTeclado(evento)
{
    switch(evento.keyCode)
    {
      case teclas.arrowUp:
        papel.drawImage(cerdoA.objeto, posX, posY - cerdoA.movCerdo);
        posY = posY - cerdoA.movCerdo;
        actualizarCanvas();
        break;
      case teclas.arrowDown:
        papel.drawImage(cerdoA.objeto, posX, posY + cerdoA.movCerdo);
        posY = posY + cerdoA.movCerdo;
        actualizarCanvas();
        break;
      case teclas.arrowRight:
        papel.drawImage(cerdoA.objeto, posX + cerdoA.movCerdo, posY);
        posX = posX + cerdoA.movCerdo;
        actualizarCanvas();
        break;
      case teclas.arrowLeft:
        papel.drawImage(cerdoA.objeto, posX - cerdoA.movCerdo, posY);
        posX = posX - cerdoA.movCerdo;
        actualizarCanvas();
        break;            
      default:
        console.log("C MAMO");
        break;
    }  
}
function actualizarCanvas()
{
  papel.drawImage(fondo.objeto, 0, 0);
  papel.drawImage(cerdoA.objeto, posX, posY);
  papel.drawImage(vacaA.objeto, numAleatorioVX, numAleatorioVY);
  papel.drawImage(polloA.objeto, numAleatorioPX, numAleatorioPY);
}

Hola chicos que hice yo que no tuve que crear nuevas variables ya que por arte de no se que a mi cargaron todos los animales a la primera y no se si sea u error de codigos pero me la pase 20 minutos leyendo mi codigo y no se talvez esto les ayude a no tener que crear mas funciones. Pero bueno aqui les dejo mi codigo.

.
ese es mi js pero de todos modos voy a crear esas nuevas funciones por que yo soy muy desconfiada 馃槂


Cantidad de animales aleatoria de 1 a 10 y cerdo con movimiento

<var vp =document.getElementById("villaplatzi");/*traer el canvas que esta en html por suy ID*/
var papel = vp.getContext("2d");/*cojer el contexto 2d para dibjar*/

var flechas = {
  UP    : 38,
  DOWN  : 40,
  LEFT  : 37,
  RIGHT : 39};

var mapa = {
    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
};

/*imagendel mapa*/
mapa.imagen = new Image();
mapa.imagen.src = mapa.url;
/*imagencodigo*/
vaca.imagen = new Image();
vaca.imagen.src = vaca.url;
/*imagen del pollo*/
pollo.imagen = new Image ();
pollo.imagen.src = pollo.url;
/*imagen del cerdo */
cerdo.imagen = new Image();
cerdo.imagen.src = cerdo.url;

var movimiento = 5;
var x = 250; /*posicion del cerdo abajo lo mismo*/
var y = 250;

mapa.imagen.addEventListener("load", cargaElMapa);
pollo.imagen.addEventListener("load",cargaElPollo);
vaca.imagen.addEventListener("load", cargaLaVaca);
cerdo.imagen.addEventListener("load", cargaElCerdo);
document.addEventListener("keydown", movimientoDelCerdo);

/*funciones que se ejecutan cuando la imagen esta cargada*/
function cargaElMapa (){
  mapa.cargaOk = true;
  dibujarloTodo();
}
function cargaLaVaca (){
  vaca.cargaOk = true;
  dibujarloTodo();
}
function cargaElPollo(){
  pollo.cargaOk = true;
  dibujarloTodo();
}
function cargaElCerdo(){
  cerdo.cargaOk = true;
  dibujarloTodo();
}

/*posiciones xy de los animates con un solo ciclo*/
var numerodeanimalesentotal = 30 /*usare las posiciones del 1 al 10 para la vaca 10 al 20 para el cerdo y 20 al 30 para los pollos teniendo como limite maximo 10 animales de cada*/
var xPosicion = new Array(numerodeanimalesentotal);
var yPosicion = new Array(numerodeanimalesentotal);
var xp;
var yp;
for (var i = 0; i < numerodeanimalesentotal; i++) {
  xp = aleatorio(0,12) *35;
  xPosicion[i]=xp;
  yp = aleatorio(0,12) *35;
  yPosicion[i]=yp
}
console.log(xPosicion,yPosicion);

var numerodevacas = aleatorio(1,10);
var numerodecerdos = aleatorio(1,10);
var numerodepollos = aleatorio(1,10)
function dibujarloTodo() {

  if (mapa.cargaOk) {
    papel.drawImage(mapa.imagen,0,0);
  }
  if (vaca.cargaOk) {

    for (var is = 0; is < numerodevacas; is++){ /*tambien podia cambiar "numerodevacas" por aleatorio(1,10) pero este cambia de numero en cada ciclo internamente"*/
      papel.drawImage(vaca.imagen,xPosicion[is],yPosicion[is]);/*vi que combinaban la funcion "dibujar linea"para traer las imagenes pero funciona igual con el drawImage*/
    }
  }
  if (cerdo.cargaOk) {
    for (var i = 0; i < numerodecerdos; i++) {
      papel.drawImage(cerdo.imagen,xPosicion[i+10],yPosicion[i+10]);/*+10para que coja la posicion 11 del array con las cordenadas y asi solo uso 1 ciclo de for*/
      papel.drawImage(cerdo.imagen,x,y);
    }

  }
  if (pollo.cargaOk) {
    for (var ia = 0; ia < numerodepollos; ia++) {
      papel.drawImage(pollo.imagen,xPosicion[ia+20],yPosicion[ia+20]);
    }
  }
}

function movimientoDelCerdo(evento){
  switch (evento.keyCode)
  {
    case flechas.UP:
    y = y -movimiento;
    dibujarloTodo();
    break;
    case flechas.DOWN:
    y = y + movimiento;
    dibujarloTodo();
    break;
    case flechas.LEFT:
    x = x - movimiento;
    dibujarloTodo();
    break;
    case flechas.RIGHT:
    x = x + movimiento;
    dibujarloTodo();
    break;
  }
}

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

Yeeeeeeeeeeees! Fue dif铆cil pero por fin lo logr茅.
Este es mi c贸digo JS:

var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");
document.addEventListener("keydown", moverCerdo);

var posicion_xCerdo = 150;
var posicion_yCerdo = 150;

var posicion_xVacas = new Array();
var posicion_yVacas = new Array();

var posicion_xPollos = new Array();
var posicion_yPollos = new Array();

function moverCerdo(evento)
{
  var movimiento = 30;
  var teclas =
	{
		LEFT: 37,
		UP: 38,
		RIGHT: 39,
		DOWN: 40
	}
  switch(evento.keyCode)
  {
    case teclas.UP:
      posicion_yCerdo = posicion_yCerdo - movimiento;
      dibujar(posicion_xCerdo, posicion_yCerdo);
    break;
    case teclas.DOWN:
      posicion_yCerdo = posicion_yCerdo + movimiento;
      dibujar(posicion_xCerdo, posicion_yCerdo);
    break;
    case teclas.LEFT:
      posicion_xCerdo = posicion_xCerdo - movimiento;
      dibujar(posicion_xCerdo, posicion_yCerdo);
    break;
    case teclas.RIGHT:
      posicion_xCerdo = posicion_xCerdo + movimiento;
      dibujar(posicion_xCerdo, posicion_yCerdo);
    break;
  }
}

var fondo = {
  url: "tile.png",
  cargaOK: false
};
var cerdo = {
  url: "cerdo.png",
  cargaOK: false
};
var vaca = {
  url: "vaca.png",
  cargaOK: false
};
var pollo = {
  url: "pollo.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", cargarCerdo);

pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
pollo.imagen.addEventListener("load", cargarPollos);

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

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

function cargarVacas()
{
  vaca.cargaOK = true;
  quieto();
}

function cargarPollos()
{
  pollo.cargaOK = true;
  quieto();
}

function quieto()
{
  if(vaca.cargaOK)
  {
    var cantidadvacas = aleatorio(1, 10);
    console.log("Vacas: " + cantidadvacas)
    for(var i=0; i < cantidadvacas; i++)
    {
      var x = aleatorio(0, 7);
      var y = aleatorio(0, 7);
      var x = x * 60;
      var y = y * 60;
      posicion_xVacas[i] = x;
      posicion_yVacas[i] = y;
    }
  }
  if(pollo.cargaOK)
  {
    var cantidadpollos = aleatorio(1, 15)
    console.log("Pollos: " + cantidadpollos)
    for(var i=0; i < cantidadpollos; i++)
    {
      var x = aleatorio(0, 7);
      var y = aleatorio(0, 7);
      var x = x * 60;
      var y = y * 60;
      posicion_xPollos[i] = x;
      posicion_yPollos[i] = y;
    }
  }
  dibujar();
}

function dibujar()
{
	if(fondo.cargaOK)
	{
		papel.drawImage(fondo.imagen, 0, 0);
	}
  if(cerdo.cargaOK)
	{
		papel.drawImage(cerdo.imagen, posicion_xCerdo, posicion_yCerdo);
	}
	if(vaca.cargaOK)
	{
		for(var i=0; i<10; i++){
			papel.drawImage(vaca.imagen, posicion_xVacas[i], posicion_yVacas[i]);
		}
	}
	if(pollo.cargaOK)
	{
		for(var i=0; i<10; i++){
			papel.drawImage(pollo.imagen, posicion_xPollos[i], posicion_yPollos[i]);
		}
	}
}

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

Los errores intencionales de Freddy, son TREMENDAMENTE 煤tiles鈥 sobre todo para impacientes como yo, que vamos tratando de ir un pasito m谩s adelante que el video, experimentando estos errores antes de que Freddy nos muestre como arreglarlos. Gracias por este curso, ya espero terminarlo

cada qeu veo los comentarios me deprimo porque la mayoria hace cosas increibles mientras yo me demoro revisando cada linea de codigo para ver por qu茅 me salio el error :'v

Freddy: Es por que ejecute la vaca
Yo: No ejecuteees a las vacas :'v

como le hago para que no se vea asi? :c

Buenas, yo lo hice de esta forma que me pareci贸 mas simple y al parecer funciona. Saludos

Aqu铆 esta el segundo reto: Mover el cerdo con las flechas ademas agrego pollos y vacas, cuando muevo el cerdo las vacas y pollos se quedan en la misma posici贸n. Utilizo un arreglo. Gran parte del c贸digo no es mio sino de @Jads_2000 que surgi贸 de una pregunta que la pueden ir a ver aqu铆. Yo solo agregue que los pollos y vacas se quedar谩n en la misma posici贸n cuando el cerdo se desplazara. Este c贸digo tiene una falla la cual es que el cerdo se puede salir del cavas el cual se pude solucionar con un if limitando las coordenadas del cerdo.
Cualquier comentario o duda estoy disponible

var mapa = document.getElementById("villaplatzi");
var papel = mapa.getContext("2d");
document.addEventListener("keyup", movecerdo);

var fondo = {
    url: "tile.png",
    carga: false,
    x: 0,
    y: 0
};

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

var cerdo = {
    url: "cerdo.png",
    carga: false,
    x: 280,
    y: 240,
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

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

var cantidadvacas = aleatorio(5, 10);
var cantidadpollos = aleatorio(1, 5);

var puntosVacas= new Array(cantidadvacas);
for (var i = 0; i < cantidadvacas; i++) {
    puntosVacas[i] = new Array(2);
}

var puntosPollos= new Array(cantidadpollos);
for (var i = 0; i < cantidadpollos; i++) {
    puntosPollos[i] = new Array(2);
}

console.log("Vacas: " + cantidadvacas + "\nPollos: " + cantidadpollos);

fondo.image = new Image();
fondo.image.src = fondo.url;
fondo.image.addEventListener("load", cargafondo);

vaca.image = new Image();
vaca.image.src = vaca.url;
vaca.image.addEventListener("load", cargavaca);

cerdo.image = new Image();
cerdo.image.src = cerdo.url;
cerdo.image.addEventListener("load", cargacerdo);

pollo.image = new Image();
pollo.image.src = pollo.url;
pollo.image.addEventListener("load", cargapollo);

function cargafondo() {
    fondo.carga = true;
    dibujar();
}

function cargavaca() {
    vaca.carga = true;
    dibujar();
}

function cargacerdo() {
    cerdo.carga = true;
    dibujar();
}

function cargapollo() {
    pollo.carga = true;
    dibujar();
}

function dibujar() {
    if (fondo.carga) {
        papel.drawImage(fondo.image, fondo.x, fondo.y);
    }
    if (vaca.carga) {
        for (var i = 0; i < cantidadvacas; i++) {
            var vacax = aleatorio(0, 7);
            var vacay = aleatorio(0, 7);
            vacax = vacax * 60;
            vacay = vacay * 60;
            puntosVacas[i][0] = vacax;
            puntosVacas[i][1] = vacay;
            papel.drawImage(vaca.image, vacax, vacay);
        }
    }
    if (cerdo.carga) {
        papel.drawImage(cerdo.image, cerdo.x, cerdo.y);
    }
    if (pollo.carga) {
        for (var i = 0; i < cantidadpollos; i++) {
            var pollox = aleatorio(0, 6);
            var polloy = aleatorio(0, 6);
            pollox = pollox * 70;
            polloy = polloy * 70;
            puntosPollos[i][0] = pollox;
            puntosPollos[i][1] = polloy;
            papel.drawImage(pollo.image, pollox, polloy);
        }
    }
}

function movecerdo(evento) {
    var movimiento = 10;
    switch (evento.keyCode) {
        case cerdo.UP:
            cerdo.y = cerdo.y - movimiento;
            redibujar();
            // console.log("Arriba"+cerdo.y);
            break;
        case cerdo.DOWN:
            cerdo.y = cerdo.y + movimiento;
            redibujar();
            // console.log("Abajo"+cerdo.y);
            break;
        case cerdo.LEFT:
            cerdo.x = cerdo.x - movimiento;
            // console.log("Izquierda"+cerdo.x);
            redibujar();
            break;
        case cerdo.RIGHT:
            cerdo.x = cerdo.x + movimiento;
            // console.log("Derecha"+cerdo.x);
            redibujar();
            break;
        default:
        // console.log("ota tecla");
    }
}

function redibujar() {
    if (fondo.carga) {
        papel.drawImage(fondo.image, fondo.x, fondo.y);
    }
    if (vaca.carga) {
        for (var i = 0; i < cantidadvacas; i++) {
            vacax=puntosVacas[i][0];
            vacay=puntosVacas[i][1];
            papel.drawImage(vaca.image, vacax, vacay);
        }
    }
    if (cerdo.carga) {
        papel.drawImage(cerdo.image, cerdo.x, cerdo.y);
    }
    if (pollo.carga) {
        for (var i = 0; i < cantidadpollos; i++) {
            pollox=puntosPollos[i][0];
            polloy=puntosPollos[i][1];
            papel.drawImage(pollo.image, pollox, polloy);
        }
    }
}

function aleatorio(min, max) {
    var resultado = Math.floor(Math.random() * (max - min + 1)) + min;
    return resultado;
}
var teclas = {LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40};
var vp = document.getElementById("villaplatzi");
papel = vp.getContext("2d");

//creamos variables para almacenar las posiciones de las imagenes generadas al hazar para luego
//redibujarlas en su misma posicion. revisa esto a mas profundidad en la linea de codigo 104
xc = 0;
yc = 0;
xp = 0;
yp = 0;
xv = 0;
yv = 0;

var fondo = {
  url: "tile.png",
  cargaOK: false
}
var vaca = {
  url: "vaca.png",
  cargaOK: false
}
var cerdo = {
  url: "cerdo.png",
  cargaOK: false
}
var pollo = {
  url: "pollo.png",
  cargaOK: false
}

//Creando las Imagenes
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", cargarVaca);

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

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

//Cargando las 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();
}

//funciones para dibujar
function dibujar()
{
  if (fondo.cargaOK == true)
  {
    papel.drawImage(fondo.imagen,0,0);
  }
  if (vaca.cargaOK)
  {
    var xvi = aleatorio(0,420);
    var yvi = aleatorio(0,420);
    papel.drawImage(vaca.imagen,xvi,yvi);
    xv = xvi;
    yv = yvi;
  }
  if (pollo.cargaOK)
  {
    var xpi = aleatorio(0,420);
    var ypi = aleatorio(0,420);
    papel.drawImage(pollo.imagen,xpi,ypi);
    xp = xpi;
    yp = ypi;
  }
  if (cerdo.cargaOK)
  {
    var xci = aleatorio(0,420);
    var yci = aleatorio(0,420);
    papel.drawImage(cerdo.imagen, xci, yci);
    xc = xci;
    yc = yci;
  }
  document.addEventListener("keydown", moverCerdo);
}

//funcion para mover al cerdo y al mismo tiempo voler a dibujar todo
//con las variables delmprincipio donde guardamos las posiciones
//aleatorias generadas en la funcion dibujar. ya que sin esto el
//el cerdo dejara rastos al ser dibujado

function moverCerdo (evento)
{
    switch (evento.keyCode)
    {
      case teclas.LEFT:

        console.log("izquierda");
        xc = xc-10;
        papel.drawImage(fondo.imagen, 0, 0);
        papel.drawImage(vaca.imagen, xv, yv);
        papel.drawImage(pollo.imagen, xp, yp);
        papel.drawImage(cerdo.imagen, xc, yc);
      break;
      case teclas.RIGHT:

        console.log("Derecha")
        xc = xc + 10;
        papel.drawImage(fondo.imagen, 0, 0);
        papel.drawImage(vaca.imagen, xv, yv);
        papel.drawImage(pollo.imagen, xp, yp);
        papel.drawImage(cerdo.imagen, xc, yc);
      break;
      case teclas.UP:

        console.log("Arrirba");
        yc = yc-10;
        papel.drawImage(fondo.imagen, 0, 0);
        papel.drawImage(vaca.imagen, xv, yv);
        papel.drawImage(pollo.imagen, xp, yp);
        papel.drawImage(cerdo.imagen, xc, yc);
      break;
      case teclas.DOWN:

        console.log("Abajo");
        yc = yc+10;
        papel.drawImage(fondo.imagen, 0, 0);
        papel.drawImage(vaca.imagen, xv, yv);
        papel.drawImage(pollo.imagen, xp, yp);
        papel.drawImage(cerdo.imagen, xc, yc);
      break;
      default:
      break;
    }
}
function aleatorio(min, maxi)
{
  var resultado;
  resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
  return resultado;
}

Yo hice que se pueda elegir a que personaje quieres mover, y para que se mantuvieran en el mismo lugar los otros hice que se borrara la posici贸n del personaje con clearRect y que se dibujara todo de nuevo con la nueva posici贸n del personaje

var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};

var vp = document.getElementById("villplatzi");
var papel = vp.getContext("2d");
var mapa = "tile.png";

var fondo = {
  url: "tile.png",
  cargaOk: false
};
var vaca = {
  url: "vaca.png",
  cargaOk: false
};
var cerdo = {
  url: "cerdo.png",
  cargaOk: false
};
var pollo = {
  url: "pollo.png",
  cargaOk: false
};

var cantidadVacas = aleatorio(5, 25);
var cantidadCerdos = aleatorio(5, 25);
var cantidadPollos = aleatorio(5, 25);

var xCerdo = 210;
var yCerdo = 210;

document.addEventListener("keydown", moverCerdo);

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);

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

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

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

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

xCerdo = aleatorio(0, 7) * 60;
yCerdo = aleatorio(0, 7) * 60;

function dibujar() {
  if (fondo.cargaOk) {
    papel.drawImage(fondo.imagen, 0, 0);
  }
  if (vaca.cargaOk) {
    console.log(cantidadVacas);
    for (var v = 0; v < cantidadVacas; v++) {
      var x = aleatorio(0, 7);
      var y = aleatorio(0, 7);
      x = x * 60;
      y = y * 60;
      papel.drawImage(vaca.imagen, x, y);
    }
  }
  if (cerdo.cargaOk) {
    console.log(cantidadCerdos);
    papel.drawImage(cerdo.imagen, xCerdo, yCerdo);
  }
  if (pollo.cargaOk) {
    console.log(cantidadPollos);
    for (var p = 0; p < cantidadPollos; p++) {
      var x = aleatorio(0, 7);
      var y = aleatorio(0, 7);
      x = x * 60;
      y = y * 60;
      papel.drawImage(pollo.imagen, x, y);
    }
  }
}

function moverCerdo(ev) {
  var movCerdo = 10;
  switch (ev.keyCode) {
    case teclas.UP:
      yCerdo = yCerdo - movCerdo;
      dibujar();
      break;
    case teclas.DOWN:
      yCerdo = yCerdo + movCerdo;
      dibujar();
      break;
    case teclas.LEFT:
      xCerdo = xCerdo - movCerdo;
      dibujar();
      break;
    case teclas.RIGHT:
      xCerdo = xCerdo + movCerdo;
      dibujar();
      break;
    default:
      console.log("Otra tecla");
      break;
  }
}

function aleatorio(min, max) {
  var resultado;
  resultado = Math.floor(Math.random() * (max - min + 1)) + min;
  return resultado;
}

Reto del movimiento del cerdo:

var canvas=document.getElementById('canvas');
var lienzo= canvas.getContext("2d");
var nvacas=aleatorio(1,50);//numero de vacas que se van a generar
document.addEventListener("keydown",moverCerdo);
var x=aleatorio(0,420);//posicion x del cerdo al iniciar
var y=aleatorio(0,420);//posicion y del cerdo al iniciar
var xi,yi;//variables para generar las vacas
var teclas={
  UP:38,
  DOWN:40,
  LEFT:37,
  RIGHT:39,
};
var mapa={
  url : "tile.png",
  cargaOK:false
};
var vaca={
  url:"vaca.png",
  cargaOK:false
};
var cerdo={
  url:"cerdo.png",
  cargaOK:false
};

var arrayX=[];//ARRAY PARA GUARDAR LA POSICION DE LA VACA EN EL EJE X
var arrayY=[];//ARRAY PARA GUARDAR LA POSICION DE LA VACA EN EL EJE Y

mapa.imagen= new Image();
mapa.imagen.src=mapa.url;
mapa.imagen.addEventListener("load",cargarFondo);

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

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


function dibujar() {
  if (mapa.cargaOK) {
    lienzo.drawImage(mapa.imagen,0,0);
  }
  for (var i = 0; i < nvacas; i++) {
    xi=aleatorio(0,7);
    yi=aleatorio(0,7);
    xi=xi*60;
    yi=yi*60;
    if (vaca.cargaOK) {
      lienzo.drawImage(vaca.imagen,xi,yi);
    }
    arrayX[i]=xi;
    arrayY[i]=yi;
  }
    if (cerdo.cargaOK) {
      lienzo.drawImage(cerdo.imagen,x,y);
    }
}
function moverCerdo(evento) {//CUANDO SE EJECUTA ESTA FUNCION, CARGA EL FONDO, LAS VACAS Y LA NUEVA POSICION DEL CERDO
  var mov=10;//CUANTOS PIXELES SE MUEVE EL CERDO
  lienzo.clearRect(0, 0, canvas.width, canvas.height);//limpiar el canvas
  if (mapa.cargaOK) {//cargar otra vez el fondo
    lienzo.drawImage(mapa.imagen,0,0);
  }
  //GENERAR LAS VACAS OTRA VEZ EN SU MISMA POSICION CON LOS ARRAYX Y ARRAYY
  for (var i = 0; i < arrayX.length; i++) {

    if (vaca.cargaOK) {
      lienzo.drawImage(vaca.imagen,arrayX[i],arrayY[i]);
    }
  }

  if ((evento.keyCode!=teclas.UP)&&(evento.keyCode!=teclas.DOWN)
  &&(evento.keyCode!=teclas.LEFT)&&(evento.keyCode!=teclas.RIGHT)) {
    //Este bloque evita que al presionar cualquier flecha que no sea el cerdo,desaparezca el cerdo
    lienzo.drawImage(cerdo.imagen,x,y);
  }

  //MOVIMIENTO DEL CERDO

  if ((cerdo.cargaOK)&&(evento.keyCode==teclas.UP)) {
    lienzo.drawImage(cerdo.imagen,x,y-mov);
    y-=mov;
  }

  if ((cerdo.cargaOK)&&(evento.keyCode==teclas.DOWN)) {
    lienzo.drawImage(cerdo.imagen,x,y+mov);
    y+=mov;
  }

  if ((cerdo.cargaOK)&&(evento.keyCode==teclas.LEFT)) {
    lienzo.drawImage(cerdo.imagen,x-mov,y);
    x-=mov;
  }

  if ((cerdo.cargaOK)&&(evento.keyCode==teclas.RIGHT)) {
    lienzo.drawImage(cerdo.imagen,x+mov,y);
    x+=mov;
  }

}
function cargarFondo() {
  mapa.cargaOK=true;
  dibujar();
}
function cargarVaca() {
  vaca.cargaOK=true;
  dibujar();
}
function cargarCerdo() {
  cerdo.cargaOK=true;
  dibujar();
}
function aleatorio(min,max) {
  var resultado;
  resultado=Math.floor(Math.random()*(max-min+1))+min;
  return resultado;
}
<var vp=document.getElementById("villaplatziteclado");
var papel= vp.getContext("2d");


var vaca = { //variable objeto la forma como se separan los atributos es con ,
  url:"vaca.png",
  cargaOK:false
};

var cerdo = { //variable objeto la forma como se separan los atributos es con ,
  url:"cerdo.png",
  cargaOK:false
};

var pollos = { //variable objeto la forma como se separan los atributos es con ,
  url:"pollo.png",
  cargaOK:false
};

var fondo = {
url:"tile.png",
cargaOK:false
}

var teclas= {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};



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);


pollos.imagen= new Image();
pollos.imagen.src= pollos.url;
pollos.imagen.addEventListener("load", cargarPollos);


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

function cargarVacas()
{
  vaca.cargaOK=true;
  dibujar();
}

function cargarCerdos()
{
  cerdo.cargaOK=true;
  dibujar();

}

function cargarPollos()
{
  pollos.cargaOK=true;
  dibujar();
}

function dibujar()
{

  if(fondo.cargaOK)
  {
    papel.drawImage(fondo.imagen, 0, 0);
  }

  if(vaca.cargaOK)
  {
    x=aleatorio(0,400);
    y=aleatorio(0,400);
    papel.drawImage(vaca.imagen, x, y);
  }

  if(cerdo.cargaOK)
  {
      x=aleatorio(0,400);
      y=aleatorio(0,400);
      aleatorio(0,400);
      papel.drawImage(cerdo.imagen, x, y);//pinta el cerdo
      document.addEventListener("keydown", Tecladocerdo);

    }

 if(pollos.cargaOK)
  {

      x=aleatorio(0,400);
      y=aleatorio(0,400);
      aleatorio(0,400);
      papel.drawImage(pollos.imagen, x, y);
      document.addEventListener("keydown", Tecladopollos);

  }
}//FIN DIBUJAR

function Tecladocerdo(evento)
{
var movimiento=20;
switch(evento.keyCode){

  case teclas.UP:
  console.log(evento.keyCode);
  papel.drawImage(cerdo.imagen, x, y-movimiento);//pinta el cerdo
  y=y-movimiento;
  break;

  case teclas.DOWN:
  console.log(evento.keyCode);
  papel.drawImage(cerdo.imagen, x, y+movimiento);//pinta el cerdo
  y=y+movimiento;
    break;

  }
}//fin tecladocerdo

  function Tecladopollos(evento)
  {
  var movimiento=20;
  switch(evento.keyCode){

    case teclas.LEFT:
    console.log(evento.keyCode);
    papel.drawImage(pollos.imagen, x-movimiento, y);//pinta el pollo
    x=x-movimiento;
      break;

      case teclas.RIGHT:
      console.log(evento.keyCode);
      papel.drawImage(pollos.imagen, x+movimiento, y);//pinta el pollo
      x=x+movimiento;
        break;
}//cierre switch
}// fin teclado pollos

function aleatorio(min, max)
{
  var resultado;
  resultado= Math.floor(Math.random ()*(max-min+1))+min;

  return resultado;
}
>  


en esta oportunidad, respondo al retor de pintar los cerdos con las teclas arriba y abajo y los pollos derecha e izquierda; pero me toma la 煤ltima posici贸n es decir me pinta desde el 煤ltimo x y, alguien sabe como hacer para que tome el x y de cerdos aparte y el xy de pollos aparte. por otro lado borrar la imagen anterior para que parezca camina

Moviendo al Pollo

var teclas ={
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

var vp = document.getElementById("villaPlatzi");
var papel = vp.getContext("2d");
var xp = 0;
var yp = 0;
var cant = aleatorio(1, 20);
var xv = [];
var yv = [];

for(var v = 0; v < cant; v++)
{
    var x = aleatorio(0, 5) * 80;
    var y = aleatorio(0, 5) * 80;
    xv[v]=x;
    yv[v]=y;
}

var vaca = {
    url: "vaca.png",
    cargaOK: false
};
var pollo = {
    url: "pollo.png",
    cargaOK: false
};
var fondo = {
    url: "tile.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", cargarVaca);

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

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

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

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

function dibujar()
{
    if(fondo.cargaOK)
    {
        papel.drawImage(fondo.imagen, 0, 0);
    }
    if(vaca.cargaOK)
    {
        for(var v = 0; v < cant; v++)
        {
            papel.drawImage(vaca.imagen, xv[v], yv[v]);
        }
    }
    if(pollo.cargaOK)
    {
        papel.drawImage(pollo.imagen, xp, yp);
    }
}

document.addEventListener("keydown", moverPollo);

function moverPollo(evento)
{
    switch(evento.keyCode)
    {
        case teclas.DOWN:
            yp = yp + 1;             
        break;
        case teclas.UP:
            yp = yp - 1;              
        break;
        case teclas.RIGHT:
            xp = xp+ 1;
        break;
        case teclas.LEFT:
            xp = xp - 1;
        break;
    }
    dibujar();
}

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

Muy r谩pido Freddy!!

Comparto mis resultados DESAFIO 2
Un placer aprender con y de ustedes compa帽eros.

<code>
```var vp=document.getElementById("area_villa");
var papel=vp.getContext("2d");

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

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

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

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

var cantidadVacas= aleatorio(2, 10);
//var cantidadCerdos= aleatorio(5, 15);
var cantidadPollos= aleatorio(1, 5);
console.log(cantidadVacas + " Vaquitas");
//console.log(cantidadCerdos + " Cerditos");
console.log(cantidadPollos + " Pollitos");

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", cargarVaca);

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

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

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

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


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


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

function dibujar()
{
	if(fondo.cargaOk)
	{
		papel.drawImage(fondo.imagen, 0, 0);
	}

	if(vaca.cargaOk)
	{
		for(var v=0; v<cantidadVacas; v++)
		{
			var x = aleatorio(0, 5);
			var y = aleatorio(0, 5);
			var x = x * 80;
			var y = y * 80;
			papel.drawImage(vaca.imagen, x, y);
		}

	}

	if(pollo.cargaOk)
	{
		for(var p=0; p<cantidadPollos; p++)
		{
			var x=aleatorio(0, 5);
			var y=aleatorio(0, 5);
			var x = x * 80;
			var y = y * 80;
			papel.drawImage(pollo.imagen, x, y);
		}
	}


	if(cerdo.cargaOk)
	{
		papel.drawImage(cerdo.imagen, xini, yini);	
	}
	

}

	var teclas= {
	UP: 38,
	DOWN: 40,
	LEFT: 37,
	RIGHT: 39
	};	
	document.addEventListener("keyup", dibujarPuercos);
	var xini = aleatorio(0, 420);
	var yini = aleatorio(0, 420);

function dibujarPuercos(evento)
{ 
	var movimiento=30;


	switch(evento.keyCode)
	{
		case teclas.UP:
		papel.drawImage(cerdo.imagen, xini, yini - movimiento);
		yini = yini - movimiento;
		break;

		case teclas.DOWN:
		papel.drawImage(cerdo.imagen, xini, yini + movimiento);
		yini = yini + movimiento;
		break;

		case teclas.LEFT:
		papel.drawImage(cerdo.imagen, xini - movimiento, yini);
		xini = xini - movimiento;
		break;

		case teclas.RIGHT:
		papel.drawImage(cerdo.imagen, xini + movimiento, yini);
		xini = xini + movimiento;
		break;

		default:
		alert("Lo arruinaste!!!");
		break;
	}
}

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

Por fin logre mover al pollo

var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

console.log(teclas);

document.addEventListener("keydown", moverPollo);
var vp = document.getElementById("villaPlatzi");
var papel = vp.getContext("2d");
var xP = 250;
var yP = 250;


var fondo = {
    url: "tile.webp",
    cargaOK: false
}

var vaca = {
    url: "vaca.webp",
    cargaOK: false
};

var cerdo = {
    url: "cerdo.webp",
    cargaOK: false
}

var pollo = {
    url: "pollo.webp",
    cargaOK: false
}

var cantidad = aleatorio(1, 7);
var cantidadCerdo = aleatorio(1, 7);

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", cargarPollo);

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

function cargarVacas()
{
    vaca.cargaOK = true;
    dibujar();
}

function cargarCerdos()
{
    cerdo.cargaOK = true;
    dibujar();
}

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

function dibujar()
{
    if(fondo.cargaOK)
    {
        papel.drawImage(fondo.imagen, 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.imagen, x, y);
        }

    }
    if(cerdo.cargaOK)
    {
        console.log(cantidadCerdo);
        for(var c =0; c < cantidadCerdo; c++){
            var x = aleatorio(0, 7);
            var y = aleatorio(0, 7);
            var x = x * 60;
            var y = y * 60;
            papel.drawImage(cerdo.imagen, x, y);
        }

    }
    if(pollo.cargaOK)
    {
        papel.drawImage(pollo.imagen, xP, yP);
    }
}

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

function moverPollo(evento)
{
    var movimiento =10;
    switch(evento.keyCode)
    {
        case teclas.LEFT:
            xP = xP - movimiento;
            dibujar(xP, yP);
        break;
        case teclas.UP:
            yP = yP - movimiento;
            dibujar(xP, yP);
        break;
        case teclas.RIGHT:
            xP = xP + movimiento;
            dibujar(xP, yP);
        break;
        case teclas.DOWN:
            yP = yP + movimiento;
            dibujar(xP, yP);
        break;
    }
}```

Esto es parte de un DESAF脥O propuesto por Juan Camilo Moyano Orjuela.
鈥淎l generar las criaturas en posiciones aleatorias con el mouse somos capaces de seleccionar cualquiera y moverla a nuestro antojo con las flechas del teclado

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Villa</title>
</head>
<body>
	
	<canvas width="500" height="500" id="villa"></canvas>
	<script type="text/javascript" src="codigo.js"></script>
	<p>BY MIGUEL MORENO | mr</p>
</body>
<!-- MR -->
</html>

JS

var vp = document.getElementById("villa"); //Obtiene el elemento canvas mediante el id
var lienzo = vp.getContext("2d"); //Da el contexto al canvas de "2d"

vp.addEventListener("mousedown", seleccion);

//--------------- Detalles de los elementos ------------------

var ancho = vp.width; //Recoje el width del canvas
var alto = vp.height; //Recoje el height del canvas

var teclas = {
	top: 38,
	down: 40,
	left: 37,
	right: 39
}

var fondo = {
	ruta: "images/tile.png",
	carga: false,
	x: aleatorio(0, ancho-80),
	y: aleatorio(0, alto-80)
}

var vaca = {
	ruta: "images/vaca.png",
	carga: false,
	x: aleatorio(0, ancho-80),
	y: aleatorio(0, alto-80)
}

var pollo = {
	ruta: "images/pollo.png",
	carga: false,
	x: aleatorio(0, ancho-80),
	y: aleatorio(0, alto-80)
}

var cerdo = {
	ruta: "images/cerdo.png",
	carga: false,
	x: aleatorio(0, ancho-80), 
	y: aleatorio(0, alto-80),
}

var amp = 20; //distancia de desplazamiento del elemento

//-----------------------------------

fondo.imagen = new Image(); //Creaci贸n de objeto del fondo en el JSON fondo
fondo.imagen.src = fondo.ruta; //Le agrega al atributo src de Image la ruta del fondo
fondo.imagen.addEventListener("load", cargarFondo); //cuando el fondo ya se carg贸 llama a la funcion "dibujar"

vaca.imagen = new Image(); //---------------VACA
vaca.imagen.src = vaca.ruta; //Le agrega al atributo src de Image la ruta de la vaca
vaca.imagen.addEventListener("load", cargarVacas);

pollo.imagen = new Image(); //--------------POLLO
pollo.imagen.src = pollo.ruta; //Le agrega al atributo src de Image la ruta del pollo
pollo.imagen.addEventListener("load", cargarPollos);

cerdo.imagen = new Image(); //--------------CERDO
cerdo.imagen.src = cerdo.ruta; //Le agrega al atributo src de Image la ruta del cerdo
cerdo.imagen.addEventListener("load", cargarCerdos);

function dibujar(){
	if(fondo.carga && vaca.carga && pollo.carga && cerdo.carga){ //Si todos estan cargados...
		lienzo.drawImage(fondo.imagen, 0, 0); //Dibuja el fondo
		lienzo.drawImage(vaca.imagen, vaca.x, vaca.y); //Dibuja la vaca
		lienzo.drawImage(pollo.imagen, pollo.x, pollo.y); //Dibuja el pollo
		lienzo.drawImage(cerdo.imagen, cerdo.x, cerdo.y); //Dibuja el cerdo
	}
}

function cargarFondo(){ //Carga el fondo
	fondo.carga = true; //Avisa que el fondo ya se carg贸
	dibujar(); //Ejecuta la funcion principal de dibujar
}

function cargarVacas(){ //Carga la vaca
	vaca.carga = true; //Avisa que la vaca ya se carg贸
	dibujar(); //Ejecuta la funcion principal de dibujar
}

function cargarPollos(){ //Carga el pollo
	pollo.carga = true; //Avisa que el pollo ya se carg贸
	dibujar(); //Ejecuta la funcion principal de dibujar
}

function cargarCerdos(){ //Carga el pollo
	cerdo.carga = true; //Avisa que el cerdo ya se carg贸
	dibujar(); //Ejecuta la funcion principal de dibujar
}

function moverVaca(evento){ //Mueve cerdo
	switch(evento.keyCode){
		case teclas.top:
			vaca.y -= amp;
		break;
		case teclas.down:
			vaca.y += amp;
		break;
		case teclas.left:
			vaca.x -= amp;
		break;
		case teclas.right:
			vaca.x += amp;
		break;
		default:;
	}
	dibujar();
}

function moverPollo(evento){ //Mueve cerdo
	switch(evento.keyCode){
		case teclas.top:
			pollo.y -= amp;
		break;
		case teclas.down:
			pollo.y += amp;
		break;
		case teclas.left:
			pollo.x -= amp;
		break;
		case teclas.right:
			pollo.x += amp;
		break;
		default:;
	}
	dibujar();
}

function moverCerdo(evento){ //Mueve cerdo
	switch(evento.keyCode){
		case teclas.top:
			cerdo.y -= amp;
		break;
		case teclas.down:
			cerdo.y += amp;
		break;
		case teclas.left:
			cerdo.x -= amp;
		break;
		case teclas.right:
			cerdo.x += amp;
		break;
		default:;
	}
	dibujar();
}

function seleccion(evento){
	var clickX = evento.offsetX;
	var clickY = evento.offsetY;
	if(evento.which == 1){
		if(vaca.x <= clickX && vaca.x+80 >= clickX && vaca.y <= clickY && vaca.y+80 >= clickY){
			addEventListener("keyup", moverVaca);
		} else {
			removeEventListener("keyup", moverVaca);
		}

		if(pollo.x <= clickX && pollo.x+80 >= clickX && pollo.y <= clickY && pollo.y+80 >= clickY){
			addEventListener("keyup", moverPollo);
		} else {
			removeEventListener("keyup", moverPollo);
		}

		if(cerdo.x <= clickX && cerdo.x+80 >= clickX && cerdo.y <= clickY && cerdo.y+80 >= clickY){
			addEventListener("keyup", moverCerdo);
		} else {
			removeEventListener("keyup", moverCerdo);
		}
	}
}

function aleatorio(min, max){ //Numero aleatorio entre un minimo y un maximo
	var resultado = Math.floor(Math.random() * (max-min+1)) + min; //Da un numero aleatorio entre max y min
	return resultado; //Retorna el resultado
}
// MR

LOGRADO!!!

  • Las vacas aparecen de forma aleatoria
  • El cerdo se puede mover con las flechas del teclado y las vacas siguen en su misma posici贸n鈥
    Fue algo extenso lograr que las vacas (que aparecen aleatoriamente) se 鈥渜uedaran鈥 en el mismo lugar, entendiendo que lo que se hace es sobreescribir todas las im谩genes con cada movimiento del cerdo鈥
  • Y por 煤ltimo y no menos importante, el cerdo se desplaza y no desaparece cuando llega a los bordes del lienzo. Se queda quieto.
var cv = document.getElementById("cowville");
var papel = cv.getContext("2d");

document.addEventListener("keydown", moverCerdo);//Detectar cuando una tecla deja de ser presionada

var maxVacas = 10;//Cantidad m谩xima de maxVacas
var minVacas = 1;//Cantidad m铆nima de vacas

var distancia = 5;
var posXFijaCer, posYFijaCer;//Posicion fija del cerdo cuando ya se ha cargado y ha aparecido por primera vez

//POSICIONES FIJAS DE LAS VACAS CREADAS, GUARDADAS EN UNA MATRIZ
var posFijaVacas = [
  [2],
  [maxVacas]//definici贸n de variables para X y Y
]

//objetos de las im谩genes a cargar
var fondo = {
  url: "tile.jpg",
  cargaOK: false
};

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

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

//OBJETO DE LAS FLECHAS DEL TECLADO
var teclas = {
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40
};

//CARGA DE LAS IM脕GENES
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", cargarCerdo);

//FUNCIONES PARA CARGAR LAS IM脕GENES AL SERVIDOR ANTES DE COLOCARLAS EN NUESTRO PAPEL
function cargarFondo() {
  fondo.cargaOK = true;
  crear();
}
function cargarVacas() {
  vaca.cargaOK = true;
  crear();
}
function cargarCerdo() {
  cerdo.cargaOK = true;
  crear();
}

//FUNCI脫N DE DIBUJAR TODO "crear"
function crear() {
  if(fondo.cargaOK) {
    papel.drawImage(fondo.imagen, 0, 0);
  }
  if(vaca.cargaOK) {
    for(var v=0; v<maxVacas; v++) {
      var x = aleatorio(0, 7);
      var y = aleatorio(0, 7);
      var x = x * 60;
      var y = y * 60;
      papel.drawImage(vaca.imagen, x, y);
      posFijaVacas[0][v] = x;
      posFijaVacas[1][v] = y;

    }
  }

  if(cerdo.cargaOK) {
    var x = aleatorio(0, 7);
    var y = aleatorio(0, 7);
    var x = x * 60;
    var y = y * 60;
    papel.drawImage(cerdo.imagen, x, y);
    posXFijaCer = x;
    posYFijaCer = y;
  }
}

//FUNCI脫N PARA MOVER EL CERDO CON LAS TECLAS DEL TECLADO :3
function moverCerdo(teclaPresionada) {

  switch (teclaPresionada.keyCode) {
    case teclas.UP:
      if(fondo.cargaOK) {
        papel.drawImage(fondo.imagen, 0, 0);
      }
      if(vaca.cargaOK) {
        for(var i=0; i<maxVacas; i++){
          papel.drawImage(vaca.imagen, posFijaVacas[0][i], posFijaVacas[1][i]);
        }
      }
      if(cerdo.cargaOK) {
        if(posYFijaCer != 0) {
          papel.drawImage(cerdo.imagen, posXFijaCer, posYFijaCer-distancia);
          posXFijaCer = posXFijaCer;
          posYFijaCer = posYFijaCer-distancia;
        }
        papel.drawImage(cerdo.imagen, posXFijaCer, posYFijaCer);
      }
      break;
    case teclas.DOWN:
    if(fondo.cargaOK) {
      papel.drawImage(fondo.imagen, 0, 0);
    }
    if(vaca.cargaOK) {
      for(var i=0; i<maxVacas; i++){
        papel.drawImage(vaca.imagen, posFijaVacas[0][i], posFijaVacas[1][i]);
      }
    }
    if(cerdo.cargaOK) {
      if(posYFijaCer != 420) {
        papel.drawImage(cerdo.imagen, posXFijaCer, posYFijaCer+distancia);
        posXFijaCer = posXFijaCer;
        posYFijaCer = posYFijaCer+distancia;
      }
      papel.drawImage(cerdo.imagen, posXFijaCer, posYFijaCer);
    }
      break;
    case teclas.LEFT:
    if(fondo.cargaOK) {
      papel.drawImage(fondo.imagen, 0, 0);
    }
    if(vaca.cargaOK) {
      for(var i=0; i<maxVacas; i++){
        papel.drawImage(vaca.imagen, posFijaVacas[0][i], posFijaVacas[1][i]);
      }
    }
    if(cerdo.cargaOK) {
      if(posXFijaCer != 0) {
        papel.drawImage(cerdo.imagen, posXFijaCer-distancia, posYFijaCer);
        posXFijaCer = posXFijaCer-distancia;
        posYFijaCer = posYFijaCer;
      }
      papel.drawImage(cerdo.imagen, posXFijaCer, posYFijaCer);
    }
      break;
    case teclas.RIGHT:
    if(fondo.cargaOK) {
      papel.drawImage(fondo.imagen, 0, 0);
    }
    if(vaca.cargaOK) {
      for(var i=0; i<maxVacas; i++){
        papel.drawImage(vaca.imagen, posFijaVacas[0][i], posFijaVacas[1][i]);
      }
    }
    if(cerdo.cargaOK) {
      if(posXFijaCer != 420) {
        papel.drawImage(cerdo.imagen, posXFijaCer+distancia, posYFijaCer);
        posXFijaCer = posXFijaCer+distancia;
        posYFijaCer = posYFijaCer;
      }
      papel.drawImage(cerdo.imagen, posXFijaCer, posYFijaCer);
    }
      break;
    default:
  }
}

//FUNCION DE CREAR N脷MEROS ALEATORIOS
function aleatorio(min, maxi) {
  var resultado;
  resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
  return resultado;
}

Me costo mucho hacerlo, me gui茅 con los c贸digos de algunos compa帽eros, gracias.

<code>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Villa Platzi</title>
    <style type="text/css">
     body
     {
     background-color: #000000;
     color:white;
     }
     h1
     {
      font-size: 40px;
      font-family: "Times New Roman";
     }
     p
     {
      font-size: 25px;
     }
     #villaplatzi
     {
       border-width: medium;
       border: solid 3px #2338fa;
     }
    </style>
  </head>
  <body>
  <center>
    <h1>Villa Platzi</h1>
    <canvas id="villaplatzi" width="500" height="500"></canvas>
    <script type="text/javascript" src="platzi.js"></script>
    <p>Presiona las flechas del teclado para mover al cerdo.</p>
  </center>
  </body>
</html>
<code>
var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");
document.addEventListener("keydown", moverCerdo);

var fondo = {
  url:"tile.png",
  cargaOK: false
}

var vaca = {
  url:"vaca.png",
  cargaOK: false
};
var xVaca = new Array();
var yVaca = new Array();

var pollo = {
  url:"pollo.png",
  cargaOK: false
};
var xPollo = new Array();
var yPollo = new Array();

var cerdo = {
  url:"cerdo.png",
  cargaOK: false
};
var xCerdo = 200;
var yCerdo = 200;

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", cargarVaca);

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

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

var cantidad_vacas = aleatorio(0, 15);
var cantidad_pollos = aleatorio(0, 15);
console.log("Cantidad de Vacas: " + cantidad_vacas);
console.log("Cantidad de Pollos: " + cantidad_pollos);

function moverCerdo(evento) {
  var movimiento = 30;
  var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
  };

  switch (evento.keyCode) {
    case teclas.UP:
      if (yCerdo > 0) {
        yCerdo = yCerdo - movimiento;
        dibujar();
      }
    break;
    case teclas.DOWN:
      if (yCerdo < 430) {
        yCerdo  = yCerdo  + movimiento;
        dibujar();
      }
    break;
    case teclas.LEFT:
      if (xCerdo > 0) {
        xCerdo = xCerdo - movimiento;
        dibujar();
      }
    break;
    case teclas.RIGHT:
      if(xCerdo < 415) {
        xCerdo = xCerdo + movimiento;
        dibujar();
      }
    break;
    default:
      console.log("Otra tecla : " + evento.key);
    break;
  }
}

function cargarFondo() {
  fondo.cargaOK = true;
  dibujar();
}
function cargarVaca() {
  vaca.cargaOK = true;
  mantenerPosicion();
}
function cargarPollo() {
  pollo.cargaOK = true;
  mantenerPosicion();
}
function cargarCerdo() {
  cerdo.cargaOK = true;
  dibujar();
}

function mantenerPosicion() {
  if (vaca.cargaOK) {
    for (var i = 0; i < cantidad_vacas; i++) {
      var x = aleatorio(0, 6);
      var y = aleatorio(0, 6);
      var x = x * 70;
      var y = y * 70;
      xVaca[i] = x;
      yVaca[i] = y;
    }
  }
  if (pollo.cargaOK) {
    for (var i = 0; i < cantidad_pollos; i++) {
      var x = aleatorio(0, 6);
      var y = aleatorio(0, 6);
      var x = x * 70;
      var y = y * 70;
      xPollo[i] = x;
      yPollo[i] = y;
    }
  }
  dibujar();
}

function dibujar() {
  if (fondo.cargaOK) {
    papel.drawImage(fondo.imagen, 0, 0);
  }
  if (vaca.cargaOK) {
    for (var i = 0; i < cantidad_vacas; i++) {
      papel.drawImage(vaca.imagen, xVaca[i], yVaca[i]);
    }
  }
  if (pollo.cargaOK) {
    for (var i = 0; i < cantidad_pollos; i++) {
      papel.drawImage(pollo.imagen, xPollo[i], yPollo[i]);
    }
  }
  if (cerdo.cargaOK) {
    papel.drawImage(cerdo.imagen, xCerdo, yCerdo);
  }
}

function aleatorio(min, max) {
  var resultado;
  resultado = Math.floor(Math.random() * (max - min + 1)) + min;
  return resultado;
}

Creo que me tom茅 este reto muy enserio y quise hacer que al dar click en alg煤n animal se pudiera mover. Me demor茅 un mot贸n pero tambi茅n aprend铆 un mont贸n de cosas nuevas.

let vp = document.getElementById("villaplatzi");
let canv = vp.getContext("2d");
let indexToMove; //we use this to select the item to be moved when we click on it
step = 10;

vp.addEventListener("click", selectAnimal);

class Thing {
    constructor(url, name) {
        this.type = name;
        this.loadedOK = false;
        this.image = new Image();
        this.image.src = url;
        this.image.addEventListener("load", eval("load" + name));
    }
}

let background = new Thing("tile.png", "Background");
let pig = new Thing("cerdo.png", "Pig");
let cow = new Thing("vaca.png", "Cow");
let chicken = new Thing("pollo.png", "Chicken");
let picturesInCanv = [];
let animals = [pig, cow, chicken];
let numAnimals=[randI(1,10),randI(1,10),randI(1,10)];

for (let i = 0; i <= animals.length - 1; i++) {
    console.log("there are " + numAnimals[i] + " " + animals[i].type + "s");
}

function draw() {
    if (background.loadedOK) {
        canv.drawImage(background.image, 0, 0);
        let k = 0;
        for (let i = 0; i <= animals.length - 1; i++) {



            if (animals[i].loadedOK) {
                for (let j = 0; j < numAnimals[i]+1; j++) {
                    xComp = randI(i, 5 + i) * 60;
                    yComp = randI(i, 20 + i) * 20;
                    picturesInCanv[k] = [animals[i].image, xComp, yComp];
                    k++;
                    canv.drawImage(animals[i].image, xComp, yComp);
                }
            }

        }
    }
}

function drawKey(event) {
    if (event.keyCode === 38) {
        drawStep(0, -1)
    } else if (event.keyCode === 39) {
        drawStep(1, 0)
    } else if (event.keyCode === 40) {
        drawStep(0, 1)
    } else if (event.keyCode === 37) {
        drawStep(-1, 0)
    }
}

function reDraw() {//redraw in canvas
    canv.drawImage(background.image, 0, 0);
    for (let j = 0; j < picturesInCanv.length; j++) {
        canv.drawImage(picturesInCanv[j][0], picturesInCanv[j][1], picturesInCanv[j][2]);
    }
}

function drawStep(xs, ys) { //change coordinates of the selected figure
    picturesInCanv[indexToMove][1] += (xs * step);
    picturesInCanv[indexToMove][2] += (ys * step);
    reDraw();
}

function selectAnimal(event) {
    // console.log(event);
    indexToMove = searchInCanv(event.layerX, event.layerY);
    console.log(indexToMove);
    if (indexToMove !== undefined) {
        addEventListener("keydown", drawKey);
    }
}

function searchInCanv(x, y) { //Search for the nearest animal to the point already clicked
    xInd = [];
    yInd = [];
    temp = [];
    indices = [];
    k = -1;

    for (let j = 0; j < picturesInCanv.length; j++) {
        if ((Math.abs(x - picturesInCanv[j][1] - 40) < 20) && (Math.abs(y - picturesInCanv[j][2] - 40) < 20)) {
            k++;
            xInd[k] = x - picturesInCanv[j][1] - 40;
            yInd[k] = y - picturesInCanv[j][2] - 40;
            indices[k] = j;
        }
    }

    for (let j = 0; j < indices.length; j++) {
        temp[j] = Math.sqrt(Math.pow(xInd[j], 2) + Math.pow(yInd[j], 2));
    }
    let minInd = temp.indexOf(Math.min(...temp));
    return indices[minInd];
}

function loadCow() {
    cow.loadedOK = true;
    draw(animals);
}

function loadPig() {
    pig.loadedOK = true;
    draw(animals);
}

function loadChicken() {
    chicken.loadedOK = true;
    draw(animals);
}

function loadBackground() {
    background.loadedOK = true;
    draw(animals);
}

function randF(min, max) {
    let r = Math.random();
    return (max - min + 1) * r + min;
}

function randI(min, max) {
    return Math.floor(randF(min, max));
}

El cerdo se mueve sin dejar un rastro detras de si. De esta manera es mas facil entender el concepto de refresco.

<code>var vp = document.getElementById("villa_platzi");
var papel = vp.getContext("2d");

var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};
var fondo = {
  URL: "tile.png",
  cargaOK: false
};

var cerdo = {
  URL: "cerdo.png",
  cargaOK: false
};

cerdo.imagen = new Image();
cerdo.imagen.src = cerdo.URL;
cerdo.imagen.addEventListener("load", cargarCerdos);

fondo.imagen = new Image();
fondo.imagen.src = fondo.URL;
fondo.imagen.addEventListener("load", cargarFondo);

document.addEventListener("keydown", moverCerdo);

function moverCerdo(evento) {
  var movimiento = 20;
  switch (evento.keyCode) {
    case teclas.UP:
      papel.drawImage(fondo.imagen, 0, 0);
      papel.drawImage(cerdo.imagen, cerdo.currentX, cerdo.currentY - movimiento);
      cerdo.currentY = cerdo.currentY - movimiento;
      break;
    case teclas.DOWN:
      papel.drawImage(fondo.imagen, 0, 0)
      papel.drawImage(cerdo.imagen, cerdo.currentX, cerdo.currentY + movimiento);
      cerdo.currentY = cerdo.currentY + movimiento;
      break;
    case teclas.LEFT:
      papel.drawImage(fondo.imagen, 0, 0)
      papel.drawImage(cerdo.imagen, cerdo.currentX - movimiento, cerdo.currentY);
      cerdo.currentX = cerdo.currentX - movimiento;
      break;
    case teclas.RIGHT:
      papel.drawImage(fondo.imagen, 0, 0)
      papel.drawImage(cerdo.imagen, cerdo.currentX + movimiento, cerdo.currentY);
      cerdo.currentX = cerdo.currentX + movimiento;
      break;
    default:
      console.log("Otra tecla");
  }
}

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

function cargarCerdos() {
  cerdo.cargaOK = true;
  dibujar();
}

function dibujar() {
  if(fondo.cargaOK){
    papel.drawImage(fondo.imagen, 0, 0);
  }
  if (cerdo.cargaOK) {
    var x = aleatorio(0, 420);
    var y = aleatorio(0, 420);
    cerdo.currentX = x;
    cerdo.currentY = y;
    papel.drawImage(cerdo.imagen, x, y);
  }
}

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

Por fin consegu铆 solucionar el problema de mover al granjero sin modificar el resto del canvas. Puesto que 鈥渃ontext.getImageData鈥 genera fallos de seguridad por CORS (cross-origin鈥s recomiendo que le echeis un vistazo), finalmente lo solucion茅 con arrays y clases.

Se pueden generar animales de forma manual o aleatoria sin tener que recargar la pagina. Despu茅s puedes generar un granjero, el cual podr谩s desplazar de forma manual con las flechas del teclado, 隆隆隆隆隆 Y SIN MODIFICAR LA POSICI脫N DE LOS ANIMALES EN EL CANVAS!!!

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Villa Platzi</title>
    <style media="screen">
      body
      {
        background-color: #46991f;
      }
      canvas
      {
        background-color: white;
      }
    </style>
  </head>
  <body>
    <h1>Nuestra granja mo帽as</h1>
    <p>Selecciona el n煤mero de animales de cada tipo</p>
    <p>N煤mero de <strong>vacas</strong> : <input type="text" id="botonHtmlVacas" value="0"><input type="button" id="botonAleatorioVacasHtml" value="ALEATORIO"></p>
    <p>N煤mero de <strong>cerdos</strong> : <input type="text" id="botonHtmlCerdos" value="0"><input type="button" id="botonAleatorioCerdosHtml" value="ALEATORIO"></p>
    <p>N煤mero de <strong>pollos</strong> : <input type="text" id="botonHtmlPollos" value="0"><input type="button" id="botonAleatorioPollosHtml" value="ALEATORIO"></p>
    <p></p>
    <p>RANGO ALEATORIO: M铆nimo:<input type="text" id="aleatorioMinimoHtml" value="0">  M谩ximo:<input type="text" id="aleatorioMaximoHtml" value="0"></p>
    <p></p>
    <p><input type="button" id="botonHtmlGenerar" value="GENERAR ESCENARIO"><input type="button" id="botonHtmlGranjero" value="GENERAR GRANJERO"></p>
    <canvas id="canvasHtml" width="500" height="500"></canvas>
    <p><strong>*PUEDES MOVER AL GRANJERO CON LAS TECLAS*</strong></p>
    <script type="text/javascript" src="villaPlatziJavaBien.js"></script>
  </body>
</html>


var canvasJava = document.getElementById("canvasHtml");
var lienzo = canvasJava.getContext("2d");
var botonVacas = document.getElementById("botonHtmlVacas");
var botonCerdos = document.getElementById("botonHtmlCerdos");
var botonPollos = document.getElementById("botonHtmlPollos");
var botonAleatorioVacas = document.getElementById("botonAleatorioVacasHtml");
var botonAleatorioCerdos = document.getElementById("botonAleatorioCerdosHtml");
var botonAleatorioPollos = document.getElementById("botonAleatorioPollosHtml");
var aleatorioMinimo = document.getElementById("aleatorioMinimoHtml");
var aleatorioMaximo = document.getElementById("aleatorioMaximoHtml");
var botonGenerar = document.getElementById("botonHtmlGenerar");
var botonGranjero = document.getElementById("botonHtmlGranjero");

class Elemento
{
  constructor(nom, url, load, dib, posicionX, posicionY)
  {
    this.nombre = nom;
    this.imagen = new Image;
    this.imagen.src = url;
    this.cargado = load
    this.dibujado = dib;
    this.posicionX = posicionX;
    this.posicionY = posicionY;
  }
}

var granja = new Elemento("granjaVillaPlatzi", "tile.png", false, false, 0, 0);
var vaca = new Elemento("vacaVillaPlatzi", "vaca.png", false, false, 0, 0);
var cerdo = new Elemento("cerdoVillaPlatzi", "cerdo.png", false, false, 0, 0);
var pollo = new Elemento("polloVillaPlatzi", "pollo.png", false, false, 0, 0);
var granjero = new Elemento("granjeroVillaPlatzi", "granjero.png", false, false, 0, 0);

granja.imagen.addEventListener("load", cargarImagenGranja);
vaca.imagen.addEventListener("load", cargarImagenVaca);
cerdo.imagen.addEventListener("load", cargarImagenCerdo);
pollo.imagen.addEventListener("load", cargarImagenPollo);
granjero.imagen.addEventListener("load", cargarImagenGranjero);

var numeroVacas;
var numeroCerdos;
var numeroPollos;
var numeroAleatorioMinimo;
var numeroAleatorioMaximo;

var vacas = [];
var cerdos = [];
var pollos = [];


botonAleatorioVacas.addEventListener("click", establecerAleatorioVacas);
botonAleatorioCerdos.addEventListener("click", establecerAleatorioCerdos);
botonAleatorioPollos.addEventListener("click", establecerAleatorioPollos);

botonGenerar.addEventListener("click", dibujarImagen);
botonGranjero.addEventListener("click", crearGranjero);

document.addEventListener("keydown", moverGranjero);


function establecerAleatorioVacas()
{
  numeroAleatorioMinimo = parseInt(aleatorioMinimo.value);
  numeroAleatorioMaximo = parseInt(aleatorioMaximo.value);

  if (numeroAleatorioMaximo > numeroAleatorioMinimo)
  {
    botonVacas.value = Math.floor(Math.random() * (numeroAleatorioMaximo - numeroAleatorioMinimo + 1) + numeroAleatorioMinimo);
  }

  if (numeroAleatorioMaximo < numeroAleatorioMinimo)
  {
    botonVacas.value = Math.floor(Math.random() * (numeroAleatorioMinimo - numeroAleatorioMaximo + 1) + numeroAleatorioMaximo);
  }
}

function establecerAleatorioCerdos()
{
  numeroAleatorioMinimo = parseInt(aleatorioMinimo.value);
  numeroAleatorioMaximo = parseInt(aleatorioMaximo.value);

  if (numeroAleatorioMaximo > numeroAleatorioMinimo)
  {
    botonCerdos.value = Math.floor(Math.random() * (numeroAleatorioMaximo - numeroAleatorioMinimo + 1) + numeroAleatorioMinimo);
  }

  if (numeroAleatorioMaximo < numeroAleatorioMinimo)
  {
    botonCerdos.value = Math.floor(Math.random() * (numeroAleatorioMinimo - numeroAleatorioMaximo + 1) + numeroAleatorioMaximo);
  }
}

function establecerAleatorioPollos()
{
  numeroAleatorioMinimo = parseInt(aleatorioMinimo.value);
  numeroAleatorioMaximo = parseInt(aleatorioMaximo.value);

  if (numeroAleatorioMaximo > numeroAleatorioMinimo)
  {
    botonPollos.value = Math.floor(Math.random() * (numeroAleatorioMaximo - numeroAleatorioMinimo + 1) + numeroAleatorioMinimo);
  }

  if (numeroAleatorioMaximo < numeroAleatorioMinimo)
  {
    botonPollos.value = Math.floor(Math.random() * (numeroAleatorioMinimo - numeroAleatorioMaximo + 1) + numeroAleatorioMaximo);
  }
}

function cargarImagenGranja()
{
  granja.cargado = true
}

function cargarImagenVaca()
{
  vaca.cargado = true
}

function cargarImagenCerdo()
{
  cerdo.cargado = true
}

function cargarImagenPollo()
{
  pollo.cargado = true
}

function cargarImagenGranjero()
{
  granjero.cargado = true
}


function dibujarImagen()
{
  numeroVacas = parseInt(botonVacas.value);
  numeroCerdos = parseInt(botonCerdos.value);
  numeroPollos = parseInt(botonPollos.value);

  console.log("Hay " + numeroVacas + " vacas");
  console.log("Hay " + numeroCerdos + " cerdos");
  console.log("Hay " + numeroPollos + " pollos");

  if (granja.cargado == true)
  {
    lienzo.drawImage(granja.imagen,granja.posicionX,granja.posicionY);
  }

  if (vaca.cargado == true)
  {
    for (var i = 0; i < numeroVacas; i++)
    {
      var x = Math.floor(Math.random() * (6 - 0 + 1) + 0) * 70;
      var y = Math.floor(Math.random() * (6 - 0 + 1) + 0) * 70;

      vacas[i] = new Elemento("vacaVillaPlatzi"+i, "vaca.png", true, true, x, y);

      lienzo.drawImage(vaca.imagen,x,y);
    }
  }

  if (cerdo.cargado == true)
  {
    for (var i = 0; i < numeroCerdos; i++)
    {
      var x = Math.floor(Math.random() * (10 - 0 + 1) + 0) * 42;
      var y = Math.floor(Math.random() * (10 - 0 + 1) + 0) * 42;

      cerdos[i] = new Elemento("cerdoVillaPlatzi"+i, "cerdo.png", true, true, x, y);

      lienzo.drawImage(cerdo.imagen,x,y);
    }
  }

  if (pollo.cargado == true)
  {
    for (var i = 0; i < numeroPollos; i++)
    {
      var x = Math.floor(Math.random() * (20 - 0 + 1) + 0) * 21;
      var y = Math.floor(Math.random() * (20 - 0 + 1) + 0) * 21;

      pollos[i] = new Elemento("polloVillaPlatzi"+i, "pollo.png", true, true, x, y);

      lienzo.drawImage(pollo.imagen,x,y);
    }
  }
}

function crearGranjero()
{
  if (granjero.cargado == true)
  {
    var x = Math.floor(Math.random() * (6 - 0 + 1) + 0) * 70;
    var y = Math.floor(Math.random() * (6 - 0 + 1) + 0) * 70;

    granjero.posicionX = x;
    granjero.posicionY = y;

    lienzo.drawImage(granjero.imagen,x,y);
    granjero.dibujado = true;
  }
}

function moverGranjero(info)
{
  console.log("tecla pulsada");

  if (granjero.dibujado == true)
  {
    if (info.keyCode == 37)
    {
      console.log("tecla izquierda");

      granjero.posicionX = granjero.posicionX - 10;

      dibujarGranjero();
    }
    if (info.keyCode == 38)
    {
      console.log("tecla arriba");

      granjero.posicionY = granjero.posicionY - 10;

      dibujarGranjero();

    }
    if (info.keyCode == 39)
    {
      console.log("tecla derecha");

      granjero.posicionX = granjero.posicionX + 10;

      dibujarGranjero();

    }
    if (info.keyCode == 40)
    {
      console.log("tecla abajo");

      granjero.posicionY = granjero.posicionY + 10;

      dibujarGranjero();
    }
  }
}

function dibujarGranjero()
{
  lienzo.drawImage(granja.imagen, granja.posicionX, granja.posicionY);

  for (var i = 0; i < numeroVacas; i++)
  {
    lienzo.drawImage(vacas[i].imagen, vacas[i].posicionX, vacas[i].posicionY);
  }

  for (var i = 0; i < numeroCerdos; i++)
  {
    lienzo.drawImage(cerdos[i].imagen, cerdos[i].posicionX, cerdos[i].posicionY);
  }

  for (var i = 0; i < numeroPollos; i++)
  {
    lienzo.drawImage(pollos[i].imagen, pollos[i].posicionX, pollos[i].posicionY);
  }

  lienzo.drawImage(granjero.imagen,granjero.posicionX,granjero.posicionY);
}

Le pus茅 un zorro en vez de un cerdo 馃槃

// Objetos
var canvas_vp = document.getElementById("villa_platzi");
var papel_vp = canvas_vp.getContext("2d");
console.log(papel_vp);
var teclado = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};
var movimiento = 10;

// Tenemos un fondo
var fondo  = {
    url: "tile.png",
    cargaOK: false
}
fondo.imagen = new Image();
fondo.imagen.src = fondo.url;

// Tenemos solo un 煤nico objeto zorro
var zorro  = {
    url: "zorro.png",
    cargaOK: false
}
zorro.imagen = new Image();
zorro.imagen.src = zorro.url;

// Creo una lista de "objetos" vaca
var cantidadVacas = aleatorio(5, 25);
listaVacas = new Array ();
for (var v = 0; v < cantidadVacas; v ++)
{
    listaVacas[v] = {
        url: "vaca.png",
        cargaOK: false
    }
    listaVacas[v].imagen = new Image();
    listaVacas[v].imagen.src = listaVacas[v].url;
    listaVacas[v].x = aleatorio(0, canvas_vp.width / listaVacas[v].imagen.width) * listaVacas[v].imagen.width;
    listaVacas[v].y = aleatorio(0, canvas_vp.height / listaVacas[v].imagen.height) * listaVacas[v].imagen.height;
    listaVacas[v].imagen.addEventListener("load", cargarVacas);
}
var VacasOK = 0;

// Creo una lista de "objetos" cerdo
var cantidadCerdos = aleatorio(5, 25);
listaCerdos = new Array ();
for (var c = 0; c < cantidadCerdos; c ++)
{
    listaCerdos[c] = {
        url: "cerdo.png",
        cargaOK: false
    }
    listaCerdos[c].imagen = new Image();
    listaCerdos[c].imagen.src = listaCerdos[c].url;
    listaCerdos[c].x = aleatorio(0, canvas_vp.width / listaCerdos[c].imagen.width) * listaCerdos[c].imagen.width;
    listaCerdos[c].y = aleatorio(0, canvas_vp.height / listaCerdos[c].imagen.height) * listaCerdos[c].imagen.height;
    listaCerdos[c].imagen.addEventListener("load", cargarCerdos);
}
var CerdosOK = 0;

// Creo una lista de "objetos" pollo
var cantidadPollos = aleatorio(5, 25);
listaPollos = new Array ();
for (var p = 0; p < cantidadPollos; p ++)
{
    listaPollos[p] = {
        url: "pollo.png",
        cargaOK: false
    }
    listaPollos[p].imagen = new Image();
    listaPollos[p].imagen.src = listaPollos[p].url;
    listaPollos[p].x = aleatorio(0, canvas_vp.width / listaPollos[p].imagen.width) * listaPollos[p].imagen.width;
    listaPollos[p].y = aleatorio(0, canvas_vp.height / listaPollos[p].imagen.height) * listaPollos[p].imagen.height;
    listaPollos[p].imagen.addEventListener("load", cargarPollos);
}
var PollosOK = 0;

// Event listeners
fondo.imagen.addEventListener("load", cargarFondo);
zorro.imagen.addEventListener("load", cargarZorros);
document.addEventListener("keydown", moverZorro);

var xi = aleatorio(0, canvas_vp.width / zorro.imagen.width) * zorro.imagen.width;
var yi = aleatorio(0, canvas_vp.height / zorro.imagen.height) * zorro.imagen.height;

// Funciones
function aleatorio (minimo, maximo) 
{
    var resultado;
    resultado = Math.floor( Math.random() * (maximo - minimo + 1)) + minimo;
    return resultado;
}

function dibujar ()
{
    /*
    Vamos a dibujar todo en orden, cada vez que cargue una nueva imagen .
    El orden afecta visualmente c贸mo se ven los objetos
    */
    if (fondo.cargaOK) 
    {
        papel_vp.drawImage(fondo.imagen, 0, 0);
    }
    // Si todas las vacas han sido cargadas, despliega sus imagenes
    if (VacasOK == cantidadVacas)
    {
        for(var v = 0; v < cantidadVacas; v++)
        {
            papel_vp.drawImage(listaVacas[v].imagen, listaVacas[v].x, listaVacas[v].y);
        }
    }
    // Si todas los cerdos han sido cargados, despliega sus imagenes
    if (CerdosOK == cantidadCerdos)
    {
        for(var c = 0; c < cantidadCerdos; c++)
        {
            papel_vp.drawImage(listaCerdos[c].imagen, listaCerdos[c].x, listaCerdos[c].y);
        }
    }
    // Si todas los pollos han sido cargados, despliega sus imagenes
    if (PollosOK == cantidadPollos)
    {
        for(var p = 0; p < cantidadPollos; p++)
        {
            papel_vp.drawImage(listaPollos[p].imagen, listaPollos[p].x, listaPollos[p].y);
        }
    }

    if (zorro.cargaOK)
    {
        papel_vp.drawImage(zorro.imagen, xi, yi);
    }
}

function cargarFondo () 
{
    // Indicamos que es momento de desplegar el fondo
    fondo.cargaOK = true;
    dibujar();
}

function cargarVacas ()
{
    // Cada que termina de cargar un vaca, se incrementa el contador
    VacasOK = VacasOK + 1;
    dibujar();
}

function cargarPollos ()
{
    // Cada que termina de cargar un pollo, se incrementa el contador
    PollosOK = PollosOK + 1;
    dibujar();
}

function cargarCerdos () 
{
    // Cada que termina de cargar un cerdo, se incrementa el contador
    CerdosOK = CerdosOK + 1;
    dibujar();
}

function cargarZorros () 
{
    // Indicamos que es momento de desplegar el zorro
    zorro.cargaOK = true;
    dibujar();
}

function moverZorro (evento)
{
    switch(evento.keyCode) {
        case teclado.UP:
            papel_vp.drawImage(zorro.imagen, xi, yi - movimiento);
            yi = yi - movimiento;
            dibujar();
        break;
        case teclado.DOWN:
            papel_vp.drawImage(zorro.imagen, xi, yi + movimiento);
            yi = yi + movimiento;
            dibujar();
        break;
        case teclado.LEFT:
            papel_vp.drawImage(zorro.imagen, xi - movimiento, yi);
            xi = xi - movimiento;
            dibujar();
        break;
        case teclado.RIGHT:
            papel_vp.drawImage(zorro.imagen, xi + movimiento, yi);
            xi = xi + movimiento;
            dibujar();
        break;
    }
}```

Aqu铆 est谩 mi aporte. Guarde las posiciones de la vaca y el cerdo, para que el pollo se moviera sin dejar 鈥渕arca鈥. Adem谩s, cuando el pollo llega a los bordes se dispara un alert y el pollo no puede salir del canvas.

document.addEventListener("keydown", moveChicken);

var vc = document.getElementById("villa_celis");
var paper = vc.getContext("2d");

var keys = {LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40};

var cow_x = [];
var cow_y = [];
var pig_x = [];
var pig_y = [];

var backg = {url: "tile.png", loadOK: false};
var cow = {url: "vaca.png", loadOK: false};
var pig = {url: "cerdo.png", loadOK: false};
var chicken = {url: "pollo.png", loadOK: false};

var color_1 = "#840dd7";
var xx =  randomNumber(0, 7);
var yy =  randomNumber(0, 7);
var quantity = randomNumber(1, 10);

backg.picture = new Image();
backg.picture.src = backg.url;
backg.picture.addEventListener("load", loadBackGround);

cow.picture = new Image();
cow.picture.src = cow.url;
cow.picture.addEventListener("load", loadCows);

pig.picture = new Image();
pig.picture.src = pig.url;
pig.picture.addEventListener("load", loadPigs);

chicken.picture = new Image();
chicken.picture.src = chicken.url
chicken.picture.addEventListener("load", loadChickens);

function loadBackGround(event)
{
  backg.loadOK = true;
  draw();
}

function loadCows(event)
{
  cow.loadOK = true;
  draw();
}

function loadPigs(event)
{
  pig.loadOK = true;
  draw();
}

function loadChickens(event)
{
  chicken.loadOK = true;
  draw();
}

function draw()
{
  if (backg.loadOK == true)
  {
    paper.drawImage(backg.picture, 0, 0);
  }
  if (cow.loadOK == true)
  {
    for (var c = 0; c < quantity; c++)
    {
      console.log(quantity);
      var x = randomNumber(0,7);
      var y = randomNumber(0,7);
      x = x*60;
      y = y*60;
      paper.drawImage(cow.picture, x, y);
      cow_x[c] = x;
      cow_y[c] = y;
    }
  }
  if (pig.loadOK == true)
  {
    for (var p = 0; p < quantity; p++)
    {
      console.log(quantity);
      var x = randomNumber(0, 7);
      var y = randomNumber(0, 7);
      x = x*60;
      y = y*60;
      paper.drawImage(pig.picture, x, y);
      pig_x[p] = x;
      pig_y[p] = y;
    }
  }
    if (chicken.loadOK == true)
    {
      console.log(paper);
      xx = xx*60;
      yy = yy*60;
      paper.drawImage(chicken.picture, xx, yy);
    }
}
function drawChicken()
{
}
function moveChicken(event)
{
  var move = 5;
  if (event.type == "keydown") {
    switch (event.keyCode) {
      case keys.UP:
      paper.clearRect(0, 0, 500, 500);
      paper.drawImage(backg.picture, 0, 0);
      for (var i = 0; i < cow_x.length; i++)
      {
        paper.drawImage(cow.picture, cow_x[i], cow_y[i]);
        paper.drawImage(pig.picture, pig_x[i], pig_y[i]);
      }
      if (yy > 0)
      {
        paper.drawImage(chicken.picture,xx, yy);
        yy = yy - move;
      }
      else
      {
        alert("NO PUEDES SALIR DE LA GRANJA");
      }
      break;
      case keys.DOWN:
      paper.clearRect(0, 0, 500, 500);
      paper.drawImage(backg.picture, 0, 0);
      for (var i = 0; i < cow_x.length; i++)
      {
        paper.drawImage(cow.picture, cow_x[i],cow_y[i]);
        paper.drawImage(pig.picture, pig_x[i], pig_y[i]);
      }
      if (yy < 430)
      {
        paper.drawImage(chicken.picture,xx, yy);
        yy = yy + move;
      }
      else
      {
        alert("NO PUEDES SALIR DE LA GRANJA");
      }
      break;
      case keys.RIGHT:
      paper.clearRect(0, 0, 500, 500);
      paper.drawImage(backg.picture, 0, 0);
      for (var i = 0; i < cow_x.length; i++)
      {
        paper.drawImage(cow.picture, cow_x[i],cow_y[i]);
        paper.drawImage(pig.picture, pig_x[i], pig_y[i]);
      }
      if (xx < 430)
      {
        paper.drawImage(chicken.picture,xx, yy);
        xx = xx + move;
      }
      else
      {
        alert("NO PUEDES SALIR DE LA GRANJA");
      }
      break;
      case keys.LEFT:
      paper.clearRect(0, 0, 500, 500);
      paper.drawImage(backg.picture, 0, 0);
      for (var i = 0; i < cow_x.length; i++)
      {
        paper.drawImage(cow.picture, cow_x[i],cow_y[i]);
        paper.drawImage(pig.picture, pig_x[i], pig_y[i]);
      }
      if (xx > 0 )
      {
        paper.drawImage(chicken.picture,xx, yy);
        xx = xx - move;
      }
      else
      {
        alert("NO PUEDES SALIR DE LA GRANJA");
      }
      break;
      default:
    }
  }
}

function randomNumber(min, max) {
  var result;
  result = Math.floor(Math.random() * (max - min + 1)) + min;
  return result;
}

Lo logreeeeeeeee 馃槃 solo que las vacas se mueven bien aleatorias cada vez que muevo el cerdo jajaja.

var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");
document.addEventListener("keyup", moverCerdo);

var xcerdo = 0;
var ycerdo = 0;
var movimiento = 20;
var teclas = {
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40
};

var fondo = {
  url: "tile.png",
  cargaOK: false
};

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

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

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

var cantidad =  aleatorio(1, 38);

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);

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 dibujar()
{
  if (fondo.cargaOK == true)
  {
    papel.drawImage(fondo.imagen, 0, 0);
  }
  if (vaca.cargaOK == true)
  {
    for (var i = 0; i < cantidad; i++)
    {
      var xvaca = 80 * (aleatorio(0, 5));
      var yvaca = 80 * (aleatorio(0, 5));
      papel.drawImage(vaca.imagen, xvaca, yvaca);
      console.log(cantidad);
    }
  }
  if (cerdo.cargaOK == true)
  {
    papel.drawImage(cerdo.imagen, xcerdo, ycerdo);
  }
  if (pollo.cargaOK == true)
  {
    papel.drawImage(pollo.imagen, 50, 300);
  }
}

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

function moverCerdo(evento)
{
  switch (evento.keyCode)
  {
    case teclas.DOWN:
    ycerdo = ycerdo + movimiento;
    dibujar();
    break;
    case teclas.UP:
    ycerdo = ycerdo - movimiento;
    dibujar();
    break;
    case teclas.RIGHT:
    xcerdo = xcerdo + movimiento;
    dibujar();
    break;
    case teclas.LEFT:
    xcerdo = xcerdo - movimiento;
    dibujar();
    break;
    default:
      console.log("otra tecla");
  }
}


Recordando los viejos tiempos de SmallVille

Es 100% real cuando dicen que el 90% del tiempo te pasas leyendo el c贸digo y no escribi茅ndolo, pas茅 muchas horas, y no pude sola, lo logr茅 gracias a la comunidad de compa帽eros, aunque a veces terminas m谩s confundido por todas las mejoras que hacen en sus programas.

Para los que est谩n empezando como yo, por aqu铆 les dejo lo que pidi贸 Freddy, espero les sirva.

HTML:

Y el JavaScript

HICE UN JUEGO DE COMER FRUTAS DE LA GRANJA!
(PUEDES MOVERTE CON A-W-S-D) O EN CASO QUE ESTES EN CELULAR CON BOTONES:

Aqui dejo la pagina:
https://boomcrash.github.io/MinijuegoGranja/
Aqui dejo mi codigo fuente:
https://github.com/boomcrash/MinijuegoGranja

Al inicio no pod铆a mantener a los animales en su posici贸n, pero despu茅s vi que hay una la objeto Array, con este objeto puedes guardar en memoria todos los valores que se obtiene dek ciclo for

var a = new Array();

for (var i = 0; i < 10; i++)
{
    var b = 5*i;
    a[i]=b;
  }
console.log(a);
document.write(a);

Adjunto mi c贸digo de JS

var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");
var teclas =
{
  UP:38,
  DOWN:40,
  LEFT:37,
  RIGHT:39
};

var xL = 0;
var yL = 0;

var xV = new Array();
var yV = new Array();

var xP = new Array();
var yP = new Array();

var xC = new Array();
var yC = new Array();

var cantidad = 10;


var fondo={
  url:"tile.png",
  cargaOk: false
};
var lobo =
{
  url:"lobo.png",
  cargaOk: false,
  estado:1
};
var vaca =
{
  url:"vaca.png",
  cargaOk: false
};
var pollo =
{
  url:"pollo.png",
  cargaOk: false,
};
var cerdo =
{
  url:"cerdo.png",
  cargaOk: false,
};

fondo.imagen = new Image();
fondo.imagen.src = fondo.url;
fondo.imagen.addEventListener("load",cargarFondo);

lobo.imagen = new Image();
lobo.imagen.src = lobo.url;
lobo.imagen.addEventListener("load",cargarLobo);

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

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

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

function cargarFondo()
{
  fondo.cargaOk = true;
  dibujar();
}
function cargarLobo()
{
  lobo.cargaOk = true;
  dibujar();
}
function cargarVaca()
{
  vaca.cargaOk = true;
  dibujar();
}
function cargarPollo()
{
  pollo.cargaOk = true;
  dibujar();
}
function cargarCerdo()
{
  cerdo.cargaOk = true;
  dibujar();
}
//funcion dibujar y mantener posicion//
function dibujar()
{
  if (fondo.cargaOk==true)
  {
    papel.drawImage(fondo.imagen, 0,0)
  }
  if (lobo.cargaOk==true)
  {
    papel.drawImage(lobo.imagen, xL,yL)
  }
  if (vaca.cargaOk==true)
  {
    for (var i = 0; i < cantidad; i++)
    {
      if (lobo.estado==1) //dibujo aleatorio//
      {
        var x=aleatorio(0,5);
        var y=aleatorio(0,5);
        x=80*x;
        y=80*y;
        papel.drawImage(vaca.imagen, x,y);
        xV[i]=x;//almacena todos los valores que toma x en cada ciclo//
        yV[i]=y;//almacena todos los valores que toma y en cada ciclo//
      }
      if (lobo.estado==2) //mantiene la posicion//
      {
        papel.drawImage(vaca.imagen, xV[i], yV[i]);//dibujamos con los valores almacenados//
      }
    }
  }
  if (pollo.cargaOk==true)
  {
    for (var i = 0; i < cantidad; i++)
    {
      if (lobo.estado==1)
      {
        var x=aleatorio(0,5);
        var y=aleatorio(0,5);
        x=80*x;
        y=80*y;
        papel.drawImage(pollo.imagen, x,y);
        xP[i]=x;
        yP[i]=y;
      }
      if (lobo.estado==2)
      {
        papel.drawImage(pollo.imagen, xP[i], yP[i]);
      }
    }
  }
  if (cerdo.cargaOk==true)
  {
    for (var i = 0; i < cantidad; i++)
    {
      if (lobo.estado==1)
      {
        var x=aleatorio(0,5);
        var y=aleatorio(0,5);
        x=80*x;
        y=80*y;
        papel.drawImage(cerdo.imagen, x,y);
        xC[i]=x;
        yC[i]=y;
      }
      if (lobo.estado==2)
      {
        papel.drawImage(cerdo.imagen, xC[i], yC[i]);
      }
    }
  }
}

function aleatorio(min, max)
{
  var resultado;
  resultado = Math.floor(Math.random()*(max-min+1))+min;
  return resultado;
}
//evento presionar tecla, llama a la funcion dibujarTeclado//
document.addEventListener("keydown", moverTeclado);
//movimientos con el teclado//
function moverTeclado(evento)
{
  //declaracion del tama帽o del movimiento//
  var movimiento = 10;
  switch (evento.keyCode)
  {
    case teclas.UP:
      yL = yL - movimiento;
      lobo.estado=2;
      dibujar();
    break;
    case teclas.DOWN:
      yL = yL + movimiento;
      lobo.estado=2;
      dibujar();
    break;
    case teclas.LEFT:
      xL = xL - movimiento;
      lobo.estado=2;
      dibujar();
    break;
    case teclas.RIGHT:
      xL = xL + movimiento;
      lobo.estado=2;
      dibujar();
    break;
    default:
    console.log("Otra tecla");
  }
}

Hola!, dej茅 el cerdo con el evento keydown para que tambi茅n se mueva al mantener presionadas las flechas. Cada vez que muevo el cerdo se cambia todo lo dem谩s (excepto el fondo. Me gustar铆a que luego de aparecer los pollos y vacas pudiera mover el cerdo y los pollos y vacas mantuvieran su cantidad y posici贸n inicial. Si alguien lo logr贸 que me avise por favor 馃槂


var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};
// iniciamos el canvas
var vp = document.getElementById("villaplatzi");
var papel = vp.getContext("2d");

// este tipo de objetos b谩sicos concede atributos simples.
var fondo = {
    url: "tile.png",
    cargaOk: false
}
var vaca = {
    url: "vaca.png",
    cargaOk: false,
    x_pollo : 0,
    y_pollo : 0
}
var pollo = {
    url: "pollo.png",
    cargaOk: false,
    x_pollo : 0,
    y_pollo : 0
}
var cerdo = {
    url: "cerdo.png",
    cargaOk: false,
    x_cerdo : 0,
    y_cerdo : 0
}

var cantidad_vacas = aleatorio(10, 20);
var cantidad_pollos = aleatorio(1, 5);
var cantidad_cerdos = 1;
var primera_carga = 0;

// el objeto fondo.imagen o cualquiera de los listados a continuaci贸n,  se crean a partir de los objetos b谩sicos creados m谩s arriba.
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);

function cargarFondo() {
    fondo.cargaOK = true;
    dibujar();
}
function cargarVacas() {
    vaca.cargaOK = true;
    dibujar();
}
function cargarPollos() {
    pollo.cargaOK = true;
    dibujar();
}
function cargarCerdos() {
    cerdo.cargaOK = true;
    dibujar();
}

function dibujar() {

    if (fondo.cargaOK) {
                //console.log("Fondo: " + cantidad_vacas);
                papel.drawImage(fondo.imagen, 0, 0);
            }
            if (vaca.cargaOK) {
            // console.log("Vacas: " + cantidad_vacas);
                for (var v = 0; v < cantidad_vacas; v++) {
                    x_vaca = (aleatorio(0, 7))*60;
                    y_vaca = (aleatorio(0, 7))*60;
                    papel.drawImage(vaca.imagen, x_vaca, y_vaca);
                }
            }
            if (pollo.cargaOK) {
            // console.log("pollos: " + cantidad_pollos);
                for (var p = 0; p < cantidad_pollos; p++) {
                    x_pollo = (aleatorio(0, 7))*60;
                    y_pollo = (aleatorio(0, 7))*60;
                    papel.drawImage(pollo.imagen, x_pollo, y_pollo);
                }
            }
            if (cerdo.cargaOK) {
                if (primera_carga < 4){
                    cerdo.x_cerdo = aleatorio(0, 420);
                    cerdo.y_cerdo = aleatorio(0, 420);
                } 
                    papel.drawImage(cerdo.imagen, cerdo.x_cerdo, cerdo.y_cerdo);
                     
            }
   primera_carga++;
   console.log(primera_carga);
}

function aleatorio(min, max) {
    var resultado;
    resultado = Math.floor(Math.random() * (max - min + 1)) + min;
    return resultado;
}

// Captura la tecla presionada cuando se presiona
document.addEventListener("keydown", moverCerdo);
// captura el evento por defecto 
function moverCerdo(evento) {
  
     var movimiento = 10;
     //captura el evento espec铆fico del objeto evento 
     switch (evento.keyCode) {

        case teclas.UP:
            cerdo.y_cerdo = cerdo.y_cerdo - movimiento;
            break;
        case teclas.DOWN:
            cerdo.y_cerdo = cerdo.y_cerdo + movimiento;
            break;
        case teclas.LEFT:
            cerdo.x_cerdo = cerdo.x_cerdo - movimiento;
            break;
         case teclas.RIGHT:
            cerdo.x_cerdo = cerdo.x_cerdo + movimiento;

            break;
        default: 
            console.log("otra tecla");
        }
        dibujar();
}

Que dificil desafio jajaja, pensaba q era mas f谩cil. Empece en el mundo de la programacion con este curso y este desafio pudo conmigo. A seguir que esto recien empiezaaa!!! Fuerza para todos y principalmente a los que estan empezando como yo, no bajen la cabeza que nada se aprende de un dia para el otro