Debes tener cuenta en Platzi

Para ver esta clase abierta debes iniciar sesión

Iniciar sesión

En canvas puedes insertar imágenes, hagámoslo con nuestra villa platzi.

Recuerda:

Debemos agregar la imagen en el evento load del objeto.

Debemos usar el método .drawImage del canvas para insertar la imagen.

Canvas dibuja siempre encima del último objeto.

Carlos Viteri

Yo introduje un personaje, es un lobo que se mueve entre los animales de granja:

Y también logré hacer que mantuvieron sus posiciones poniéndolas en un arreglo que se mantiene cada vez que se llama a dibujar:

var vp = document.getElementById("villaplatzi");

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

document.addEventListener("keydown", moverLobo);

var xLobo = 150;

var yLobo = 100;

var xVaca = new Array();

var yVaca = new Array();

var xCerdo = new Array();

var yCerdo = new Array();

var xPollo = new Array();

var yPollo = new Array();

function moverLobo(e)

	var movimiento = 64;

	var teclas =

		LEFT: 37,

		UP: 38,

		RIGHT: 39,

		DOWN: 40

	switch(e.keyCode)

		case teclas.LEFT:

			xLobo = xLobo - movimiento;

			dibujar(xLobo, yLobo);

		break;

		case teclas.UP:

			yLobo = yLobo - movimiento;

			dibujar(xLobo, yLobo);

		break;

		case teclas.RIGHT:

			xLobo = xLobo + movimiento;

			dibujar(xLobo, yLobo);

		break;

		case teclas.DOWN:

			yLobo = yLobo + movimiento;

			dibujar(xLobo, yLobo);

		break;

var fondo =

	url: "tile.png",

	carga: false

var lobo =

	url: "lobo.png",

	carga: false

var vaca =

	url: "vaca.png",

	carga: false

var pollo =

	url: "pollo.png",

	carga: false

var cerdo =

	url: "cerdo.png",

	carga: false

lobo.imagen = new Image();

lobo.imagen.src = lobo.url;

lobo.imagen.addEventListener("load", cargaLobo);

fondo.imagen = new Image();

fondo.imagen.src = fondo.url;

fondo.imagen.addEventListener("load", cargaFondo);

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

function cargaLobo()

	lobo.carga = true;

	dibujar();

function cargaFondo()

	fondo.carga = true;

	dibujar();

function cargaPollo()

	pollo.carga = true;

	mantenerPosicion();

function cargaCerdo()

	cerdo.carga = true;

	mantenerPosicion();

function cargaVaca()

	vaca.carga = true;

	mantenerPosicion();

function mantenerPosicion()

	if(vaca.carga)

		var cantidad = aleatorio(1, 5);

		for(var i=0; i<cantidad; i++)

			var x = aleatorio(0, 6);

			var y = aleatorio(0, 6);

			x = x*70;

			y = y*70;

			xVaca[i] = x;

			yVaca[i] = y;

	if(cerdo.carga)

		var cantidad = aleatorio(1, 5);

		for(var i=0; i<cantidad; i++)

			var x = aleatorio(0, 6);

			var y = aleatorio(0, 6);

			x = x*70;

			y = y*70;

			xCerdo[i] = x;

			yCerdo[i] = y;

	if(pollo.carga)

		var cantidad = aleatorio(1, 10);

		for(var i=0; i<cantidad; i++)

			var x = aleatorio(0, 6);

			var y = aleatorio(0, 6);

			x = x*70;

			y = y*70;

			xPollo[i] = x;

			yPollo[i] = y;

	dibujar();

function dibujar()

	if(fondo.carga)

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

	if(vaca.carga)

		for(var i=0; i<10; i++){

			papel.drawImage(vaca.imagen, xVaca[i], yVaca[i]);

	if(cerdo.carga)

		for(var i=0; i<10; i++){

			papel.drawImage(cerdo.imagen, xCerdo[i], yCerdo[i]);

	if(pollo.carga)

		for(var i=0; i<10; i++){

			papel.drawImage(pollo.imagen, xPollo[i], yPollo[i]);

	if(lobo.carga)

		papel.drawImage(lobo.imagen, xLobo, yLobo)

function aleatorio(max, min)

	var numero_aleatorio = Math.floor(Math.random() * (max - min + 1)) + min;

	return numero_aleatorio;

brayanmamani

🐱‍💻 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;
}

Juanca

me iba mejor con el “mama ya casi aprendo”

luis_epico

Después de varias horas lo consigo y estoy totalmente feliz

saludo desde Venezuela

si te gusta mi codigo dale like :D

var vp = document.getElementById("villa");

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

var xini = aleatorio(0, 420);

var yini = aleatorio(0, 420);

var velocity = 15;

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,

posX: xini,

posY: yini

};

var teclas = {

UP: 38,

DOWN: 40,

LEFT: 37,

RIGHT: 39

}

var cantidad = 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);

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

document.addEventListener('keydown', movimiento);

function movimiento(evt)

{

switch (evt.keyCode) {

case teclas.UP:

if (cerdo.posY > 0) {

cerdo.posY = cerdo.posY - velocity;

clear();

dibujar();

}

break;

case teclas.DOWN:

if (cerdo.posY < vp.width - 80) {

cerdo.posY = cerdo.posY + velocity;

clear();

dibujar();

}

break;

case teclas.LEFT:

if (cerdo.posX > 0) {

cerdo.posX = cerdo.posX - velocity;

clear();

dibujar();

}

break;

case teclas.RIGHT:

if(cerdo.posX < vp.width - 80){

cerdo.posX = cerdo.posX + velocity;

clear();

dibujar();

}

break;

default:

}

function cargarFondo()

{

fondo.cargaOK = true;

dibujar();

}

function cargarVacas()

{

vaca.cargaOK = true;

dibujar();

}

function cargarPollos()

{

pollo.cargaOK = true;

dibujar();

}

function cargarCerdo ()

{

cerdo.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, 10);

var x = x * 60;

var y = y * 40;

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

}

if(pollo.cargaOK)

{

console.log(cantidad);

for(var v=0; v < cantidad; v++)

{

var x = aleatorio(0, 7);

var y = aleatorio(0, 10);

var x = x * 60;

var y = y * 40;

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

}

if(cerdo.cargaOK)

{

console.log(cantidad);

for(var v=0; v < cantidad; v++)

{

var x = aleatorio(0, 7);

var y = aleatorio(0, 10);

var x = x * 60;

var y = y * 40;

papel.drawImage(cerdo.imagen, cerdo.posX, cerdo.posY);

}

function aleatorio(min, maxi)

{

var resultado;

resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;

return resultado;

}

function clear(){

papel.clearRect(0, 0, vp.width, vp.height);

dibujar();

}

MARTIN ARDILA

cuando resuelves un error de codigo y aparece otro

Rafael Torres

Hola les dejo, mi aporte donde podras capturar pokemones con un entrenador que se mueve con las flechas del teclado.

const vp = document.getElementById("villaplatzi");
const papel = vp.getContext("2d");
const imageWidth= 64;
const imageHeight= 64;
const pasos = 10;
let pokemonIndex = 0;
let posicionX = 250;
let posiciony = 250;

// Assets
const villaPokemonAssets = [
  {
    url:'./img/tile.png',
    esAleatorio: false,
    sePuedeMover: false,
  },
  {
    url:'./img/charizard.png',
    esAleatorio: true,
    sePuedeMover: false,
  },
  {
    url:'./img/señor_mime.png',
    esAleatorio: true,
    sePuedeMover: false,
  },
  {
    url:'./img/evee_envolved.png',
    esAleatorio: true,
    sePuedeMover: false,
  },
  {
    url:'./img/entrenador.png',
    esAleatorio: false,
    sePuedeMover: true,
  }
]

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

//Eventos
document.addEventListener('keydown', moverEntrenadorTeclado);

// Funcion que  permite cargar assets de forma recursiva
function cargarAssest() {

  if(pokemonIndex < villaPokemonAssets.length) {
    const pokemonAsset = villaPokemonAssets[pokemonIndex];

    pokemonAsset.imagen = new Image();
    pokemonAsset.imagen.src = pokemonAsset.url;
    pokemonAsset.imagen.addEventListener("load", function(){
      dibujarPokemonAsset(pokemonAsset);
    });
  }

}


function dibujarPokemonAsset(pokemonAsset)
{
    if(pokemonAsset.esAleatorio) {
      // Dibuja pokemones
      const cantidad = aletorio(1, 2);
      dibujarPokemon(pokemonAsset.imagen, 1)
    } else {

      let x = pokemonAsset.sePuedeMover ? posicionX : 0;
      let y = pokemonAsset.sePuedeMover ? posiciony : 0;

      // Dibuja fondo
      papel.drawImage(pokemonAsset.imagen, x, y)

      // Cargar otro asset
      pokemonIndex++;
      cargarAssest();
    }
}

function dibujarPokemon(imagen, cantidad)
{

  for(let i=0; i < cantidad; i+=1)
  {
    const x = aletorio(0, 6);
    const y = aletorio(0, 6);
    const posX = x * imageWidth;
    const posY = y * imageHeight;
    papel.drawImage(imagen, posX, posY)
  }

  // Cargar otro asset
  pokemonIndex++;
  cargarAssest();
}

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


function moverEntrenadorTeclado(evento)
{
  pokemonIndex = 0;

  switch (evento.keyCode) {
      case teclas.UP:
        posiciony = posiciony - pasos;
      break;
      case teclas.DOWN:
        posiciony = posiciony + pasos;
      break;
      case teclas.LEFT:
        posicionX = posicionX - pasos;
      break;
      case teclas.RIGHT:
        posicionX = posicionX + pasos;
      break;
    default:
        console.log("Ups  los  pokeons se han movido");
  }

  cargarAssest();
}

// Inicio de la app
cargarAssest();

Saludos a todos!!

Jean Carlos González Valverde

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

linkarox

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.

Jesús Lautaro Careglio Albornoz

Juego Villa Platzi

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

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 😄");
}```

Ricardo_C

Les dejo el código de un pequeño juego, Escape Porcino, inspirado en el ejemplo del compañero que incluyó a el lobo. Espero les sea de ayuda. ¡Saludos!

document.addEventListener("keydown", moverCerdo);

//////////Preparacion de variables///////////
var mapa = document.getElementById('granja');
var papel = mapa.getContext("2d");
var xCerdo = 420;
var yCerdo = -15;
var xLobo = new Array();
var yLobo = new Array();

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

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

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

var lobo = {
  url: "lobo.png",
  cargaEst: 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", cargarCerdo);

lobo.imagen = new Image;
lobo.imagen.src = lobo.url;
lobo.imagen.addEventListener("load", cargarLobos);

///////////Funciones que cargan las imagenes/////////
function cargarFondo()
{
  fondo.cargaEst = true;
  dibujar();
}

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

var cantidad = aleatorio(3, 8);
function cargarLobos()
{
  lobo.cargaEst = true;
  for(var l = 0; l < cantidad; l++)
  {
    var x = aleatorio(0, 7);
    var y = aleatorio(0, 7);
    x = x*60;
    y = y*60;
    xLobo[l] = x;
    yLobo[l] = y;
  }
  dibujar();
}

//////////////Funcion que dibuja las imagenes/////
function dibujar()
{
  if (fondo.cargaEst)
  {
    papel.drawImage(fondo.imagen, 0,0);
  }
  if (cerdo.cargaEst)
  {
    papel.drawImage(cerdo.imagen, xCerdo, yCerdo);
  }
  if (lobo.cargaEst)
  {
    dibujarLobos();
  }
}

function dibujarLobos()
{
  for(var l=0; l<cantidad; l++){
    papel.drawImage(lobo.imagen, xLobo[l], yLobo[l]);
  }
}

//////////////Funcion que mueve al cerdo//////
function moverCerdo(pasos)
{

  var movimiento = 5;
  switch (pasos.keyCode)
  {
    case teclas.UP:
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
      papel.drawImage(cerdo.imagen, xCerdo, yCerdo - movimiento);
      yCerdo = yCerdo - movimiento;
    break;
    case teclas.DOWN:
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
      papel.drawImage(cerdo.imagen, xCerdo, yCerdo + movimiento);
      yCerdo = yCerdo + movimiento;
    break;
    case teclas.LEFT:
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
      papel.drawImage(cerdo.imagen, xCerdo - movimiento, yCerdo);
      xCerdo = xCerdo - movimiento;
    break;
    case teclas.RIGHT:
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
      papel.drawImage(cerdo.imagen, xCerdo + movimiento, yCerdo);
      xCerdo = xCerdo + movimiento;
    break;
    default:
      console.log("Presionó otra tecla");
    break;
  }

  if (xCerdo > -5 && xCerdo < 10 && yCerdo>425 && yCerdo<500)
  {
      alert("¡Felicidaes, el cerdo está a salvo!");
  }
  else
  {
    huida();
  }
}

//////Funcion que determina si se comieron al cerdo/////////
function huida()
{
  var xIzqC = xCerdo + 13, ySupC = yCerdo + 28,
      xDerC = xCerdo + 69, yInfC = yCerdo + 50;
  for(var i=0; i<cantidad; i++)
  {
    var xSupL = xLobo[i];
    var ySupL = yLobo[i] + 23;
    var xInfL = xLobo[i] + 64;
    var yInfL = yLobo[i] + 64;

    if ( ((xIzqC > xSupL) && (xIzqC < xInfL)) &&
        ((ySupC > ySupL) && (ySupC < yInfL)) )
    {
      alert("¡Te atrapó el lobo!");
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
    }
    if ( ((xIzqC > xSupL) && (xIzqC < xInfL)) &&
        ((yInfC > ySupL) && (yInfC < yInfL)) )
    {
      alert("¡Te atrapó el lobo!");
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
    }
    if ( ((xDerC > xSupL) && (xDerC < xInfL)) &&
        ((ySupC > ySupL) && (ySupC < yInfL)) )
    {
      alert("¡Te atrapó el lobo!");
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
    }
    if ( ((xDerC > xSupL) && (xDerC < xInfL)) &&
        ((yInfC > ySupL) && (yInfC < yInfL)) )
    {
      alert("¡Te atrapó el lobo!");
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
    }
  }
}

////////////Funcion que crea numeros aleatorios/////////////
function aleatorio(min, maxi)
{
  var resultado;
  resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
  return resultado;
}

Jesús Joel Sarabia Félix

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.

Esperanza Margarita Palacios Vargas

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

JMVRD

(Alguien sabe cuantos caracteres se muestran aqui)
Asi queda mi codigo:

//Definir el lienzo de trabajo
var canva = document.getElementById("my_canvas");
var papel = canva.getContext("2d");
//Definicion de Objetos en json para las estrcuturas de imagenes
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 = {UP:38, DOWN:40, LEFT: 37, RIGHT:39};
//Variables
var total_vacas = aleatorio(0,50);
var total_pollos = aleatorio(0,50);
var cx = 150, cy = 150;
var movimiento = 5;
//Estructuras de Imagenes
fondo.imagen = new Image();//Craemos 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",cargarCerdo);
pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
pollo.imagen.addEventListener("load",cargarPollos);
document.addEventListener("keydown",moverCerdo);
//Funciones Declaradas
function aleatorio(min,max){
  var res;
  res = Math.floor(Math.random()*(max - min +1))+min;
  return res;
}
function cargarFondo(){
  fondo.cargaOk = true;
  dibujar();
}
function cargarVacas(){
  vaca.cargaOk = true;
  vaca.x = [];
  vaca.y = [];
  for(var n=0; n < total_vacas; n++){
    vaca.x[n] = aleatorio(0,7) * 60;
    vaca.y[n] = aleatorio(0,7) * 60;
  }
  dibujar();
}
function cargarCerdo(){
  cerdo.cargaOk = true;
  dibujar();
}
function cargarPollos(){
  pollo.cargaOk = true;
  pollo.x = [];
  pollo.y = [];
  for(var e=0; e < total_pollos; e++){
    pollo.x[e] = aleatorio(0,7) * 80;
    pollo.y[e] = aleatorio(0,4) * 80;
  }
  dibujar();
}
function moverCerdo(evento){
  switch (evento.keyCode){
    case teclas.UP://restar a y
      cy = cy - movimiento;
      if(cy < 0) cy = 0;
      dibujar();
    break;
    case teclas.DOWN://sumar a y
      cy = cy + movimiento;
      if(cy > 420) cy = 420;
      dibujar();
    break;
    case teclas.LEFT://restar a x
      cx = cx - movimiento;
      if(cx < 0) cx = 0;
      dibujar();
    break;
    case teclas.RIGHT://Sumar a y
      cx = cx + movimiento;
      if(cx > 420)cx = 420;
      dibujar();
    break;
    default:
      console.log("No se realiza ninguna accion.");
  }
}
function dibujar(){
    if(fondo.cargaOk){
        papel.drawImage(fondo.imagen,0,0);
    }
    if(vaca.cargaOk){
      for(var v=0; v < total_vacas; v++){
        papel.drawImage(vaca.imagen,vaca.x[v],vaca.y[v]);
      }
    }
    if(cerdo.cargaOk){
        papel.drawImage(cerdo.imagen,cx,cy);
    }
    if(pollo.cargaOk){
      for(var v=0; v < total_pollos; v++){
        papel.drawImage(pollo.imagen,pollo.x[v],pollo.y[v]);
      }
    }
    console.log(pollo.image);
    document.getElementById("status").innerHTML = "<p>Asi queda tu Villa platzi con:<br>" + total_vacas + " vacas, distribuidas aleatoriamente.<br>Un cerdo en la posicion ("+cx+","+cy+") y una gallina.</p>";
}

Espero y se vea todo

Alejandro Tangarife Rivas

Freddy tenía razón 😄. Con este ejercicio literalmente nos explota el cerebro si prestamos total atención. Cada que vez que “El objeto se mueve”, en realidad no se está moviendo, solo se está volviendo a dibujar sobre un mapa nuevo cada vez. 😮

Iteras

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

javier-cubillos

Esta es la mi respuesta al reto 😎

Paula Andrea Rueda Arcila

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

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

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

Captura de pantalla de 2021-01-25 22-29-55.png

Fred Gómez Leyva

Agregué otro personaje:

El objetivo de este nuevo personaje es que te siga mientras te alimentas de los otros animales y detenerte.
Las novedades de esta versión son las siguientes:

Se agrega la imagen de ogro.
Se implementa código para crear dos ogros.
Se almacenan las coordenadas de los animales para que se mantengan en el mismo lugar cuando se vuelva a dibujar el canvas.
Se implementa código para que el lobo “coma” a los animales [los animales desaparecen]
Se implementa función para determinar si alguna coordenada se encuentra disponible, es decir para no insertar dos animales en el mismo punto. También se utiliza para que el los animales sean un obstaculo para los ogros.
Se implementa código para mover el lobo.
Se agrega un marcador de puntos obtenidos.
Se agrega mensaje cuando finaliza el juego.
Se agrega funcionalidad para mover los ogros. Los ogros se mueven dependiendo de un algoritmo que determina cuál es el próximo punto al que se pueden mover los ogros que los dejará más cerca del lobo. Es decir, los ogros te seguirán.

A continuación el código:
HTML

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>VillaPlatzi</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <canvas width="500" height="500" id="canvas_fondo"></canvas>
        <script src="script.js"></script>
    </body>
</html>

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
var canvas_fondo = document.getElementById('canvas_fondo');
var canvas_context = canvas_fondo.getContext('2d');

//EVENTO QUE MOVERÁ AL LOBO AL USAR LAS TECLAS
document.addEventListener('keydown', moverLobo);

//REGISTRO DE LAS TECLAS
var teclas = {
    LEFT: 37,
    UP: 38,
    RIGHT: 39,
    DOWN: 40
};

//REGISTRO DE LOS ELEMENTOS QUE SE DIBUJARÁN EN EL CANVAS
var fondo = {
    url: 'files/tile.png',
    cargaOK: false
};
fondo.imagen = new Image();
fondo.imagen.src = fondo.url;
fondo.imagen.addEventListener('load', function(){
   fondo.cargaOK = true;
   dibujar();
});

var vaca = {
    url: 'files/vaca.png',
    cargaOK: false,
    cantidad: aleatorio(0, 10) //CANTIDAD DE VACAS QUE TENDRÁ EL CANVAS
};
vaca.imagen = new Image();
vaca.imagen.src = vaca.url;
vaca.imagen.addEventListener('load', function(){
    vaca.cargaOK = true;
    dibujar();
});

var cerdo = {
    url: 'files/cerdo.png',
    cargaOK: false,
    cantidad: aleatorio(0, 10) //CANTIDAD DE CERDOS QUE TENDRÁ EL CANVAS
};
cerdo.imagen = new Image();
cerdo.imagen.src = cerdo.url;
cerdo.imagen.addEventListener('load', function(){
   cerdo.cargaOK = true;
   dibujar();
});

var pollo = {
    url: 'files/pollo.png',
    cargaOK: false,
    cantidad: aleatorio(0, 10) //CANTIDAD DE POLLOS QUE TENDRÁ EL CANVAS
};
pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
pollo.imagen.addEventListener('load', function(){
   pollo.cargaOK = true;
   dibujar();
});

var lobo = {
    url: 'files/lobito.png',
    cargaOK: false,
    x: '',
    y: '',
    comidos: 0 //CONTADOR DE ANIMALES COMIDOS POR EL LOBO
};
lobo.imagen = new Image();
lobo.imagen.src = lobo.url;
lobo.imagen.addEventListener('load', function(){
   lobo.cargaOK = true;
   dibujar();
});

var ogros = [];
ogros.push({
    url: 'files/ogro.png',
    cargaOK: false,
    x: '',
    y: ''
});
ogros.push({
    url: 'files/ogro.png',
    cargaOK: false,
    x: '',
    y: ''
});
for (var o = 0; o < ogros.length; o++) {
    ogros[o].imagen = new Image();
    ogros[o].imagen.src = ogros[o].url;
}
ogros[0].imagen.addEventListener('load', function(){
    ogros[0].cargaOK = true;
    dibujar();
});
ogros[1].imagen.addEventListener('load', function(){
    ogros[1].cargaOK = true;
    dibujar();
});
//--------------------FIN----------------------

//CREAMOS UNA VARIABLE QUE ALMACENARÁ LAS COORDENADAS DE CADA ANIMAL, ESTO ES PARA QUE NO CAMBIEN SU POSICIÓN CADA VEZ QUE EL CANVAS SE VUELVA A DIBUJAR
var coordenadasAnimales = [];

//FUNCIÓN PARA DIBUJAR LOS ELEMENTOS DEL CANVAS
function dibujar(){
    //SI NO TENEMOS LAS COORDENADAS DE LOS ANIMALES, EJECUTAMOS LA FUNCIÓN PARA OBTENER LAS POSICIONES
    if (coordenadasAnimales.length === 0) {
        crearCoordenadasAnimales();
    }
    
    //DIBUJO DEL FONDO
    if (fondo.cargaOK) {
        canvas_context.drawImage(fondo.imagen, 0, 0);
    }
    
    //DIBUJO DE LAS VACAS
    if (vaca.cargaOK) {
        for (var i = 0; i < coordenadasAnimales.length; i++) {
            //VALIDAMOS QUE EL ANIMAL ITERADO SEA UNA VACA Y QUE ESTÉ VISIBLE
            if (coordenadasAnimales[i].tipo === 'vaca' && coordenadasAnimales[i].visible) {
                canvas_context.drawImage(vaca.imagen, coordenadasAnimales[i].x, coordenadasAnimales[i].y);
            }
        }
    }
    
    //DIBUJO DE LOS CERDOS
    if (cerdo.cargaOK) {
        for (var i = 0; i < coordenadasAnimales.length; i++) {
            //VALIDAMOS QUE EL ANIMAL ITERADO SEA UN CERDO Y QUE ESTÉ VISIBLE
            if (coordenadasAnimales[i].tipo === 'cerdo' && coordenadasAnimales[i].visible) {
                canvas_context.drawImage(cerdo.imagen, coordenadasAnimales[i].x, coordenadasAnimales[i].y);
            }
        }
    }
    
    //DIBUJO DE LOS POLLOS
    if (pollo.cargaOK) {
        for (var i = 0; i < coordenadasAnimales.length; i++) {
            //VALIDAMOS QUE EL ANIMAL ITERADO SEA UN POLLO Y QUE ESTÉ VISIBLE
            if (coordenadasAnimales[i].tipo === 'pollo' && coordenadasAnimales[i].visible) {
                canvas_context.drawImage(pollo.imagen, coordenadasAnimales[i].x, coordenadasAnimales[i].y);
            }
        }
    }
    
    //DIBUJO DEL LOBO
    if (lobo.cargaOK){
        canvas_context.drawImage(lobo.imagen, lobo.x, lobo.y);
    }
    
    //DIBUJO DE LOS OGROS
    for (var o = 0; o < ogros.length; o++) {
        if (ogros[o].cargaOK) {
            canvas_context.drawImage(ogros[o].imagen, ogros[o].x, ogros[o].y);
        }
    }
    
    //DIBUJO DEL MENSAJE CONTADOR DEL PUNTAJE
    if (fondo.cargaOK && vaca.cargaOK && cerdo.cargaOK && pollo.cargaOK && lobo.cargaOK) {
        canvas_context.fillStyle = 'white';
        canvas_context.font = 'bold 16px Arial';
        canvas_context.fillText('Puntos: ' + lobo.comidos, 5, 20);
    }
}

//FUNCION PARA OBTENER UN VALOR ALEATORIO
function aleatorio(min, max){
    var resultado;
    resultado = Math.floor(Math.random() * (max - min + 1)) + min;
    return resultado;
}

//FUNCIÓN PARA OBTENER LAS COORDENADAS DE TODOS LOS ANIMALES A DIBUJAR
function crearCoordenadasAnimales(){
    //VACAS
    for(var v = 0; v < vaca.cantidad; v++){
        var disponible = false;
        var coordenada = {
            x: '', //COORDENADA X
            y: '', //COORDENADA Y
            tipo: 'vaca', //TIPO DE ANIMAL
            visible: true //ESTATUS PARA SABER SI SE DIBUJARÁ O NO. SIRVE PARA SABER SI EL ANIMAL HA SIDO COMIDO.
        };
        //OBTENEMOS LAS COORDENADAS DEL ANIMAL
        while(disponible === false){
            var x = aleatorio(0, 5) * 80;
            var y = aleatorio(0, 5) * 80;
            coordenada.x = x;
            coordenada.y = y;
            disponible = estaDisponible(coordenada); 
        }
        //--------------------FIN----------------------
        coordenadasAnimales.push(coordenada);
    }
    
    //CERDOS
    for(var c = 0; c < cerdo.cantidad; c++){
        var disponible = false;
        var coordenada = {
            x: '', //COORDENADA X
            y: '', //COORDENADA Y
            tipo: 'cerdo', //TIPO DE ANIMAL
            visible: true //ESTATUS PARA SABER SI SE DIBUJARÁ O NO. SIRVE PARA SABER SI EL ANIMAL HA SIDO COMIDO.
        };
        //OBTENEMOS LAS COORDENADAS DEL ANIMAL
        while(disponible === false){
            var x = aleatorio(0, 5) * 80;
            var y = aleatorio(0, 5) * 80;
            coordenada.x = x;
            coordenada.y = y;
            disponible = estaDisponible(coordenada); 
        }
        //--------------------FIN----------------------
        coordenadasAnimales.push(coordenada);
    }
    
    //POLLOS
    for(var p = 0; p < pollo.cantidad; p++){
        var disponible = false;
        var coordenada = {
            x: '', //COORDENADA X
            y: '', //COORDENADA Y
            tipo: 'pollo', //TIPO DE ANIMAL
            visible: true //ESTATUS PARA SABER SI SE DIBUJARÁ O NO. SIRVE PARA SABER SI EL ANIMAL HA SIDO COMIDO.
        };
        //OBTENEMOS LAS COORDENADAS DEL ANIMAL
        while(disponible === false){
            var x = aleatorio(0, 5) * 80;
            var y = aleatorio(0, 5) * 80;
            coordenada.x = x;
            coordenada.y = y;
            disponible = estaDisponible(coordenada); 
        }
        //--------------------FIN----------------------
        coordenadasAnimales.push(coordenada);
    }
    
    //LOBO
    var disponible = false;
    var coordenada = {
        x: '', //COORDENADA X
        y: '', //COORDENADA Y
        tipo: 'lobo' //TIPO DE ANIMAL
    };
    //OBTENEMOS LAS COORDENADAS DEL ANIMAL
    while(disponible === false){
        var x = aleatorio(0, 5) * 80;
        var y = aleatorio(0, 5) * 80;
        coordenada.x = x;
        coordenada.y = y;
        disponible = estaDisponible(coordenada); 
    }
    //--------------------FIN----------------------
    lobo.x = coordenada.x;
    lobo.y = coordenada.y;
    
    //OGROS
    for (var o = 0; o < ogros.length; o++) {
        disponible = false;
        coordenada = {
            x: '', //COORDENADA X
            y: '', //COORDENADA Y
            tipo: 'ogro' //TIPO DE ANIMAL
        };
        //OBTENEMOS LAS COORDENADAS DEL ANIMAL
        while(disponible === false){
            var x = aleatorio(0, 5) * 80;
            var y = aleatorio(0, 5) * 80;
            coordenada.x = x;
            coordenada.y = y;
            disponible = estaDisponible(coordenada); 
        }
        //--------------------FIN----------------------
        ogros[o].x = coordenada.x;
        ogros[o].y = coordenada.y;
    }
}

//FUNCIÓN PARA SABER SI LA COORDENADA ACTUAL SE ENCUENTRA DISPONIBLE, ES DECIR QUE OTRO ANIMAL NO SE ENCUENTRE EN LA MISMA COORDENADA
//ESTO ES PARA NO TENER ANIMALES ENCIMA DE OTROS.
function estaDisponible(coordenada){
    for (var i = 0; i < coordenadasAnimales.length; i++) {
        if (coordenada.x === coordenadasAnimales[i].x && coordenada.y === coordenadasAnimales[i].y && coordenadasAnimales[i].visible === true) {
            return false;
        }
    }
    return true;
}

//EVENTO PARA MOVER AL LOBO
function moverLobo(event){
    var x = 0;
    var y = 0;
    //VALIDAMOS QUE LA TECLA PRESIONADA SEA ALGUNA DE LAS FLECHAS
    if (event.keyCode === teclas.LEFT || event.keyCode === teclas.UP || event.keyCode === teclas.RIGHT || event.keyCode === teclas.DOWN) {
        //ASIGNACIÓN DE VALORES NUEVOS PARA LAS COORDENADAS DEL LOBO
        switch(event.keyCode){
           case teclas.LEFT:
               x = -80;
               break;
           case teclas.UP:
               y = -80;
               break;
           case teclas.RIGHT:
               x = 80;
               break;
           case teclas.DOWN:
               y = 80;
               break;
        }
        //--------------------FIN----------------------
       
        //ASGINAMOS LAS NUEVAS COORDENADAS PARA EL LOBO
        lobo.x += x;
        lobo.y += y;
        //--------------------FIN----------------------

        //VALIDACIONES QUE SIRVEN PARA QUE EL LOBO NO SE SALGA DEL CANVAS
        if (lobo.x < 0) {
            lobo.x = 0;
        }
        if (lobo.x > (canvas_fondo.width - 100)) {
            lobo.x = canvas_fondo.width - 100;
        }
        if (lobo.y < 0) {
            lobo.y = 0;
        }
        if (lobo.y > (canvas_fondo.height - 100)) {
            lobo.y = canvas_fondo.height - 100;
        }
        //--------------------FIN----------------------
        
        //MOVIMIENTO DE OGROS
        for (var o = 0; o < ogros.length; o++) {
            moverOgro(ogros[o]);
        }
        
        dibujar(); //DIBUJAMOS NUEVAMENTE EL CANVAS

        //CUANDO EL LOBO SEA ALCANZADO POR EL OGRO, ENVIAMOS UN MENSAJE
        for (var o = 0; o < ogros.length; o++) {
            if (lobo.x === ogros[o].x && lobo.y === ogros[o].y){
                canvas_context.fillStyle = 'white';
                canvas_context.font = 'bold 16px Arial';
                canvas_context.fillText('Has sido alcanzado por el ogro... :D',  canvas_fondo.width / 5, canvas_fondo.height / 2);
                canvas_context.fillText('Fin del juego!!',  canvas_fondo.width / 5, canvas_fondo.height / 2.5);
                document.removeEventListener('keydown', moverLobo);
            }
        }

        //CUANDO TODOS LOS ANIMALES HAYAN SIDO COMIDOS, ENVIAMOS UN MENSAJE EN EL CANVAS
        if (coordenadasAnimales.length === lobo.comidos) {
            canvas_context.fillStyle = 'white';
            canvas_context.font = 'bold 16px Arial';
            canvas_context.fillText('Has acabado con todos los animales... :(',  canvas_fondo.width / 5, canvas_fondo.height / 2);
            document.removeEventListener('keydown', moverLobo);
        }
        //--------------------FIN----------------------
    }
}

//FUNCIÓN PARA MOVER A LOS OGROS
function moverOgro(ogro){
    //CODIGO Y ALGORITMO PARA EL MOVIMIENTO AUTOMÁTICO DEL OGRO
    //BÚSQUEDA DE POSICIONES DISPONIBLES
    var posicionesDisponibles = [];
    for (var i = 0; i < 5; i++) {
        var posicionPosible = {
            x: ogro.x,
            y: ogro.y,
            distancia: 0
        };
        switch(i){
            case 0:
                posicionPosible.x += 80;
            break;
            case 1:
                posicionPosible.x -= 80;
            break;
            case 2:
                posicionPosible.y += 80;
            break;
            case 3:
                posicionPosible.y -= 80;
            break;
            case 4:
                //AQUÍ DEJAMOS QUE LA POSICION POSIBLE CUENTE CON LAS MISMAS COORDENADAS QUE LAS DEL OGRO
                //YA QUE TAL VEZ EL PUNTO MÁS CERCANO ES NO MOVERSE.
            break;
        }
        if (posicionPosible.x > 480
            || posicionPosible.x < 0
            || posicionPosible.y > 480
            || posicionPosible.y < 0) {
                //POSICIÓN FUERA DE LOS LIMITES
            }
            else {
                if (estaDisponible(posicionPosible)) {
                    //Determinamos la distancia de esta posible posición con respecto a la posición del lobo.
                    posicionPosible.distancia = Math.sqrt(Math.pow(lobo.x - posicionPosible.x, 2) + Math.pow(lobo.y - posicionPosible.y, 2));
                    posicionesDisponibles.push(posicionPosible);
                }        
            }
        }

    //BÚSQUEDA DE LAS POSICIONES POSIBLES A PARTIR DE LAS POSICIONES DISPONIBLES
    if (posicionesDisponibles.length > 0) {
        var posicionesPosibles = [];
        for (var p = 0; p < posicionesDisponibles.length; p++) {
            if (posicionesPosibles.length > 0) {
                if (posicionesDisponibles[p].distancia === posicionesPosibles[0].distancia) {
                    posicionesPosibles.push(posicionesDisponibles[p]);
                }
                else if (posicionesDisponibles[p].distancia < posicionesPosibles[0].distancia) {
                    posicionesPosibles = [];
                    posicionesPosibles.push(posicionesDisponibles[p]);
                }
            }
            else {
                posicionesPosibles.push(posicionesDisponibles[p]);
            }
        }
        if (posicionesPosibles.length > 0) {
            var item = aleatorio(0, posicionesPosibles.length - 1);
            ogro.x = posicionesPosibles[item].x;
            ogro.y = posicionesPosibles[item].y;
        }
    }
    //--------------------FIN----------------------

    //CODIGO QUE SE EJECUTA CUANDO EL LOBO ALCANZA A UN ANIMAL
    for (var a = 0; a < coordenadasAnimales.length; a++) {
        //VALIDAMOS QUE EL LOBO ESTÉ EN LAS MISMAS COORDENADAS QUE EL ANIMAL Y QUE EL MISMO ANIMAL ESTÉ VISIBLE 
        if (coordenadasAnimales[a].x === lobo.x && coordenadasAnimales[a].y === lobo.y && coordenadasAnimales[a].visible) {
            lobo.comidos++; //AUMENTAMOS EL CONTADOR DE ANIMALES COMIDOS POR EL LOBO
            coordenadasAnimales[a].visible = false; //CAMBIAMOS EL ESTATUS DEL ANIMAL COMIDO PARA NO VOLVERLO A DIBUJAR
            break;
        }
    }
    //--------------------FIN----------------------
}```

Nota: Si desean implementar el código, confirmen que las rutas de las imágenes sean correctas ya que yo almacené las imágenes en una carpeta.

Happy coding..!! :)

Lautaro Cabral

Opss

Gabriel Argaña

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.

joseanton111

Luigi F

Aquí esta el reto tuve que revisar un poco los comentarios, no entendía mucho pero lo logre :D

// Moviendo al cerdo

var teclas = {

UP: 38,

DOWN: 40,

LEFT: 37,

RIGHT: 39

};

document.addEventListener("keydown", dibujarCerdo);

var vp = document.getElementById("villaplatzi");

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

var fondo = {

url: "tile.png",

cargaOK: false

};

var cerdo = {

url: "cerdo.png",

cargaOK: false,

x:250,

y:250,

velocidad:5

};

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

function cargarFondo()

{

fondo.cargaOK = true;

dibujar();

}

function cargarCerdo()

{

cerdo.cargaOK = true;

dibujar();

}

function dibujar()

{

if (fondo.cargaOK)

{

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

}

if (cerdo.cargaOK)

{

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

}

function dibujarCerdo(evento)

{

var j = evento.keyCode;

if(j == teclas.UP)

{

if(cerdo.y > 0)

{

dibujar(cerdo.y -= cerdo.velocidad);

}

if(j == teclas.DOWN)

{

if(cerdo.y < 500)

{

dibujar(cerdo.y += cerdo.velocidad);

}

if(j == teclas.RIGHT)

{

if(cerdo.x < 500)

{

dibujar(cerdo.x += cerdo.velocidad);

}

if(j == teclas.LEFT)

{

if(cerdo.x > 0)

{

dibujar(cerdo.x -= cerdo.velocidad);

}

Karla Agraz

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.

Raylegh

Temine por fin aahhh me costo solucionar lo que el cerdo se moviera y que dejara de refrescar las imagenes xD pero termine aquí les dejo (devi acortar el código pero tengo sueño xD)

var camvas = document.getElementById('canvas');

var papel = canvas.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 pollo ={ url: "pollo.png", cargaOK: false};

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

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

document.addEventListener("keyup", dibujarTeclado);

console.log(papel);

console.log(cerdo);

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

var cantidadVaca = aleatorio(0, 15);

var xVaca = new Array();

var yVaca = new Array();

pollo.imagen = new Image();

pollo.imagen.src = pollo.url;

pollo.imagen.addEventListener("load", cargarAnimal);

var cantidadPollo = aleatorio(0, 15);

var xPollo = new Array();

var yPollo = new Array();

cerdo.imagen = new Image();

cerdo.imagen.src = cerdo.url;

cerdo.imagen.addEventListener("load", cargarAnimal);

var cantidadCerdo = aleatorio(0, 15);

var xCerdo = new Array();

var yCerdo = new Array();

cerdoMover.imagen = new Image();

cerdoMover.imagen.src = cerdoMover.url;

cerdoMover.imagen.addEventListener("load", cargarAnimal);

var xMover = 200;

var yMover = 200;

function cargarFondo ()

  fondo.cargaOK = true;

  dibujar();

function cargarAnimal ()

  vaca.cargaOK = true;

  for( i=0; i < cantidadVaca ; i++ )

    var x = aleatorio(0, 7);

    var y = aleatorio(0, 7);

    x = x * 60;

    y = y * 60;

    xVaca[i] = x;

    yVaca[i] = y;

  pollo.cargaOK = true;

  for( i=0; i < cantidadVaca ; i++ )

    var x = aleatorio(0, 7);

    var y = aleatorio(0, 7);

    x = x * 60;

    y = y * 60;

    xPollo[i] = x;

    yPollo[i] = y;

  cerdo.cargaOK = true;

  for( i=0; i < cantidadVaca ; i++ )

    var x = aleatorio(0, 7);

    var y = aleatorio(0, 7);

    x = x * 60;

    y = y * 60;

    xCerdo[i] = x;

    yCerdo[i] = y;

  cerdoMover.cargaOK = true;

  dibujar();

function dibujar ()

  if (fondo.cargaOK)

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

  if (vaca.cargaOK )

    for( i=0; i < cantidadVaca ; i++ )

      papel.drawImage(vaca.imagen, xVaca[i] , yVaca[i]);

  if (pollo.cargaOK )

    for( i=0; i < cantidadPollo ; i++ )

      papel.drawImage(pollo.imagen, xPollo[i] , yPollo[i]);

  if (cerdo.cargaOK )

    for( i=0; i < cantidadCerdo ; i++ )

      papel.drawImage(cerdo.imagen, xCerdo[i] , yCerdo[i]);

  if (cerdoMover.cargaOK)

    papel.drawImage(cerdoMover.imagen, xMover , yMover);

function dibujarCerdoMover()

  if (cerdoMover.cargaOK)

    papel.drawImage(cerdoMover.imagen, xMover , yMover);

function aleatorio (min, max)

  var resultado;

  resultado = Math.floor(Math.random() * (max - min + 1)) + min ;

  return resultado;

function dibujarTeclado(evento)

  var movimiento = 10;

  console.log(evento);

  switch (evento.keyCode)

    case teclas.DOWN:

      yMover = yMover + movimiento;

      dibujar(xMover , yMover);

      console.log("abajo");

    break;

    case teclas.UP:

      yMover = yMover - movimiento;

      dibujar(xMover , yMover);

      console.log("arriba");

    break;

    case teclas.LEFT:

      xMover = xMover - movimiento;

      dibujar(xMover , yMover);

      console.log("izquierda");

    break;

    case teclas.RIGHT:

      xMover = xMover + movimiento;

      dibujar(xMover , yMover);

      console.log("derecha");

    break;

    default:

      console.log("Otra tecla");

    break;

Daniel Alejandro Mejia Rojas

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]);
        }
    }
}```

María Alejandra Correa Rojas

Muchos cerditos, muchas vaquitas, y muy pronto se movera mi pollito. Por ahora el código.

var vp = document.getElementById("villa");
var papel = vp.getContext("2d");
//var mapa = "tile.png"; //Aquí se asigna la imagen de fondo a una variable
//JSON FONDO
var fondo ={ //JSON con variable fondo que trae parametros url y cargaOK
  url: "tile.png",//ulr es donde se aloja la imagen
  cargaOK: false//cargaOK es el que avisa si la carga de la imagen se realiza o no
};
//JSON VACAS
var vaca ={
  url : "vaca.png",
  cargaOK: false
};
//JSON CERDOS
var cerdo ={
  url: "cerdo.png",
  cargaOK: false
};
//JSON POLLOS
var pollo ={
  url: "pollo.png",
  cargaOK: false
};

var cantidad = aleatorio(0,5); //cantidad de vacas que saldran en el navegador

//FONDO
fondo.imagen = new Image();//clase Image
fondo.imagen.src = fondo.url; //llama el parametro url en donde se encuentra la imagen
fondo.imagen.addEventListener("load", cargarFondo); // load que permite la carga de la imagen dentro de la funcion cargarFondo
//VACAS
vaca.imagen = new Image();
vaca.imagen.src = vaca.url;
vaca.imagen.addEventListener("load", cargarVacas);
//CERDOS
cerdo.imagen = new Image();
cerdo.imagen.src = cerdo.url;
cerdo.imagen.addEventListener("load", cargarCerdos);
//POLLOS
pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
pollo.imagen.addEventListener("load", cargarPollos);
//CARGA FONDO
function cargarFondo(){ //Permite carga el fondo del canvas
  fondo.cargaOK = true;//Cuando se ejecuta esta funcion la carga de la imagen esta en TRUE
  dibujar();//Dibuja la imagen de fondo cuando se ejecuta la funcion dibujar
}
//CARGA VACAS
function cargarVacas(){
  vaca.cargaOK = true;
  dibujar();
}
//CARGA CERDOS
function cargarCerdos(){
  cerdo.cargaOK = true;
  dibujar();
}
//CARGA POLLOS
function cargarPollos(){
  pollo.cargaOK = true;
  dibujar();
}

function dibujar() {
  if (fondo.cargaOK == true){
    papel.drawImage(fondo.imagen,0,0); //Dibuja imagen en canvas en la posicion 0 en X y 0 en Y
  }
  if (vaca.cargaOK == true){
      console.log(cantidad);
        for(i=0;i<cantidad;i++){
        //var x=aleatorio(0,420);//El limite es 420 porque la imagen de la vaca en de 80x80; 500-80=420
        //var y=aleatorio(0,420);
        var x=aleatorio(0,5);//Las vacas se ven más organizadas y no se ven unas sobre otras
        var y=aleatorio(0,5);
        var x=x*80;
        var y=y*80;
        papel.drawImage(vaca.imagen,x,y); //Dibuja imagen en canvas en la posicion 0 en X y 0 en Y
      }
  }
  if (cerdo.cargaOK){
    for(i=0;i<cantidad;i++){
    //var x=aleatorio(0,420);//El limite es 420 porque la imagen de la vaca en de 80x80; 500-80=420
    //var y=aleatorio(0,420);
    var x=aleatorio(0,5);//Las vacas se ven más organizadas y no se ven unas sobre otras
    var y=aleatorio(0,5);
    var x=x*80;
    var y=y*80;
    papel.drawImage(cerdo.imagen,x,y);
  }
}
  if(pollo.cargaOK){
    papel.drawImage(pollo.imagen, 400,10);
  }
}

function aleatorio(min, maxi){
  var resultado;
  resultado = Math.floor(Math.random()*( maxi - min + 1)) + min; //Operación matematica para obtener numeros aleatorios en el rango maxi y min
  return resultado; //retorna el resultado de la variable
}

Y su resuttado:

Eduardo Rene Alfaro Montero

A ver que tal!! :)

var canvas = document.getElementById('canvas');

var area = canvas.getContext('2d');

var xini = aleatorio(0, 420);

var yini = aleatorio(0, 420);

var velocity = 15;

var fondo = {

  url: 'tile.png',

  cargaOK: false

var cerdo = {

  url: 'cerdo.png',

  cargaOK: false,

  posX: xini,

  posY: yini

var teclas = {

  UP: 38,

  DOWN: 40,

  LEFT: 37,

  RIGHT: 39

fondo.obj = new Image();

fondo.obj.src = fondo.url;

fondo.obj.addEventListener('load', cargarFondo);

cerdo.obj = new Image();

cerdo.obj.src = cerdo.url;

cerdo.obj.addEventListener('load', cargarCerdo);

document.addEventListener('keydown', movimiento);

function movimiento(evt)

  switch (evt.keyCode) {

    case teclas.UP:

      if (cerdo.posY > 0) {

        cerdo.posY = cerdo.posY - velocity;

        clear();

        dibujar();

      break;

    case teclas.DOWN:

      if (cerdo.posY < canvas.width - 80) {

        cerdo.posY = cerdo.posY + velocity;

        clear();

        dibujar();

      break;

    case teclas.LEFT:

      if (cerdo.posX > 0) {

        cerdo.posX = cerdo.posX - velocity;

        clear();

        dibujar();

      break;

    case teclas.RIGHT:

      if(cerdo.posX < canvas.width - 80){

        cerdo.posX = cerdo.posX + velocity;

        clear();

        dibujar();

      break;

    default:

function cargarFondo()

  fondo.cargaOK = true;

  dibujar();

function cargarCerdo()

  cerdo.cargaOK = true;

  dibujar();

function dibujar()

  if (fondo.cargaOK)

      area.drawImage(fondo.obj, 0, 0);

  if (cerdo.cargaOK)

      area.drawImage(cerdo.obj, cerdo.posX, cerdo.posY);

function aleatorio(min, max)

  var res;

  res = Math.floor(Math.random() * (max - min + 1)) + min;

  return res;

function clear(){

    area.clearRect(0, 0, canvas.width, canvas.height);

    dibujar();

Abril Darynka Tapia Sosa

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>

Carlos Arturo Murcia Andrade

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.

Código1.jpg
Código 2.jpg
Código 3.jpg
Código 4.jpg
Código 5.jpg
Código 6.jpg
Código 7.jpg
Código 8.jpg
Código 9.jpg
Código 10.jpg
Código 11.jpg

Rodrigo Perez Arzate

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

Sebastián González Muñoz

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)   // Función de números 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;
    }
}```

Fernando Alejandro Novillo Aguirre

Como dato curioso, en la pestaña “network” de la opción inspeccionar podemos encontrar entre otros datos, el tiempo que tardaron en cargar todos los archivos que nuestro programa utilice
Sin título.png

Shay Guzmán Vara

esto cuenta? 😂😂🤣🤣

Nicolas Esteban Prieto Sarmiento

hice el desafió y coloque un señor que intenta matar moscas ya que cambie la trama, y cada vez que avanzas el personaje las moscas se mueven. Pueden descargarlo en este link

https://drive.google.com/drive/folders/1O0hze5rXeuKemfbDW1Hdls6505skSxma?usp=sharing

Roco Fernández Pagella

con los números aleatorios logré darle colores random al canvas

Reinaldo Mendoza

Hola,

Aqui pueden jugar Pokémon, les dejo mi codigo

<<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>PlatziFarm</title>
</head>
<body>
	<h1>Captura todos los pokémon</h1>
	<p>
		Elije cuantos pokémon quieres: <br> Houndours:
		<input type="text" name="" id="vacas_txt">
	</p>
	<p>
		Furrets:
		<input type="text" name="" id="pollos_txt">
	</p>
	<p>
		Abras:
		<input type="text" name="" id="cerdos_txt">
	</p>
	<p>
		<input type="button" value="Dibujar" name="" id="ok_btn">
	</p>
	<canvas width="500" height="500" id="villaPlatzi"></canvas>
	<script src="villaPlatzi.js"></script>
</body>
</html>>

<//las imagenes son 80x80 px y el canvas 500x500 px, asi evito que la img quede por fuera
var POSCMAX = 420;
var POSCMIN = 0;
var MOVIMIENTOPERSONAJE = POSCMAX/10;
var teclas = {
	UP:38,
	DOWN:40,
	LEFT:37,
	RIGHT:39
};

var lienzo = document.getElementById("villaPlatzi");
var canvas = lienzo.getContext("2d");

var numVacas = 0;
var numPollos = 0;
var numCerdos = 0;
var okBtn = document.getElementById("ok_btn");

var fondo = {
	url : "tile.png",
	cargado : false
};
var vaca = {
	url : "houndoun.png",
	cargado : false
};
var pollo = {
	url : "zizagoon.png",
	cargado : false
};
var cerdo = {
	url : "abra.png",
	cargado : false
};
var ash = {
	url : "ash.png",
	cargado : false	
};
//posiciones de los animales en el canvas
var vacaX = null;
var vacaY = null;
var polloX = null;
var polloY = null;
var cerdoX = null;
var cerdoY = null;
var ashX = null;
var ashY = null;

document.addEventListener("keyup", moverAsh);
okBtn.addEventListener("click", capturarNumeros);

function capturarNumeros(){
	numVacas = parseInt(document.getElementById("vacas_txt").value);
	numPollos = parseInt(document.getElementById("pollos_txt").value);
	numCerdos = parseInt(document.getElementById("cerdos_txt").value);
	crearImagen();
}

function crearImagen(){
	//js no permite añadir un objeto imagen desde el inicio en JSON por eso lo hago aqui
	fondo.img = new Image();
	fondo.img.src = fondo.url;
	fondo.img.addEventListener("load", cargarFondo);

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

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

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

	ash.img = new Image();
	ash.img.src = ash.url;
	ash.img.addEventListener("load", cargarAsh);
}

//me va a avisar cuando ya se a cargado el recurso en memoria
function cargarFondo(){
	fondo.cargado = true;
	dibujar();
}

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

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

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

function cargarAsh(){
	ash.cargado = true;
	dibujar();
}

function dibujar(){
	if(fondo.cargado){
		//dibujar una imagen en canvas desde la posicion 0,0
		canvas.drawImage(fondo.img, 0, 0);
	}
	if(vaca.cargado){
		//si es la primera vez que dibujo y no tengo coordenadas de los animales, las creo
		if(vacaX == null){
			vacaX = new Array();
			vacaY = new Array();
			dibujarAleatorio(numVacas, vaca.img, vacaX, vacaY);			
		}else{
			//si ya existen las posiciones las redibujo alli
			redibujar(vaca.img, vacaX, vacaY);
		}	
	}
	if(pollo.cargado){
		if(polloX == null){
			polloX = new Array();
			polloY = new Array();
			dibujarAleatorio(numPollos, pollo.img, polloX, polloY);
		}else{
			redibujar(pollo.img, polloX, polloY);
		}			
	}
	if(cerdo.cargado){
		if(cerdoX == null){
			cerdoX = new Array();
			cerdoY = new Array();
			dibujarAleatorio(numCerdos, cerdo.img, cerdoX, cerdoY);	
		}else{
			redibujar(cerdo.img, cerdoX, cerdoY);
		}				
	}
	if(ash.cargado){
		if(ashX == null){
			dibujarAsh(POSCMAX, POSCMAX); 
		}else{
			capturarAnimal(vacaX, vacaY);
			capturarAnimal(polloX, polloY);
			capturarAnimal(cerdoX, cerdoY);
			validarGanador(vacaX, polloX, cerdoX);
		}
	}
}

function aleatorio(min, max){
	var res;
	//en js el random devuelve un numero entre 0.1 y 0.9 con muchos decimales por
	//lo que con esta ecuacion se va a convertir a un numero entero
	res = Math.floor(Math.random() * (max - min +1)) + min;
	//quiero colocar el animal cada 10px
	return res * 10;
}

function moverAsh(ev){
	//ash ya debe estar creado antes de moverse
	if(ashX > POSCMIN){
		//para moverse debo dibujar todo igual y ash en la nueva posicion
		dibujar();
		switch(ev.keyCode){
			case teclas.UP:
				dibujarAsh(ashX, ashY - 10);
			break;
			case teclas.DOWN:
				dibujarAsh(ashX, ashY + 10);
			break;
			case teclas.LEFT:
				dibujarAsh(ashX - 10, ashY);
			break;
			case teclas.RIGHT:
				dibujarAsh(ashX + 10, ashY);
			break;
		}
	}		
}

function dibujarAsh(x, y){
	ashX = x;
	ashY = y;
	canvas.drawImage(ash.img, x, y);	
}

function dibujarAleatorio(num, animalAleatorio, animalX, animalY){
	for(var i = 0; i < num; i++){
		//obtengo un numero random entre 0 y 42, lo *10 para que se ubique en multiplos10
		animalX[i] = aleatorio(POSCMIN, MOVIMIENTOPERSONAJE);
		animalY[i] = aleatorio(POSCMIN, MOVIMIENTOPERSONAJE);
		canvas.drawImage(animalAleatorio, animalX[i], animalY[i]);
	}
}

function redibujar(animalRedibujado, posX, posY){	
	for(var i = 0; i < posX.length; i++){
		canvas.drawImage(animalRedibujado, posX[i], posY[i]);
	}
}

function capturarAnimal(animalX, animalY){
	for (var i = 0; i < animalX.length; i++) {
		console.log("ashX" + ashX + " ashY" + ashY);
		console.log("animalX" + animalX + ", animalY" + animalY);
		if(ashX == animalX[i] && ashY == animalY[i]){
			//console.log("capturado");
			//splice elimina 1 elemento contenido desde la posicion i en el array
			animalX.splice(i, 1);
			animalY.splice(i, 1);
		}
	}
}

function validarGanador(vaca, pollo, cerdo){
	if(vaca.length == 0 && pollo.length == 0 && cerdo.length == 0){
		alert("Has ganado");
	}
}>

Esteban

No sé que opinen de que alguien cree un canal en Discord, donde podamos entrar y poder ayudarnos mutuamente, y así los que tengan las ideas y conceptos mas claros, ayudarnos a quienes estamos algo perdidos

Ervic

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.

Héctor Eduardo López Carballo

Platzi Team

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>

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

Santiago Rueda

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

favioh

Decidí hacerles un corral a las vacas

Cristian Camilo Cortes Ortiz

Comparto mi código… las Vacas, Cerdos y Pollos se ubican aleatoriamente y mueve al Chupavacas con las flechas 😆👽

Navegador:

Captura de pantalla 2020-06-23 15.01.30.png

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>

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

Arturo Ventura Martinez

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(“villaplatzi”);
var papel = vp.getContext(“2d”);
mapa=“tile.png”;

fondo=new Image();
fondo.src=mapa;
fondo.addEventListener(“load”,dibujar);

cerdo=new Image();
cerdo.src=“cerdo.png”;
cerdo.addEventListener(“load”,dibujarCerdo);

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

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

document.addEventListener(“keydown”,moverCerdo);
x=0;
y=0;

function moverCerdo(evento)
{

movimiento=3;
switch(evento.keyCode)
{
case teclas.UP:
y=y-movimiento;
dibujarCerdo();
console.log(“arriba”);
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;

}
}

Deudiel Velázquez Pérez

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

Jorge O Meza Arce

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;
    }
}```

acostheta

Hay algo que me encanta de esta clase, y es que Freddy se vuelve loco inventando tonterías con el código. Subliminalmente nos enseña a jugar con el código, poniéndolo a hacer cosas raras para ver desde nuestra propia experiencia lo que un programa es capaz de hacer. ¡Es genial!

Miguel Hernandez Moreno

Esto es parte de un DESAFÍO propuesto por Juan Camilo Moyano Orjuela.
“Al 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>

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

María Teresa Samudio

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.

Captura de pantalla_2020-06-20_23-33-03.png

Variables necesarias
Captura de pantalla_2020-06-20_23-34-43.png

Las funciones para las posiciones iniciales
Captura de pantalla_2020-06-20_23-35-19.png

Los objetos
Captura de pantalla_2020-06-20_23-35-37.png

Captura de pantalla_2020-06-20_23-35-55.png

Las funciones de carga
Captura de pantalla_2020-06-20_23-36-14.png

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

Moviendo al cerdo con las teclas!!
Captura de pantalla_2020-06-20_23-37-50.png

André Ribet

Algo pasó el Sábado. En los comentarios varios veian el video correcto hasta algún momento del Sábado y luego el domingo todos ven el video anterior repetido.

He revisado en 4 navegadores distintos y en ambos server.

emacastillozam

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 “quedaran” 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;
}

Mauricio Gomez

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;
}```

Diana_Sanchez

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

julian andres salcedo mendoza

![]( logradooo cerdoomovible.PNG

logradooo desafio hechoooooo…

Jorge Arango

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

danielspastas

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>

Juan Peña Dorado

Por fin conseguí solucionar el problema de mover al granjero sin modificar el resto del canvas. Puesto que “context.getImageData” genera fallos de seguridad por CORS (cross-origin…os 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);
}

Andrea Michel Becerra Cortez

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;
    }
}```

Hisnardo Sánchez Molina

RETO CUMPLIDO. La verdad dio bastante lata realizarlo, en mi caso puse a que el pollo se moviera alrededor de las vacas y cerdos, el principal problema fue que el pinche pollo se repetía por cada movimiento, para superar esto, hay que tener en cuenta que en cada movimiento del pollo se debe volver a dibujar de nuevo toda la granja (fondo + vacas + cerdos) en la misma posición inicial pero con la nueva posición del pollo.
Lo logré luego de buscar muchas posibles soluciones con algo que aún no aparece en el curso, esto es, guardando las coordenadas de las vacas y cerdos en unas Array. Las Array son una condición especial de las variables en las que puedo guardar información, para este caso, guardo las coordenadas de las vacas y cerdos para luego pintarlos en la misma posición siempre.
Igualmente, hay que tener en cuenta que para que las posiciones de las vacas y cerdos sean siempre las mismas las debo crear una sola vez, para esto, saqué las líneas que crean aleatoriamente estas coordenadas y las dejé en las funciones cargarVaca() y cargarCerdo() respectivamente.
Dejo los comentarios mas relevantes en el código.

document.addEventListener("keydown", detectarTeclado);
var villa = document.getElementById("villa_nardo");
var papel = villa.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
};

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;
	papel.drawImage(fondo.imagen, 0, 0);
}

//Creo las variables de las coordenadas X, Y donde se van a pintar las vacas, 
//así mismo digo que me las haga como Array para poder guardar con .push (está pocas líneas abajo) todas las coordenadas aleatorias
//y poder pintar siempre en el mismo sitio las vacas cuando mueva el pollo.
var xv = new Array();
var yv = new Array();
function cargarVaca()
{
	vaca.cargaOK = true;
	var cantidad = aleatorio(5, 10);
	for(v = 0; v < cantidad; v++)
		{
			var x = aleatorio(0, 7);
			var y = aleatorio(0, 7);
			var x = x * 60;
			var y = y * 60;
			xv.push(x);//el .push guarda en la variable xv (posición X de la vaca) cada nuevo valor aleatorio generado
			yv.push(y);//igual pero con la posición Y de la vaca
			papel.drawImage(vaca.imagen, x, y);
		}
}

//hago lo mismo para los cerdos
var xc = new Array();
var yc = new Array();
function cargarCerdo()
{
	cerdo.cargaOK = 1;
	var cantidad = aleatorio(5, 10);
	for(c = 0; c < cantidad; c++)
	{
		var x = aleatorio(0, 7);
		var y = aleatorio(0, 7);
		var x = x * 60;
		var y = y * 60;
		xc.push(x);
		yc.push(y);
		papel.drawImage(cerdo.imagen, x, y);
	}
}

//creo las variables de las coordenadas X, Y del punto inicial del pollo y las genero aleatoriamente
var xp;
var yp;
function cargarPollo()
{
	pollo.cargaOK = true;
	xp = aleatorio(0, 420);
	yp = aleatorio(0, 420);
	dibujar();
}

function detectarTeclado(evento)
{ 
	var movimiento = 15;
	fondo.cargaOK = true;
	vaca.cargaOK = true;
	cerdo.cargaOK = true;
	pollo.cargaOK = false;//hago que sea false para que al entrar a la función dibujar() no dibuje nuevos pollos, 
	//eso se hace en la función moverPollo() con las nuevas coordenadas de acuerdo a la variable movimiento de arriba

	switch(evento.keyCode)
	{
		case teclas.DOWN:
			dibujar();//envió a redibujar nuevamente toda la granja (fondo + vacas + cerdos) en las posiciones iniciales antes de mover el pollo
			moverPollo(xp, yp + movimiento);//pinto el pollo en su nueva posición 
			yp = yp + movimiento;
			console.log("abajo");								
		break;

		case teclas.UP:
			dibujar();
			moverPollo(xp, yp - movimiento);
			yp = yp - movimiento;
			console.log("arriba");
		break;
		case teclas.LEFT:
			dibujar();
			moverPollo(xp - movimiento, yp);
			xp = xp - movimiento;
			console.log("izquierda");
		break;
		case teclas.RIGHT:
			dibujar();
			moverPollo(xp + movimiento, yp);
			xp = xp + movimiento;
			console.log("derecha");
		break;
		default:
			alert("SOLO PUEDES USAR LAS FLECHAS DEL TECLADO");
		break;
	}
}

function dibujar()
{
	if(fondo.cargaOK == true)
	{
		papel.drawImage(fondo.imagen, 0, 0);
		console.log("cargó fondo");
	}


	if(vaca.cargaOK == true)
	{
		for (var i = 0; i < xv.length; i++)//la propiedad .length del Array de la variable xv, 
			//es el número de datos (vacas o pollos) que se generaron aleatoriamente
		{
	    	papel.drawImage(vaca.imagen, xv[i], yv[i]);//dibuja vacas en las coordenadas guardadas en el array de la variable xv
			console.log("cargó vaca");
		}		
	}

	if(cerdo.cargaOK == true)
	{
		for (var i = 0; i < xc.length; i++)
		{
	    	papel.drawImage(cerdo.imagen, xc[i], yc[i]);//igual que con las vacas para los cerdos
			console.log("cargó cerdo");
		}
	}

	if(pollo.cargaOK == true)
	{
		papel.drawImage(pollo.imagen, xp, yp);
		console.log("cargó pollo");
	}
}

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

function moverPollo(xpn, ypn)
{
	papel.drawImage(pollo.imagen, xpn, ypn);
	console.log("cargó pollo en nueva posición")
}```

William

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

Daniel Felipe Celis Fernández

Aquí está mi aporte. Guarde las posiciones de la vaca y el cerdo, para que el pollo se moviera sin dejar “marca”. 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;
}

Virna Fiorella Jiménez Lanza

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

Santiago Valencia Álvarez

Les comparte lo que programe con el conocimiento que tengo hasta el momento, un poco rudimentario, pero me costó bastante
acá les dejo el código:
https://codepen.io/santiago-valencia-lvarez/full/LYWxQyd

Elvis Maldonado Rodriguez

Reto Cumplido - Y sin colisión entre animales

Comparto mi código

// Definicion de variables

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

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

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

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

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

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

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

let cantidad = aleatorio(2, 6);
let posicion = new Array(cantidad * 3 + 1);
let movimiento = 70;


// Cargar en memoria 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", 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);

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

document.addEventListener("keyup", dibujarTeclado);

inicializarPosicion(posicion);

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

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

    if(vaca.cargaOK)
    {
        for (let i = 0; i < cantidad; i++) {
            papel.drawImage(vaca.imagen, posicion[indice].x, posicion[indice].y);
            indice++;
        }
    }

    if(cerdo.cargaOK)
    {
        for (let i = 0; i < cantidad; i++) {
            papel.drawImage(cerdo.imagen, posicion[indice].x, posicion[indice].y);
            indice++;
        }
    }

    if(pollo.cargaOK)
    {
        for (let i = 0; i < cantidad; i++) {
            papel.drawImage(pollo.imagen, posicion[indice].x, posicion[indice].y);
            indice++;
        }
    }

    if(perro.cargaOK)
    {
        papel.drawImage(perro.imagen, posicion[0].x, posicion[0].y);
    }
}

function dibujarTeclado(event)
{
    switch(event.keyCode)
    {
        case teclas.UP:
            posicion[0].y -= movimiento;
        break;
        case teclas.DOWN:
            posicion[0].y += movimiento;
        break;
        case teclas.LEFT:
            posicion[0].x -= movimiento;
        break;
        case teclas.RIGHT:
            posicion[0].x += movimiento;
        break;
    }
    dibujar();
}

function inicializarPosicion(posicion)
{
    _inicializarPosicion(posicion);
}

function _inicializarPosicion(posicion)
{
    let indice = 0;
    while(indice < posicion.length)
    {
        let pos = {
            x: aleatorio(0,5),
            y: aleatorio(0,5)
        };
        pos.x *= movimiento;
        pos.y *= movimiento;

        if(_validarEspacioVacio(posicion, indice, pos))
        {
            posicion[indice] = pos;
            indice++;
        }
    }
}

function _validarEspacioVacio(posicion, indice, pos)
{
    for (let i = 0; i < indice; i++) {
        if(posicion[i].x == pos.x && posicion[i].y == pos.y)
        {
            return false;
        }
    }
    return true;
}

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

Elías Pertúz

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

Agueda Solorzano

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(“dibujo”);
var v= document.getElementById(“boton_vaca”);
var p= document.getElementById(“boton_pollo”);
var c = document.getElementById(“boton_cerdo”);
var papel= d.getContext(“2d”);
document.addEventListener(“keydown”, moverCerdo);
c.addEventListener(“click”, clickCerdo);
document.addEventListener(“keydown”, moverVaca);
v.addEventListener(“click”, clickVaca);
document.addEventListener(“keydown”, moverPollo);
p.addEventListener(“click”, 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;

}

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”, cargarVaca);
cerdo.objeto = new Image();
cerdo.objeto.src = cerdo.url;
cerdo.objeto.addEventListener(“load”, cargarCerdo);
pollo.objeto = new Image();
pollo.objeto.src = pollo.url;
pollo.objeto.addEventListener(“load”, cargarPollo);
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();

  }

}

Eydi Paola Torrez Torrez Pinzón

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

William Gonzalez Betancourt

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

Donaldo Ismael Ricardez Vasquez

Hola, en mi caso para no tener que escribir tantos “if” 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}

Libian María Hernández Gil

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…Pero adelante, la práctica hace al maestro…

YessiMaya441

como le hago para que no se vea asi? :c
Captura de pantalla (105).png

jimmy ibañez

codigo 1.png
codigo 2.png
codigo 3.png

David Ceja Zapata

Para este ejercicio lo que hice fue cambiar toda villa platzi por el espacio, como se observa:

Cambie el fondo de la villa por el del espacio. Los elementos como los planetas y las dos naves , las unicas que son diferentes, los obtuve de una página para hacer pixel art, lo unico que yo hice fue la nave que se mueve, la más grande (starship), y las naves alienigenas.
Las naves alienigenas se generan una vez que se empieza a mover la starship y estas mantienen su posición.

El archivo HTML no cambió mucho. Este es el código javaScript:
`//Agregamos el contexto de canvas
var fontSpace = document.getElementById(“fondoEspacio”);
var panel = fontSpace.getContext(“2d”);
var fondo = {
url: “space.png”,
carga: false
};
var ship = {
url: “ship.png”,
carga: false
};
var alien = {
url: “alien.png”,
carga: false
};
var xAlien;
var yAlien;
var teclas = {
UP: “w”,
DOWN: “s”,
LEFT: “a”,
RIGHT: “d”
};
var cantidadAlien = aleatorio(0, 5);
var xAlien = new Array();
var yAlien = new Array();
document.addEventListener(“keydown”, navegar);
//Variables para las coordenadas de la nave
var xship = 200;
var yship = 420;

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

ship.imagen = new Image();
ship.imagen.src = ship.url;
ship.imagen.addEventListener(“load”, cargaShip);

alien.imagen = new Image();
alien.imagen.src = alien.url;
alien.imagen.addEventListener(“load”, cargaAlien);
//Funciones para cambiar el estado de carga
function cargaFondo()
{
fondo.carga = true;
dibujar();
}

function cargaShip()
{
ship.carga = true;
dibujar();
}

Andres F Robles

pregunta porque se repite el video anterior?

César Valentty Monsalve González

Hola buena noche, este video se repite, es el mismo anterior.

david_castel26

Como le hago para que yo seleccione el pollo con el mouse y lo arrastre por el canvas, como se llama esta fucion.

Andres Elias Jimenez

¿Quien me puede ayudar?..
Necesito ayuda con mi código para que el lienzo no se me borre al momento de accionar al cerdo.
Este es mi código:

var Vp = document.getElementById("VillaPlatzi");
var Papel = Vp.getContext("2d");
var xCerdo = 150;
var yCerdo = 150;
document.addEventListener("keydown", caminarCerdo);
document.addEventListener("keyup", detenerCerdo);
caminar = false;

var Teclas = 
{
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGTH: 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 Cantidad = Aleatorio(1, 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);

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, 7);
            var y = Aleatorio(0, 7);
            var x = x * 60;
            var y = y * 60;
            Papel.drawImage(Vaca.imagen, x, y);
        }
    }
        if (Pollo.cargaOK) 
    {
        console.log(Cantidad);
        for (var p = 0; p < Cantidad; 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, Maxi) 
{
    var Resultado;
    Resultado = Math.floor(Math.random() * (Maxi - Min + 1)) + Min;
    return Resultado;
}
function caminarCerdo(evento)
{
    caminar = true;
    switch (evento.keyCode)
    {
        case Teclas.UP:
        Papel.clearRect(0, 0, 500, 500);
        yCerdo = yCerdo -10;
        Papel.drawImage(Cerdo.imagen, xCerdo, yCerdo);
        break;

        case Teclas.DOWN:
        Papel.clearRect(0, 0, 500, 500);
        yCerdo = yCerdo +10;
        Papel.drawImage(Cerdo.imagen, xCerdo, yCerdo);
        break;

        case Teclas.LEFT:
        Papel.clearRect(0, 0, 500, 500);
        xCerdo = xCerdo -10;
        Papel.drawImage(Cerdo.imagen, xCerdo, yCerdo);
        break;

        case Teclas.RIGTH:
        Papel.clearRect(0, 0, 500, 500);
        xCerdo = xCerdo +10;
        Papel.drawImage(Cerdo.imagen, xCerdo, yCerdo);
        break;
    }
}
function detenerCerdo(evento)
{
    caminar = false;
}

ericktequiz

Santiago Gómez

Comparto mi codigo, logre mover el cerdo y mantener la cantidad y posicion de los pollos y vacas, utilice un par de arreglos para guardar los numeros aleatorios y asi poder volver a dibujar la misma cantidad de pollos y vacas al momento de mover el cerdo. Esos arreglos los use despues en una funcion llamada dibujarOtraVez para llamarla en cada case del switch de las teclas. Trate de hacerlo los mas descriptivo posible. Saludos.

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

Andrés Perdomo

Luego de 6 horas de intentos, canciones y pensar en como rendirse… aquí estan ambos trabajos.

Les dejo los enlaces para que los vean funcionando:
Tarea 1: https://codeprojects.org/C4TuSSBbx974GmTd4MztAz27yofxFx4AflOiBY08eIY

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Villa Platzi</title>
  </head>
  <body>
    <h1>Mira como se mueve la granja</h1>
    <p> Oprime F5 (actualizar) para ver como se mueven los animales en la granjita.</p>

    <canvas id="villaplatzi" width="500" height="500"></canvas>
    <script>
      var vp = document.getElementById("villaplatzi");
      var papel = vp.getContext("2d");
      var fondo = {
        url: "https://i.imgur.com/JFI9rSW.png",
        cargaOk: false
      }
      var vaca = {
        url: "https://i.imgur.com/Wtfshlf.png",
        cargaOk: false
      }
      var pollo = {
        url: "https://i.imgur.com/rgeib7y.png",
        cargaOk: false
      }
      var cerdo = {
        url: "https://i.imgur.com/Y0Ge1fh.png",
        cargaOk: false
      };

      var vacas = aleatorio(8,40);
      var pollos = aleatorio(7,35);
      var cerdos = aleatorio(6,30);
      console.log("vaca: ", vacas, "Pollo: ", pollos, "Cerdo: ", cerdos);


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

      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;
        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 < vacas; v++)
          {
            var x = aleatorio(0, 7);
            var y = aleatorio(0, 15);
            var x = x * 60;
            var y = y * 40;
            papel.drawImage(vaca.imagen, x, y);
          }
        }
        if (cerdo.cargaOk)
        {
          for (var c=0; c < cerdos; c++)
          {
            var x = aleatorio(0,6);
            var y = aleatorio(0,10)
            var x = x * 50;
            var y = y * 30;
            papel.drawImage(cerdo.imagen, x, y);
          }
        }
        if (pollo.cargaOk)
        {
          for (var c=0; c < pollos; c++)
          {
            var x = aleatorio(0,5);
            var y = aleatorio(0,20)
            var x = x * 70;
            var y = y * 20;
            papel.drawImage(pollo.imagen, x, y);
          }
        }
      }
      function aleatorio (min, maxi)
      {
        var resultado;
        resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
        return resultado;
      }
      document.write("<br>En la granja tenemos " + vacas + " vaquitas, " + cerdos + " chanchos y " + pollos + " gallinas." );
    </script>
  </body>
</html>

Tarea 2: https://codeprojects.org/vo9yR8SboIvjtooW_J_LF7OErDUJOFgiaCUbKAf-9OA

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Villa Platzi</title>
  </head>
  <body>
    <canvas id="villaplatzi" width="500" height="500"></canvas>
    <script>
      document.addEventListener("keydown", moverChancho);
      var vp = document.getElementById("villaplatzi");
      var papel = vp.getContext("2d");
      var teclas = {
        UP: 38,
        DOWN: 40,
        RIGHT: 39,
        LEFT: 37,
      };
      console.log (teclas);
      //Lugar de X y Y del marranito.
      var x = 180;
      var y = 180;
      var fondo = {
        url: "https://i.imgur.com/JFI9rSW.png",
        cargaOk: false
      }
      var vaca = {
        url: "https://i.imgur.com/Wtfshlf.png",
        cargaOk: false
      }
      var pollo = {
        url: "https://i.imgur.com/rgeib7y.png",
        cargaOk: false
      }
      var cerdo = {
        url: "https://i.imgur.com/Y0Ge1fh.png",
        cargaOk: false
      };

      var vacas = aleatorio(8,40);
      var pollos = aleatorio(7,35);
      var cerdos = 1;
      console.log("vaca: ", vacas, "Pollo: ", pollos, "Cerdo: ", cerdos);


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

      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;
        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 < vacas; v++)
          {
            var x = aleatorio(0, 7);
            var y = aleatorio(0, 15);
            var x = x * 60;
            var y = y * 40;
            papel.drawImage(vaca.imagen, x, y);
          }
        }
        if (cerdo.cargaOk)
        {}
        if (pollo.cargaOk)
        {
          for (var c=0; c < pollos; c++)
          {
            var x = aleatorio(0,5);
            var y = aleatorio(0,20)
            var x = x * 70;
            var y = y * 20;
            papel.drawImage(pollo.imagen, x, y);
          }
        }
      }

      function moverChancho(evento)
      {
        var mov = 10;
        papel.drawImage(cerdo.imagen, 240, 240);
        switch (evento.keyCode)
        {
          case teclas.UP:
            dibujar ();
            papel.drawImage(cerdo.imagen, x, y - mov);
            y = y - mov;
            break;
          case teclas.DOWN:
            dibujar ();
            papel.drawImage(cerdo.imagen, x, y + mov);
            y = y + mov;
            break;
          case teclas.LEFT:
            dibujar ();
            papel.drawImage(cerdo.imagen, x - mov, y);
            x = x - mov;
            break;
          case teclas.RIGHT:
            dibujar ();
            papel.drawImage(cerdo.imagen, x + mov, y);
            x = x + mov;
            break;
          default:
            break;
        }
      }

      function aleatorio (min, maxi)
      {
        var resultado;
        resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
        return resultado;
      }
      document.write("<br> Mueve al marranito con las flechas del teclado." );
    </script>
  </body>
</html>

cardaboes

excelente

Juan Camilo García Ardila

creo q en la nueva actualización si sirve el orden normal ya que yo no tengo el problema al recargar muchas veces

Cindy Luciani Correa

dia del padre.png

Briggs

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

Angel Eduardo Lazcano Juárez

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 “x” y “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;
}

danielfernandoreyesserna

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

DianaMory

<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

Nathalie Mayra Heidecke Cabrera

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

Valeria Calcina Cisneros

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.
Captura de pantalla 2019-07-16 a las 9.17.01 a.m..png
.
ese es mi js pero de todos modos voy a crear esas nuevas funciones por que yo soy muy desconfiada 😃

Diego Hernández Delgado

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

}

carlosponticelli

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>

Dimas Antonio Mendoza Lozano

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

shankyjs

¡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 +", ")
// }

mael358

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

Omar Sebastian Perez

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

Berny Cuba Riveros

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

Cluster

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

Hendrik Leal

Platzi Team

Screen Shot 2019-12-18 at 10.40.20 PM.png

Animal Rebelde

Miguel Barrera

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

Oscar Alejandro Umaña Espinosa

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

![]( Sin título2.png

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

Christian Pantoja

2 Retos cumplidos.

Carlos Viteri

Yo introduje un personaje, es un lobo que se mueve entre los animales de granja:

Y también logré hacer que mantuvieron sus posiciones poniéndolas en un arreglo que se mantiene cada vez que se llama a dibujar:

var vp = document.getElementById("villaplatzi");

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

document.addEventListener("keydown", moverLobo);

var xLobo = 150;

var yLobo = 100;

var xVaca = new Array();

var yVaca = new Array();

var xCerdo = new Array();

var yCerdo = new Array();

var xPollo = new Array();

var yPollo = new Array();

function moverLobo(e)

	var movimiento = 64;

	var teclas =

		LEFT: 37,

		UP: 38,

		RIGHT: 39,

		DOWN: 40

	switch(e.keyCode)

		case teclas.LEFT:

			xLobo = xLobo - movimiento;

			dibujar(xLobo, yLobo);

		break;

		case teclas.UP:

			yLobo = yLobo - movimiento;

			dibujar(xLobo, yLobo);

		break;

		case teclas.RIGHT:

			xLobo = xLobo + movimiento;

			dibujar(xLobo, yLobo);

		break;

		case teclas.DOWN:

			yLobo = yLobo + movimiento;

			dibujar(xLobo, yLobo);

		break;

var fondo =

	url: "tile.png",

	carga: false

var lobo =

	url: "lobo.png",

	carga: false

var vaca =

	url: "vaca.png",

	carga: false

var pollo =

	url: "pollo.png",

	carga: false

var cerdo =

	url: "cerdo.png",

	carga: false

lobo.imagen = new Image();

lobo.imagen.src = lobo.url;

lobo.imagen.addEventListener("load", cargaLobo);

fondo.imagen = new Image();

fondo.imagen.src = fondo.url;

fondo.imagen.addEventListener("load", cargaFondo);

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

function cargaLobo()

	lobo.carga = true;

	dibujar();

function cargaFondo()

	fondo.carga = true;

	dibujar();

function cargaPollo()

	pollo.carga = true;

	mantenerPosicion();

function cargaCerdo()

	cerdo.carga = true;

	mantenerPosicion();

function cargaVaca()

	vaca.carga = true;

	mantenerPosicion();

function mantenerPosicion()

	if(vaca.carga)

		var cantidad = aleatorio(1, 5);

		for(var i=0; i<cantidad; i++)

			var x = aleatorio(0, 6);

			var y = aleatorio(0, 6);

			x = x*70;

			y = y*70;

			xVaca[i] = x;

			yVaca[i] = y;

	if(cerdo.carga)

		var cantidad = aleatorio(1, 5);

		for(var i=0; i<cantidad; i++)

			var x = aleatorio(0, 6);

			var y = aleatorio(0, 6);

			x = x*70;

			y = y*70;

			xCerdo[i] = x;

			yCerdo[i] = y;

	if(pollo.carga)

		var cantidad = aleatorio(1, 10);

		for(var i=0; i<cantidad; i++)

			var x = aleatorio(0, 6);

			var y = aleatorio(0, 6);

			x = x*70;

			y = y*70;

			xPollo[i] = x;

			yPollo[i] = y;

	dibujar();

function dibujar()

	if(fondo.carga)

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

	if(vaca.carga)

		for(var i=0; i<10; i++){

			papel.drawImage(vaca.imagen, xVaca[i], yVaca[i]);

	if(cerdo.carga)

		for(var i=0; i<10; i++){

			papel.drawImage(cerdo.imagen, xCerdo[i], yCerdo[i]);

	if(pollo.carga)

		for(var i=0; i<10; i++){

			papel.drawImage(pollo.imagen, xPollo[i], yPollo[i]);

	if(lobo.carga)

		papel.drawImage(lobo.imagen, xLobo, yLobo)

function aleatorio(max, min)

	var numero_aleatorio = Math.floor(Math.random() * (max - min + 1)) + min;

	return numero_aleatorio;

brayanmamani

🐱‍💻 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;
}

Juanca

me iba mejor con el “mama ya casi aprendo”

luis_epico

Después de varias horas lo consigo y estoy totalmente feliz

saludo desde Venezuela

si te gusta mi codigo dale like :D

var vp = document.getElementById("villa");

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

var xini = aleatorio(0, 420);

var yini = aleatorio(0, 420);

var velocity = 15;

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,

posX: xini,

posY: yini

};

var teclas = {

UP: 38,

DOWN: 40,

LEFT: 37,

RIGHT: 39

}

var cantidad = 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);

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

document.addEventListener('keydown', movimiento);

function movimiento(evt)

{

switch (evt.keyCode) {

case teclas.UP:

if (cerdo.posY > 0) {

cerdo.posY = cerdo.posY - velocity;

clear();

dibujar();

}

break;

case teclas.DOWN:

if (cerdo.posY < vp.width - 80) {

cerdo.posY = cerdo.posY + velocity;

clear();

dibujar();

}

break;

case teclas.LEFT:

if (cerdo.posX > 0) {

cerdo.posX = cerdo.posX - velocity;

clear();

dibujar();

}

break;

case teclas.RIGHT:

if(cerdo.posX < vp.width - 80){

cerdo.posX = cerdo.posX + velocity;

clear();

dibujar();

}

break;

default:

}

function cargarFondo()

{

fondo.cargaOK = true;

dibujar();

}

function cargarVacas()

{

vaca.cargaOK = true;

dibujar();

}

function cargarPollos()

{

pollo.cargaOK = true;

dibujar();

}

function cargarCerdo ()

{

cerdo.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, 10);

var x = x * 60;

var y = y * 40;

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

}

if(pollo.cargaOK)

{

console.log(cantidad);

for(var v=0; v < cantidad; v++)

{

var x = aleatorio(0, 7);

var y = aleatorio(0, 10);

var x = x * 60;

var y = y * 40;

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

}

if(cerdo.cargaOK)

{

console.log(cantidad);

for(var v=0; v < cantidad; v++)

{

var x = aleatorio(0, 7);

var y = aleatorio(0, 10);

var x = x * 60;

var y = y * 40;

papel.drawImage(cerdo.imagen, cerdo.posX, cerdo.posY);

}

function aleatorio(min, maxi)

{

var resultado;

resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;

return resultado;

}

function clear(){

papel.clearRect(0, 0, vp.width, vp.height);

dibujar();

}

MARTIN ARDILA

cuando resuelves un error de codigo y aparece otro

Rafael Torres

Hola les dejo, mi aporte donde podras capturar pokemones con un entrenador que se mueve con las flechas del teclado.

const vp = document.getElementById("villaplatzi");
const papel = vp.getContext("2d");
const imageWidth= 64;
const imageHeight= 64;
const pasos = 10;
let pokemonIndex = 0;
let posicionX = 250;
let posiciony = 250;

// Assets
const villaPokemonAssets = [
  {
    url:'./img/tile.png',
    esAleatorio: false,
    sePuedeMover: false,
  },
  {
    url:'./img/charizard.png',
    esAleatorio: true,
    sePuedeMover: false,
  },
  {
    url:'./img/señor_mime.png',
    esAleatorio: true,
    sePuedeMover: false,
  },
  {
    url:'./img/evee_envolved.png',
    esAleatorio: true,
    sePuedeMover: false,
  },
  {
    url:'./img/entrenador.png',
    esAleatorio: false,
    sePuedeMover: true,
  }
]

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

//Eventos
document.addEventListener('keydown', moverEntrenadorTeclado);

// Funcion que  permite cargar assets de forma recursiva
function cargarAssest() {

  if(pokemonIndex < villaPokemonAssets.length) {
    const pokemonAsset = villaPokemonAssets[pokemonIndex];

    pokemonAsset.imagen = new Image();
    pokemonAsset.imagen.src = pokemonAsset.url;
    pokemonAsset.imagen.addEventListener("load", function(){
      dibujarPokemonAsset(pokemonAsset);
    });
  }

}


function dibujarPokemonAsset(pokemonAsset)
{
    if(pokemonAsset.esAleatorio) {
      // Dibuja pokemones
      const cantidad = aletorio(1, 2);
      dibujarPokemon(pokemonAsset.imagen, 1)
    } else {

      let x = pokemonAsset.sePuedeMover ? posicionX : 0;
      let y = pokemonAsset.sePuedeMover ? posiciony : 0;

      // Dibuja fondo
      papel.drawImage(pokemonAsset.imagen, x, y)

      // Cargar otro asset
      pokemonIndex++;
      cargarAssest();
    }
}

function dibujarPokemon(imagen, cantidad)
{

  for(let i=0; i < cantidad; i+=1)
  {
    const x = aletorio(0, 6);
    const y = aletorio(0, 6);
    const posX = x * imageWidth;
    const posY = y * imageHeight;
    papel.drawImage(imagen, posX, posY)
  }

  // Cargar otro asset
  pokemonIndex++;
  cargarAssest();
}

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


function moverEntrenadorTeclado(evento)
{
  pokemonIndex = 0;

  switch (evento.keyCode) {
      case teclas.UP:
        posiciony = posiciony - pasos;
      break;
      case teclas.DOWN:
        posiciony = posiciony + pasos;
      break;
      case teclas.LEFT:
        posicionX = posicionX - pasos;
      break;
      case teclas.RIGHT:
        posicionX = posicionX + pasos;
      break;
    default:
        console.log("Ups  los  pokeons se han movido");
  }

  cargarAssest();
}

// Inicio de la app
cargarAssest();

Saludos a todos!!

Jean Carlos González Valverde

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

linkarox

¿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

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.

Jesús Lautaro Careglio Albornoz

Juego Villa Platzi

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

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 😄");
}```

Ricardo_C

Les dejo el código de un pequeño juego, Escape Porcino, inspirado en el ejemplo del compañero que incluyó a el lobo. Espero les sea de ayuda. ¡Saludos!

document.addEventListener("keydown", moverCerdo);

//////////Preparacion de variables///////////
var mapa = document.getElementById('granja');
var papel = mapa.getContext("2d");
var xCerdo = 420;
var yCerdo = -15;
var xLobo = new Array();
var yLobo = new Array();

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

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

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

var lobo = {
  url: "lobo.png",
  cargaEst: 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", cargarCerdo);

lobo.imagen = new Image;
lobo.imagen.src = lobo.url;
lobo.imagen.addEventListener("load", cargarLobos);

///////////Funciones que cargan las imagenes/////////
function cargarFondo()
{
  fondo.cargaEst = true;
  dibujar();
}

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

var cantidad = aleatorio(3, 8);
function cargarLobos()
{
  lobo.cargaEst = true;
  for(var l = 0; l < cantidad; l++)
  {
    var x = aleatorio(0, 7);
    var y = aleatorio(0, 7);
    x = x*60;
    y = y*60;
    xLobo[l] = x;
    yLobo[l] = y;
  }
  dibujar();
}

//////////////Funcion que dibuja las imagenes/////
function dibujar()
{
  if (fondo.cargaEst)
  {
    papel.drawImage(fondo.imagen, 0,0);
  }
  if (cerdo.cargaEst)
  {
    papel.drawImage(cerdo.imagen, xCerdo, yCerdo);
  }
  if (lobo.cargaEst)
  {
    dibujarLobos();
  }
}

function dibujarLobos()
{
  for(var l=0; l<cantidad; l++){
    papel.drawImage(lobo.imagen, xLobo[l], yLobo[l]);
  }
}

//////////////Funcion que mueve al cerdo//////
function moverCerdo(pasos)
{

  var movimiento = 5;
  switch (pasos.keyCode)
  {
    case teclas.UP:
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
      papel.drawImage(cerdo.imagen, xCerdo, yCerdo - movimiento);
      yCerdo = yCerdo - movimiento;
    break;
    case teclas.DOWN:
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
      papel.drawImage(cerdo.imagen, xCerdo, yCerdo + movimiento);
      yCerdo = yCerdo + movimiento;
    break;
    case teclas.LEFT:
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
      papel.drawImage(cerdo.imagen, xCerdo - movimiento, yCerdo);
      xCerdo = xCerdo - movimiento;
    break;
    case teclas.RIGHT:
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
      papel.drawImage(cerdo.imagen, xCerdo + movimiento, yCerdo);
      xCerdo = xCerdo + movimiento;
    break;
    default:
      console.log("Presionó otra tecla");
    break;
  }

  if (xCerdo > -5 && xCerdo < 10 && yCerdo>425 && yCerdo<500)
  {
      alert("¡Felicidaes, el cerdo está a salvo!");
  }
  else
  {
    huida();
  }
}

//////Funcion que determina si se comieron al cerdo/////////
function huida()
{
  var xIzqC = xCerdo + 13, ySupC = yCerdo + 28,
      xDerC = xCerdo + 69, yInfC = yCerdo + 50;
  for(var i=0; i<cantidad; i++)
  {
    var xSupL = xLobo[i];
    var ySupL = yLobo[i] + 23;
    var xInfL = xLobo[i] + 64;
    var yInfL = yLobo[i] + 64;

    if ( ((xIzqC > xSupL) && (xIzqC < xInfL)) &&
        ((ySupC > ySupL) && (ySupC < yInfL)) )
    {
      alert("¡Te atrapó el lobo!");
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
    }
    if ( ((xIzqC > xSupL) && (xIzqC < xInfL)) &&
        ((yInfC > ySupL) && (yInfC < yInfL)) )
    {
      alert("¡Te atrapó el lobo!");
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
    }
    if ( ((xDerC > xSupL) && (xDerC < xInfL)) &&
        ((ySupC > ySupL) && (ySupC < yInfL)) )
    {
      alert("¡Te atrapó el lobo!");
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
    }
    if ( ((xDerC > xSupL) && (xDerC < xInfL)) &&
        ((yInfC > ySupL) && (yInfC < yInfL)) )
    {
      alert("¡Te atrapó el lobo!");
      papel.drawImage(fondo.imagen, 0,0);
      dibujarLobos();
    }
  }
}

////////////Funcion que crea numeros aleatorios/////////////
function aleatorio(min, maxi)
{
  var resultado;
  resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
  return resultado;
}

Jesús Joel Sarabia Félix

Esperanza Margarita Palacios Vargas

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

JMVRD

(Alguien sabe cuantos caracteres se muestran aqui)
Asi queda mi codigo:

//Definir el lienzo de trabajo
var canva = document.getElementById("my_canvas");
var papel = canva.getContext("2d");
//Definicion de Objetos en json para las estrcuturas de imagenes
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 = {UP:38, DOWN:40, LEFT: 37, RIGHT:39};
//Variables
var total_vacas = aleatorio(0,50);
var total_pollos = aleatorio(0,50);
var cx = 150, cy = 150;
var movimiento = 5;
//Estructuras de Imagenes
fondo.imagen = new Image();//Craemos 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",cargarCerdo);
pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
pollo.imagen.addEventListener("load",cargarPollos);
document.addEventListener("keydown",moverCerdo);
//Funciones Declaradas
function aleatorio(min,max){
  var res;
  res = Math.floor(Math.random()*(max - min +1))+min;
  return res;
}
function cargarFondo(){
  fondo.cargaOk = true;
  dibujar();
}
function cargarVacas(){
  vaca.cargaOk = true;
  vaca.x = [];
  vaca.y = [];
  for(var n=0; n < total_vacas; n++){
    vaca.x[n] = aleatorio(0,7) * 60;
    vaca.y[n] = aleatorio(0,7) * 60;
  }
  dibujar();
}
function cargarCerdo(){
  cerdo.cargaOk = true;
  dibujar();
}
function cargarPollos(){
  pollo.cargaOk = true;
  pollo.x = [];
  pollo.y = [];
  for(var e=0; e < total_pollos; e++){
    pollo.x[e] = aleatorio(0,7) * 80;
    pollo.y[e] = aleatorio(0,4) * 80;
  }
  dibujar();
}
function moverCerdo(evento){
  switch (evento.keyCode){
    case teclas.UP://restar a y
      cy = cy - movimiento;
      if(cy < 0) cy = 0;
      dibujar();
    break;
    case teclas.DOWN://sumar a y
      cy = cy + movimiento;
      if(cy > 420) cy = 420;
      dibujar();
    break;
    case teclas.LEFT://restar a x
      cx = cx - movimiento;
      if(cx < 0) cx = 0;
      dibujar();
    break;
    case teclas.RIGHT://Sumar a y
      cx = cx + movimiento;
      if(cx > 420)cx = 420;
      dibujar();
    break;
    default:
      console.log("No se realiza ninguna accion.");
  }
}
function dibujar(){
    if(fondo.cargaOk){
        papel.drawImage(fondo.imagen,0,0);
    }
    if(vaca.cargaOk){
      for(var v=0; v < total_vacas; v++){
        papel.drawImage(vaca.imagen,vaca.x[v],vaca.y[v]);
      }
    }
    if(cerdo.cargaOk){
        papel.drawImage(cerdo.imagen,cx,cy);
    }
    if(pollo.cargaOk){
      for(var v=0; v < total_pollos; v++){
        papel.drawImage(pollo.imagen,pollo.x[v],pollo.y[v]);
      }
    }
    console.log(pollo.image);
    document.getElementById("status").innerHTML = "<p>Asi queda tu Villa platzi con:<br>" + total_vacas + " vacas, distribuidas aleatoriamente.<br>Un cerdo en la posicion ("+cx+","+cy+") y una gallina.</p>";
}

Espero y se vea todo

Alejandro Tangarife Rivas

Iteras

javier-cubillos

Esta es la mi respuesta al reto 😎

Paula Andrea Rueda Arcila

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

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

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

Fred Gómez Leyva

Agregué otro personaje:

El objetivo de este nuevo personaje es que te siga mientras te alimentas de los otros animales y detenerte.
Las novedades de esta versión son las siguientes:

Se agrega la imagen de ogro.
Se implementa código para crear dos ogros.
Se almacenan las coordenadas de los animales para que se mantengan en el mismo lugar cuando se vuelva a dibujar el canvas.
Se implementa código para que el lobo “coma” a los animales [los animales desaparecen]
Se implementa función para determinar si alguna coordenada se encuentra disponible, es decir para no insertar dos animales en el mismo punto. También se utiliza para que el los animales sean un obstaculo para los ogros.
Se implementa código para mover el lobo.
Se agrega un marcador de puntos obtenidos.
Se agrega mensaje cuando finaliza el juego.
Se agrega funcionalidad para mover los ogros. Los ogros se mueven dependiendo de un algoritmo que determina cuál es el próximo punto al que se pueden mover los ogros que los dejará más cerca del lobo. Es decir, los ogros te seguirán.

A continuación el código:
HTML

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>VillaPlatzi</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <canvas width="500" height="500" id="canvas_fondo"></canvas>
        <script src="script.js"></script>
    </body>
</html>

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
var canvas_fondo = document.getElementById('canvas_fondo');
var canvas_context = canvas_fondo.getContext('2d');

//EVENTO QUE MOVERÁ AL LOBO AL USAR LAS TECLAS
document.addEventListener('keydown', moverLobo);

//REGISTRO DE LAS TECLAS
var teclas = {
    LEFT: 37,
    UP: 38,
    RIGHT: 39,
    DOWN: 40
};

//REGISTRO DE LOS ELEMENTOS QUE SE DIBUJARÁN EN EL CANVAS
var fondo = {
    url: 'files/tile.png',
    cargaOK: false
};
fondo.imagen = new Image();
fondo.imagen.src = fondo.url;
fondo.imagen.addEventListener('load', function(){
   fondo.cargaOK = true;
   dibujar();
});

var vaca = {
    url: 'files/vaca.png',
    cargaOK: false,
    cantidad: aleatorio(0, 10) //CANTIDAD DE VACAS QUE TENDRÁ EL CANVAS
};
vaca.imagen = new Image();
vaca.imagen.src = vaca.url;
vaca.imagen.addEventListener('load', function(){
    vaca.cargaOK = true;
    dibujar();
});

var cerdo = {
    url: 'files/cerdo.png',
    cargaOK: false,
    cantidad: aleatorio(0, 10) //CANTIDAD DE CERDOS QUE TENDRÁ EL CANVAS
};
cerdo.imagen = new Image();
cerdo.imagen.src = cerdo.url;
cerdo.imagen.addEventListener('load', function(){
   cerdo.cargaOK = true;
   dibujar();
});

var pollo = {
    url: 'files/pollo.png',
    cargaOK: false,
    cantidad: aleatorio(0, 10) //CANTIDAD DE POLLOS QUE TENDRÁ EL CANVAS
};
pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
pollo.imagen.addEventListener('load', function(){
   pollo.cargaOK = true;
   dibujar();
});

var lobo = {
    url: 'files/lobito.png',
    cargaOK: false,
    x: '',
    y: '',
    comidos: 0 //CONTADOR DE ANIMALES COMIDOS POR EL LOBO
};
lobo.imagen = new Image();
lobo.imagen.src = lobo.url;
lobo.imagen.addEventListener('load', function(){
   lobo.cargaOK = true;
   dibujar();
});

var ogros = [];
ogros.push({
    url: 'files/ogro.png',
    cargaOK: false,
    x: '',
    y: ''
});
ogros.push({
    url: 'files/ogro.png',
    cargaOK: false,
    x: '',
    y: ''
});
for (var o = 0; o < ogros.length; o++) {
    ogros[o].imagen = new Image();
    ogros[o].imagen.src = ogros[o].url;
}
ogros[0].imagen.addEventListener('load', function(){
    ogros[0].cargaOK = true;
    dibujar();
});
ogros[1].imagen.addEventListener('load', function(){
    ogros[1].cargaOK = true;
    dibujar();
});
//--------------------FIN----------------------

//CREAMOS UNA VARIABLE QUE ALMACENARÁ LAS COORDENADAS DE CADA ANIMAL, ESTO ES PARA QUE NO CAMBIEN SU POSICIÓN CADA VEZ QUE EL CANVAS SE VUELVA A DIBUJAR
var coordenadasAnimales = [];

//FUNCIÓN PARA DIBUJAR LOS ELEMENTOS DEL CANVAS
function dibujar(){
    //SI NO TENEMOS LAS COORDENADAS DE LOS ANIMALES, EJECUTAMOS LA FUNCIÓN PARA OBTENER LAS POSICIONES
    if (coordenadasAnimales.length === 0) {
        crearCoordenadasAnimales();
    }
    
    //DIBUJO DEL FONDO
    if (fondo.cargaOK) {
        canvas_context.drawImage(fondo.imagen, 0, 0);
    }
    
    //DIBUJO DE LAS VACAS
    if (vaca.cargaOK) {
        for (var i = 0; i < coordenadasAnimales.length; i++) {
            //VALIDAMOS QUE EL ANIMAL ITERADO SEA UNA VACA Y QUE ESTÉ VISIBLE
            if (coordenadasAnimales[i].tipo === 'vaca' && coordenadasAnimales[i].visible) {
                canvas_context.drawImage(vaca.imagen, coordenadasAnimales[i].x, coordenadasAnimales[i].y);
            }
        }
    }
    
    //DIBUJO DE LOS CERDOS
    if (cerdo.cargaOK) {
        for (var i = 0; i < coordenadasAnimales.length; i++) {
            //VALIDAMOS QUE EL ANIMAL ITERADO SEA UN CERDO Y QUE ESTÉ VISIBLE
            if (coordenadasAnimales[i].tipo === 'cerdo' && coordenadasAnimales[i].visible) {
                canvas_context.drawImage(cerdo.imagen, coordenadasAnimales[i].x, coordenadasAnimales[i].y);
            }
        }
    }
    
    //DIBUJO DE LOS POLLOS
    if (pollo.cargaOK) {
        for (var i = 0; i < coordenadasAnimales.length; i++) {
            //VALIDAMOS QUE EL ANIMAL ITERADO SEA UN POLLO Y QUE ESTÉ VISIBLE
            if (coordenadasAnimales[i].tipo === 'pollo' && coordenadasAnimales[i].visible) {
                canvas_context.drawImage(pollo.imagen, coordenadasAnimales[i].x, coordenadasAnimales[i].y);
            }
        }
    }
    
    //DIBUJO DEL LOBO
    if (lobo.cargaOK){
        canvas_context.drawImage(lobo.imagen, lobo.x, lobo.y);
    }
    
    //DIBUJO DE LOS OGROS
    for (var o = 0; o < ogros.length; o++) {
        if (ogros[o].cargaOK) {
            canvas_context.drawImage(ogros[o].imagen, ogros[o].x, ogros[o].y);
        }
    }
    
    //DIBUJO DEL MENSAJE CONTADOR DEL PUNTAJE
    if (fondo.cargaOK && vaca.cargaOK && cerdo.cargaOK && pollo.cargaOK && lobo.cargaOK) {
        canvas_context.fillStyle = 'white';
        canvas_context.font = 'bold 16px Arial';
        canvas_context.fillText('Puntos: ' + lobo.comidos, 5, 20);
    }
}

//FUNCION PARA OBTENER UN VALOR ALEATORIO
function aleatorio(min, max){
    var resultado;
    resultado = Math.floor(Math.random() * (max - min + 1)) + min;
    return resultado;
}

//FUNCIÓN PARA OBTENER LAS COORDENADAS DE TODOS LOS ANIMALES A DIBUJAR
function crearCoordenadasAnimales(){
    //VACAS
    for(var v = 0; v < vaca.cantidad; v++){
        var disponible = false;
        var coordenada = {
            x: '', //COORDENADA X
            y: '', //COORDENADA Y
            tipo: 'vaca', //TIPO DE ANIMAL
            visible: true //ESTATUS PARA SABER SI SE DIBUJARÁ O NO. SIRVE PARA SABER SI EL ANIMAL HA SIDO COMIDO.
        };
        //OBTENEMOS LAS COORDENADAS DEL ANIMAL
        while(disponible === false){
            var x = aleatorio(0, 5) * 80;
            var y = aleatorio(0, 5) * 80;
            coordenada.x = x;
            coordenada.y = y;
            disponible = estaDisponible(coordenada); 
        }
        //--------------------FIN----------------------
        coordenadasAnimales.push(coordenada);
    }
    
    //CERDOS
    for(var c = 0; c < cerdo.cantidad; c++){
        var disponible = false;
        var coordenada = {
            x: '', //COORDENADA X
            y: '', //COORDENADA Y
            tipo: 'cerdo', //TIPO DE ANIMAL
            visible: true //ESTATUS PARA SABER SI SE DIBUJARÁ O NO. SIRVE PARA SABER SI EL ANIMAL HA SIDO COMIDO.
        };
        //OBTENEMOS LAS COORDENADAS DEL ANIMAL
        while(disponible === false){
            var x = aleatorio(0, 5) * 80;
            var y = aleatorio(0, 5) * 80;
            coordenada.x = x;
            coordenada.y = y;
            disponible = estaDisponible(coordenada); 
        }
        //--------------------FIN----------------------
        coordenadasAnimales.push(coordenada);
    }
    
    //POLLOS
    for(var p = 0; p < pollo.cantidad; p++){
        var disponible = false;
        var coordenada = {
            x: '', //COORDENADA X
            y: '', //COORDENADA Y
            tipo: 'pollo', //TIPO DE ANIMAL
            visible: true //ESTATUS PARA SABER SI SE DIBUJARÁ O NO. SIRVE PARA SABER SI EL ANIMAL HA SIDO COMIDO.
        };
        //OBTENEMOS LAS COORDENADAS DEL ANIMAL
        while(disponible === false){
            var x = aleatorio(0, 5) * 80;
            var y = aleatorio(0, 5) * 80;
            coordenada.x = x;
            coordenada.y = y;
            disponible = estaDisponible(coordenada); 
        }
        //--------------------FIN----------------------
        coordenadasAnimales.push(coordenada);
    }
    
    //LOBO
    var disponible = false;
    var coordenada = {
        x: '', //COORDENADA X
        y: '', //COORDENADA Y
        tipo: 'lobo' //TIPO DE ANIMAL
    };
    //OBTENEMOS LAS COORDENADAS DEL ANIMAL
    while(disponible === false){
        var x = aleatorio(0, 5) * 80;
        var y = aleatorio(0, 5) * 80;
        coordenada.x = x;
        coordenada.y = y;
        disponible = estaDisponible(coordenada); 
    }
    //--------------------FIN----------------------
    lobo.x = coordenada.x;
    lobo.y = coordenada.y;
    
    //OGROS
    for (var o = 0; o < ogros.length; o++) {
        disponible = false;
        coordenada = {
            x: '', //COORDENADA X
            y: '', //COORDENADA Y
            tipo: 'ogro' //TIPO DE ANIMAL
        };
        //OBTENEMOS LAS COORDENADAS DEL ANIMAL
        while(disponible === false){
            var x = aleatorio(0, 5) * 80;
            var y = aleatorio(0, 5) * 80;
            coordenada.x = x;
            coordenada.y = y;
            disponible = estaDisponible(coordenada); 
        }
        //--------------------FIN----------------------
        ogros[o].x = coordenada.x;
        ogros[o].y = coordenada.y;
    }
}

//FUNCIÓN PARA SABER SI LA COORDENADA ACTUAL SE ENCUENTRA DISPONIBLE, ES DECIR QUE OTRO ANIMAL NO SE ENCUENTRE EN LA MISMA COORDENADA
//ESTO ES PARA NO TENER ANIMALES ENCIMA DE OTROS.
function estaDisponible(coordenada){
    for (var i = 0; i < coordenadasAnimales.length; i++) {
        if (coordenada.x === coordenadasAnimales[i].x && coordenada.y === coordenadasAnimales[i].y && coordenadasAnimales[i].visible === true) {
            return false;
        }
    }
    return true;
}

//EVENTO PARA MOVER AL LOBO
function moverLobo(event){
    var x = 0;
    var y = 0;
    //VALIDAMOS QUE LA TECLA PRESIONADA SEA ALGUNA DE LAS FLECHAS
    if (event.keyCode === teclas.LEFT || event.keyCode === teclas.UP || event.keyCode === teclas.RIGHT || event.keyCode === teclas.DOWN) {
        //ASIGNACIÓN DE VALORES NUEVOS PARA LAS COORDENADAS DEL LOBO
        switch(event.keyCode){
           case teclas.LEFT:
               x = -80;
               break;
           case teclas.UP:
               y = -80;
               break;
           case teclas.RIGHT:
               x = 80;
               break;
           case teclas.DOWN:
               y = 80;
               break;
        }
        //--------------------FIN----------------------
       
        //ASGINAMOS LAS NUEVAS COORDENADAS PARA EL LOBO
        lobo.x += x;
        lobo.y += y;
        //--------------------FIN----------------------

        //VALIDACIONES QUE SIRVEN PARA QUE EL LOBO NO SE SALGA DEL CANVAS
        if (lobo.x < 0) {
            lobo.x = 0;
        }
        if (lobo.x > (canvas_fondo.width - 100)) {
            lobo.x = canvas_fondo.width - 100;
        }
        if (lobo.y < 0) {
            lobo.y = 0;
        }
        if (lobo.y > (canvas_fondo.height - 100)) {
            lobo.y = canvas_fondo.height - 100;
        }
        //--------------------FIN----------------------
        
        //MOVIMIENTO DE OGROS
        for (var o = 0; o < ogros.length; o++) {
            moverOgro(ogros[o]);
        }
        
        dibujar(); //DIBUJAMOS NUEVAMENTE EL CANVAS

        //CUANDO EL LOBO SEA ALCANZADO POR EL OGRO, ENVIAMOS UN MENSAJE
        for (var o = 0; o < ogros.length; o++) {
            if (lobo.x === ogros[o].x && lobo.y === ogros[o].y){
                canvas_context.fillStyle = 'white';
                canvas_context.font = 'bold 16px Arial';
                canvas_context.fillText('Has sido alcanzado por el ogro... :D',  canvas_fondo.width / 5, canvas_fondo.height / 2);
                canvas_context.fillText('Fin del juego!!',  canvas_fondo.width / 5, canvas_fondo.height / 2.5);
                document.removeEventListener('keydown', moverLobo);
            }
        }

        //CUANDO TODOS LOS ANIMALES HAYAN SIDO COMIDOS, ENVIAMOS UN MENSAJE EN EL CANVAS
        if (coordenadasAnimales.length === lobo.comidos) {
            canvas_context.fillStyle = 'white';
            canvas_context.font = 'bold 16px Arial';
            canvas_context.fillText('Has acabado con todos los animales... :(',  canvas_fondo.width / 5, canvas_fondo.height / 2);
            document.removeEventListener('keydown', moverLobo);
        }
        //--------------------FIN----------------------
    }
}

//FUNCIÓN PARA MOVER A LOS OGROS
function moverOgro(ogro){
    //CODIGO Y ALGORITMO PARA EL MOVIMIENTO AUTOMÁTICO DEL OGRO
    //BÚSQUEDA DE POSICIONES DISPONIBLES
    var posicionesDisponibles = [];
    for (var i = 0; i < 5; i++) {
        var posicionPosible = {
            x: ogro.x,
            y: ogro.y,
            distancia: 0
        };
        switch(i){
            case 0:
                posicionPosible.x += 80;
            break;
            case 1:
                posicionPosible.x -= 80;
            break;
            case 2:
                posicionPosible.y += 80;
            break;
            case 3:
                posicionPosible.y -= 80;
            break;
            case 4:
                //AQUÍ DEJAMOS QUE LA POSICION POSIBLE CUENTE CON LAS MISMAS COORDENADAS QUE LAS DEL OGRO
                //YA QUE TAL VEZ EL PUNTO MÁS CERCANO ES NO MOVERSE.
            break;
        }
        if (posicionPosible.x > 480
            || posicionPosible.x < 0
            || posicionPosible.y > 480
            || posicionPosible.y < 0) {
                //POSICIÓN FUERA DE LOS LIMITES
            }
            else {
                if (estaDisponible(posicionPosible)) {
                    //Determinamos la distancia de esta posible posición con respecto a la posición del lobo.
                    posicionPosible.distancia = Math.sqrt(Math.pow(lobo.x - posicionPosible.x, 2) + Math.pow(lobo.y - posicionPosible.y, 2));
                    posicionesDisponibles.push(posicionPosible);
                }        
            }
        }

    //BÚSQUEDA DE LAS POSICIONES POSIBLES A PARTIR DE LAS POSICIONES DISPONIBLES
    if (posicionesDisponibles.length > 0) {
        var posicionesPosibles = [];
        for (var p = 0; p < posicionesDisponibles.length; p++) {
            if (posicionesPosibles.length > 0) {
                if (posicionesDisponibles[p].distancia === posicionesPosibles[0].distancia) {
                    posicionesPosibles.push(posicionesDisponibles[p]);
                }
                else if (posicionesDisponibles[p].distancia < posicionesPosibles[0].distancia) {
                    posicionesPosibles = [];
                    posicionesPosibles.push(posicionesDisponibles[p]);
                }
            }
            else {
                posicionesPosibles.push(posicionesDisponibles[p]);
            }
        }
        if (posicionesPosibles.length > 0) {
            var item = aleatorio(0, posicionesPosibles.length - 1);
            ogro.x = posicionesPosibles[item].x;
            ogro.y = posicionesPosibles[item].y;
        }
    }
    //--------------------FIN----------------------

    //CODIGO QUE SE EJECUTA CUANDO EL LOBO ALCANZA A UN ANIMAL
    for (var a = 0; a < coordenadasAnimales.length; a++) {
        //VALIDAMOS QUE EL LOBO ESTÉ EN LAS MISMAS COORDENADAS QUE EL ANIMAL Y QUE EL MISMO ANIMAL ESTÉ VISIBLE 
        if (coordenadasAnimales[a].x === lobo.x && coordenadasAnimales[a].y === lobo.y && coordenadasAnimales[a].visible) {
            lobo.comidos++; //AUMENTAMOS EL CONTADOR DE ANIMALES COMIDOS POR EL LOBO
            coordenadasAnimales[a].visible = false; //CAMBIAMOS EL ESTATUS DEL ANIMAL COMIDO PARA NO VOLVERLO A DIBUJAR
            break;
        }
    }
    //--------------------FIN----------------------
}```

Nota: Si desean implementar el código, confirmen que las rutas de las imágenes sean correctas ya que yo almacené las imágenes en una carpeta.

Happy coding..!! :)

Lautaro Cabral

Opss

Gabriel Argaña

joseanton111

Luigi F

Aquí esta el reto tuve que revisar un poco los comentarios, no entendía mucho pero lo logre :D

// Moviendo al cerdo

var teclas = {

UP: 38,

DOWN: 40,

LEFT: 37,

RIGHT: 39

};

document.addEventListener("keydown", dibujarCerdo);

var vp = document.getElementById("villaplatzi");

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

var fondo = {

url: "tile.png",

cargaOK: false

};

var cerdo = {

url: "cerdo.png",

cargaOK: false,

x:250,

y:250,

velocidad:5

};

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

function cargarFondo()

{

fondo.cargaOK = true;

dibujar();

}

function cargarCerdo()

{

cerdo.cargaOK = true;

dibujar();

}

function dibujar()

{

if (fondo.cargaOK)

{

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

}

if (cerdo.cargaOK)

{

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

}

function dibujarCerdo(evento)

{

var j = evento.keyCode;

if(j == teclas.UP)

{

if(cerdo.y > 0)

{

dibujar(cerdo.y -= cerdo.velocidad);

}

if(j == teclas.DOWN)

{

if(cerdo.y < 500)

{

dibujar(cerdo.y += cerdo.velocidad);

}

if(j == teclas.RIGHT)

{

if(cerdo.x < 500)

{

dibujar(cerdo.x += cerdo.velocidad);

}

if(j == teclas.LEFT)

{

if(cerdo.x > 0)

{

dibujar(cerdo.x -= cerdo.velocidad);

}

Karla Agraz

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.

Raylegh

Temine por fin aahhh me costo solucionar lo que el cerdo se moviera y que dejara de refrescar las imagenes xD pero termine aquí les dejo (devi acortar el código pero tengo sueño xD)

var camvas = document.getElementById('canvas');

var papel = canvas.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 pollo ={ url: "pollo.png", cargaOK: false};

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

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

document.addEventListener("keyup", dibujarTeclado);

console.log(papel);

console.log(cerdo);

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

var cantidadVaca = aleatorio(0, 15);

var xVaca = new Array();

var yVaca = new Array();

pollo.imagen = new Image();

pollo.imagen.src = pollo.url;

pollo.imagen.addEventListener("load", cargarAnimal);

var cantidadPollo = aleatorio(0, 15);

var xPollo = new Array();

var yPollo = new Array();

cerdo.imagen = new Image();

cerdo.imagen.src = cerdo.url;

cerdo.imagen.addEventListener("load", cargarAnimal);

var cantidadCerdo = aleatorio(0, 15);

var xCerdo = new Array();

var yCerdo = new Array();

cerdoMover.imagen = new Image();

cerdoMover.imagen.src = cerdoMover.url;

cerdoMover.imagen.addEventListener("load", cargarAnimal);

var xMover = 200;

var yMover = 200;

function cargarFondo ()

  fondo.cargaOK = true;

  dibujar();

function cargarAnimal ()

  vaca.cargaOK = true;

  for( i=0; i < cantidadVaca ; i++ )

    var x = aleatorio(0, 7);

    var y = aleatorio(0, 7);

    x = x * 60;

    y = y * 60;

    xVaca[i] = x;

    yVaca[i] = y;

  pollo.cargaOK = true;

  for( i=0; i < cantidadVaca ; i++ )

    var x = aleatorio(0, 7);

    var y = aleatorio(0, 7);

    x = x * 60;

    y = y * 60;

    xPollo[i] = x;

    yPollo[i] = y;

  cerdo.cargaOK = true;

  for( i=0; i < cantidadVaca ; i++ )

    var x = aleatorio(0, 7);

    var y = aleatorio(0, 7);

    x = x * 60;

    y = y * 60;

    xCerdo[i] = x;

    yCerdo[i] = y;

  cerdoMover.cargaOK = true;

  dibujar();

function dibujar ()

  if (fondo.cargaOK)

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

  if (vaca.cargaOK )

    for( i=0; i < cantidadVaca ; i++ )

      papel.drawImage(vaca.imagen, xVaca[i] , yVaca[i]);

  if (pollo.cargaOK )

    for( i=0; i < cantidadPollo ; i++ )

      papel.drawImage(pollo.imagen, xPollo[i] , yPollo[i]);

  if (cerdo.cargaOK )

    for( i=0; i < cantidadCerdo ; i++ )

      papel.drawImage(cerdo.imagen, xCerdo[i] , yCerdo[i]);

  if (cerdoMover.cargaOK)

    papel.drawImage(cerdoMover.imagen, xMover , yMover);

function dibujarCerdoMover()

  if (cerdoMover.cargaOK)

    papel.drawImage(cerdoMover.imagen, xMover , yMover);

function aleatorio (min, max)

  var resultado;

  resultado = Math.floor(Math.random() * (max - min + 1)) + min ;

  return resultado;

function dibujarTeclado(evento)

  var movimiento = 10;

  console.log(evento);

  switch (evento.keyCode)

    case teclas.DOWN:

      yMover = yMover + movimiento;

      dibujar(xMover , yMover);

      console.log("abajo");

    break;

    case teclas.UP:

      yMover = yMover - movimiento;

      dibujar(xMover , yMover);

      console.log("arriba");

    break;

    case teclas.LEFT:

      xMover = xMover - movimiento;

      dibujar(xMover , yMover);

      console.log("izquierda");

    break;

    case teclas.RIGHT:

      xMover = xMover + movimiento;

      dibujar(xMover , yMover);

      console.log("derecha");

    break;

    default:

      console.log("Otra tecla");

    break;

Daniel Alejandro Mejia Rojas

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]);
        }
    }
}```

María Alejandra Correa Rojas

Muchos cerditos, muchas vaquitas, y muy pronto se movera mi pollito. Por ahora el código.

var vp = document.getElementById("villa");
var papel = vp.getContext("2d");
//var mapa = "tile.png"; //Aquí se asigna la imagen de fondo a una variable
//JSON FONDO
var fondo ={ //JSON con variable fondo que trae parametros url y cargaOK
  url: "tile.png",//ulr es donde se aloja la imagen
  cargaOK: false//cargaOK es el que avisa si la carga de la imagen se realiza o no
};
//JSON VACAS
var vaca ={
  url : "vaca.png",
  cargaOK: false
};
//JSON CERDOS
var cerdo ={
  url: "cerdo.png",
  cargaOK: false
};
//JSON POLLOS
var pollo ={
  url: "pollo.png",
  cargaOK: false
};

var cantidad = aleatorio(0,5); //cantidad de vacas que saldran en el navegador

//FONDO
fondo.imagen = new Image();//clase Image
fondo.imagen.src = fondo.url; //llama el parametro url en donde se encuentra la imagen
fondo.imagen.addEventListener("load", cargarFondo); // load que permite la carga de la imagen dentro de la funcion cargarFondo
//VACAS
vaca.imagen = new Image();
vaca.imagen.src = vaca.url;
vaca.imagen.addEventListener("load", cargarVacas);
//CERDOS
cerdo.imagen = new Image();
cerdo.imagen.src = cerdo.url;
cerdo.imagen.addEventListener("load", cargarCerdos);
//POLLOS
pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
pollo.imagen.addEventListener("load", cargarPollos);
//CARGA FONDO
function cargarFondo(){ //Permite carga el fondo del canvas
  fondo.cargaOK = true;//Cuando se ejecuta esta funcion la carga de la imagen esta en TRUE
  dibujar();//Dibuja la imagen de fondo cuando se ejecuta la funcion dibujar
}
//CARGA VACAS
function cargarVacas(){
  vaca.cargaOK = true;
  dibujar();
}
//CARGA CERDOS
function cargarCerdos(){
  cerdo.cargaOK = true;
  dibujar();
}
//CARGA POLLOS
function cargarPollos(){
  pollo.cargaOK = true;
  dibujar();
}

function dibujar() {
  if (fondo.cargaOK == true){
    papel.drawImage(fondo.imagen,0,0); //Dibuja imagen en canvas en la posicion 0 en X y 0 en Y
  }
  if (vaca.cargaOK == true){
      console.log(cantidad);
        for(i=0;i<cantidad;i++){
        //var x=aleatorio(0,420);//El limite es 420 porque la imagen de la vaca en de 80x80; 500-80=420
        //var y=aleatorio(0,420);
        var x=aleatorio(0,5);//Las vacas se ven más organizadas y no se ven unas sobre otras
        var y=aleatorio(0,5);
        var x=x*80;
        var y=y*80;
        papel.drawImage(vaca.imagen,x,y); //Dibuja imagen en canvas en la posicion 0 en X y 0 en Y
      }
  }
  if (cerdo.cargaOK){
    for(i=0;i<cantidad;i++){
    //var x=aleatorio(0,420);//El limite es 420 porque la imagen de la vaca en de 80x80; 500-80=420
    //var y=aleatorio(0,420);
    var x=aleatorio(0,5);//Las vacas se ven más organizadas y no se ven unas sobre otras
    var y=aleatorio(0,5);
    var x=x*80;
    var y=y*80;
    papel.drawImage(cerdo.imagen,x,y);
  }
}
  if(pollo.cargaOK){
    papel.drawImage(pollo.imagen, 400,10);
  }
}

function aleatorio(min, maxi){
  var resultado;
  resultado = Math.floor(Math.random()*( maxi - min + 1)) + min; //Operación matematica para obtener numeros aleatorios en el rango maxi y min
  return resultado; //retorna el resultado de la variable
}

Y su resuttado:

Eduardo Rene Alfaro Montero

A ver que tal!! :)

var canvas = document.getElementById('canvas');

var area = canvas.getContext('2d');

var xini = aleatorio(0, 420);

var yini = aleatorio(0, 420);

var velocity = 15;

var fondo = {

  url: 'tile.png',

  cargaOK: false

var cerdo = {

  url: 'cerdo.png',

  cargaOK: false,

  posX: xini,

  posY: yini

var teclas = {

  UP: 38,

  DOWN: 40,

  LEFT: 37,

  RIGHT: 39

fondo.obj = new Image();

fondo.obj.src = fondo.url;

fondo.obj.addEventListener('load', cargarFondo);

cerdo.obj = new Image();

cerdo.obj.src = cerdo.url;

cerdo.obj.addEventListener('load', cargarCerdo);

document.addEventListener('keydown', movimiento);

function movimiento(evt)

  switch (evt.keyCode) {

    case teclas.UP:

      if (cerdo.posY > 0) {

        cerdo.posY = cerdo.posY - velocity;

        clear();

        dibujar();

      break;

    case teclas.DOWN:

      if (cerdo.posY < canvas.width - 80) {

        cerdo.posY = cerdo.posY + velocity;

        clear();

        dibujar();

      break;

    case teclas.LEFT:

      if (cerdo.posX > 0) {

        cerdo.posX = cerdo.posX - velocity;

        clear();

        dibujar();

      break;

    case teclas.RIGHT:

      if(cerdo.posX < canvas.width - 80){

        cerdo.posX = cerdo.posX + velocity;

        clear();

        dibujar();

      break;

    default:

function cargarFondo()

  fondo.cargaOK = true;

  dibujar();

function cargarCerdo()

  cerdo.cargaOK = true;

  dibujar();

function dibujar()

  if (fondo.cargaOK)

      area.drawImage(fondo.obj, 0, 0);

  if (cerdo.cargaOK)

      area.drawImage(cerdo.obj, cerdo.posX, cerdo.posY);

function aleatorio(min, max)

  var res;

  res = Math.floor(Math.random() * (max - min + 1)) + min;

  return res;

function clear(){

    area.clearRect(0, 0, canvas.width, canvas.height);

    dibujar();

Abril Darynka Tapia Sosa

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>

Carlos Arturo Murcia Andrade

Código1.jpg
Código 2.jpg
Código 3.jpg
Código 4.jpg
Código 5.jpg
Código 6.jpg
Código 7.jpg
Código 8.jpg
Código 9.jpg
Código 10.jpg
Código 11.jpg

Rodrigo Perez Arzate

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

Sebastián González Muñoz

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)   // Función de números 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;
    }
}```

Fernando Alejandro Novillo Aguirre

Shay Guzmán Vara

esto cuenta? 😂😂🤣🤣

Nicolas Esteban Prieto Sarmiento

hice el desafió y coloque un señor que intenta matar moscas ya que cambie la trama, y cada vez que avanzas el personaje las moscas se mueven. Pueden descargarlo en este link

https://drive.google.com/drive/folders/1O0hze5rXeuKemfbDW1Hdls6505skSxma?usp=sharing

Roco Fernández Pagella

con los números aleatorios logré darle colores random al canvas

Reinaldo Mendoza

Hola,

Aqui pueden jugar Pokémon, les dejo mi codigo

<<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>PlatziFarm</title>
</head>
<body>
	<h1>Captura todos los pokémon</h1>
	<p>
		Elije cuantos pokémon quieres: <br> Houndours:
		<input type="text" name="" id="vacas_txt">
	</p>
	<p>
		Furrets:
		<input type="text" name="" id="pollos_txt">
	</p>
	<p>
		Abras:
		<input type="text" name="" id="cerdos_txt">
	</p>
	<p>
		<input type="button" value="Dibujar" name="" id="ok_btn">
	</p>
	<canvas width="500" height="500" id="villaPlatzi"></canvas>
	<script src="villaPlatzi.js"></script>
</body>
</html>>

<//las imagenes son 80x80 px y el canvas 500x500 px, asi evito que la img quede por fuera
var POSCMAX = 420;
var POSCMIN = 0;
var MOVIMIENTOPERSONAJE = POSCMAX/10;
var teclas = {
	UP:38,
	DOWN:40,
	LEFT:37,
	RIGHT:39
};

var lienzo = document.getElementById("villaPlatzi");
var canvas = lienzo.getContext("2d");

var numVacas = 0;
var numPollos = 0;
var numCerdos = 0;
var okBtn = document.getElementById("ok_btn");

var fondo = {
	url : "tile.png",
	cargado : false
};
var vaca = {
	url : "houndoun.png",
	cargado : false
};
var pollo = {
	url : "zizagoon.png",
	cargado : false
};
var cerdo = {
	url : "abra.png",
	cargado : false
};
var ash = {
	url : "ash.png",
	cargado : false	
};
//posiciones de los animales en el canvas
var vacaX = null;
var vacaY = null;
var polloX = null;
var polloY = null;
var cerdoX = null;
var cerdoY = null;
var ashX = null;
var ashY = null;

document.addEventListener("keyup", moverAsh);
okBtn.addEventListener("click", capturarNumeros);

function capturarNumeros(){
	numVacas = parseInt(document.getElementById("vacas_txt").value);
	numPollos = parseInt(document.getElementById("pollos_txt").value);
	numCerdos = parseInt(document.getElementById("cerdos_txt").value);
	crearImagen();
}

function crearImagen(){
	//js no permite añadir un objeto imagen desde el inicio en JSON por eso lo hago aqui
	fondo.img = new Image();
	fondo.img.src = fondo.url;
	fondo.img.addEventListener("load", cargarFondo);

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

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

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

	ash.img = new Image();
	ash.img.src = ash.url;
	ash.img.addEventListener("load", cargarAsh);
}

//me va a avisar cuando ya se a cargado el recurso en memoria
function cargarFondo(){
	fondo.cargado = true;
	dibujar();
}

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

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

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

function cargarAsh(){
	ash.cargado = true;
	dibujar();
}

function dibujar(){
	if(fondo.cargado){
		//dibujar una imagen en canvas desde la posicion 0,0
		canvas.drawImage(fondo.img, 0, 0);
	}
	if(vaca.cargado){
		//si es la primera vez que dibujo y no tengo coordenadas de los animales, las creo
		if(vacaX == null){
			vacaX = new Array();
			vacaY = new Array();
			dibujarAleatorio(numVacas, vaca.img, vacaX, vacaY);			
		}else{
			//si ya existen las posiciones las redibujo alli
			redibujar(vaca.img, vacaX, vacaY);
		}	
	}
	if(pollo.cargado){
		if(polloX == null){
			polloX = new Array();
			polloY = new Array();
			dibujarAleatorio(numPollos, pollo.img, polloX, polloY);
		}else{
			redibujar(pollo.img, polloX, polloY);
		}			
	}
	if(cerdo.cargado){
		if(cerdoX == null){
			cerdoX = new Array();
			cerdoY = new Array();
			dibujarAleatorio(numCerdos, cerdo.img, cerdoX, cerdoY);	
		}else{
			redibujar(cerdo.img, cerdoX, cerdoY);
		}				
	}
	if(ash.cargado){
		if(ashX == null){
			dibujarAsh(POSCMAX, POSCMAX); 
		}else{
			capturarAnimal(vacaX, vacaY);
			capturarAnimal(polloX, polloY);
			capturarAnimal(cerdoX, cerdoY);
			validarGanador(vacaX, polloX, cerdoX);
		}
	}
}

function aleatorio(min, max){
	var res;
	//en js el random devuelve un numero entre 0.1 y 0.9 con muchos decimales por
	//lo que con esta ecuacion se va a convertir a un numero entero
	res = Math.floor(Math.random() * (max - min +1)) + min;
	//quiero colocar el animal cada 10px
	return res * 10;
}

function moverAsh(ev){
	//ash ya debe estar creado antes de moverse
	if(ashX > POSCMIN){
		//para moverse debo dibujar todo igual y ash en la nueva posicion
		dibujar();
		switch(ev.keyCode){
			case teclas.UP:
				dibujarAsh(ashX, ashY - 10);
			break;
			case teclas.DOWN:
				dibujarAsh(ashX, ashY + 10);
			break;
			case teclas.LEFT:
				dibujarAsh(ashX - 10, ashY);
			break;
			case teclas.RIGHT:
				dibujarAsh(ashX + 10, ashY);
			break;
		}
	}		
}

function dibujarAsh(x, y){
	ashX = x;
	ashY = y;
	canvas.drawImage(ash.img, x, y);	
}

function dibujarAleatorio(num, animalAleatorio, animalX, animalY){
	for(var i = 0; i < num; i++){
		//obtengo un numero random entre 0 y 42, lo *10 para que se ubique en multiplos10
		animalX[i] = aleatorio(POSCMIN, MOVIMIENTOPERSONAJE);
		animalY[i] = aleatorio(POSCMIN, MOVIMIENTOPERSONAJE);
		canvas.drawImage(animalAleatorio, animalX[i], animalY[i]);
	}
}

function redibujar(animalRedibujado, posX, posY){	
	for(var i = 0; i < posX.length; i++){
		canvas.drawImage(animalRedibujado, posX[i], posY[i]);
	}
}

function capturarAnimal(animalX, animalY){
	for (var i = 0; i < animalX.length; i++) {
		console.log("ashX" + ashX + " ashY" + ashY);
		console.log("animalX" + animalX + ", animalY" + animalY);
		if(ashX == animalX[i] && ashY == animalY[i]){
			//console.log("capturado");
			//splice elimina 1 elemento contenido desde la posicion i en el array
			animalX.splice(i, 1);
			animalY.splice(i, 1);
		}
	}
}

function validarGanador(vaca, pollo, cerdo){
	if(vaca.length == 0 && pollo.length == 0 && cerdo.length == 0){
		alert("Has ganado");
	}
}>

Esteban

Ervic

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.

canvas siempre dibuja encima del ultimo objeto.

Héctor Eduardo López Carballo

Platzi Team

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>

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

Santiago Rueda

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

favioh

Decidí hacerles un corral a las vacas

Cristian Camilo Cortes Ortiz

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>

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

Arturo Ventura Martinez

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(“villaplatzi”);
var papel = vp.getContext(“2d”);
mapa=“tile.png”;

fondo=new Image();
fondo.src=mapa;
fondo.addEventListener(“load”,dibujar);

cerdo=new Image();
cerdo.src=“cerdo.png”;
cerdo.addEventListener(“load”,dibujarCerdo);

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

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

document.addEventListener(“keydown”,moverCerdo);
x=0;
y=0;

function moverCerdo(evento)
{

movimiento=3;
switch(evento.keyCode)
{
case teclas.UP:
y=y-movimiento;
dibujarCerdo();
console.log(“arriba”);
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;

}
}

Deudiel Velázquez Pérez

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

Jorge O Meza Arce

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;
    }
}```

acostheta

Miguel Hernandez Moreno

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>

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

María Teresa Samudio

Variables necesarias
Captura de pantalla_2020-06-20_23-34-43.png

Las funciones para las posiciones iniciales
Captura de pantalla_2020-06-20_23-35-19.png

Los objetos
Captura de pantalla_2020-06-20_23-35-37.png

Las funciones de carga
Captura de pantalla_2020-06-20_23-36-14.png

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

Moviendo al cerdo con las teclas!!
Captura de pantalla_2020-06-20_23-37-50.png

André Ribet

Algo pasó el Sábado. En los comentarios varios veian el video correcto hasta algún momento del Sábado y luego el domingo todos ven el video anterior repetido.

He revisado en 4 navegadores distintos y en ambos server.

emacastillozam

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 “quedaran” 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;
}

Mauricio Gomez

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;
}```

Diana_Sanchez

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

julian andres salcedo mendoza

![]( logradooo cerdoomovible.PNG

logradooo desafio hechoooooo…

Jorge Arango

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

danielspastas

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>

Juan Peña Dorado

<!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

Para ver esta clase abierta debes iniciar sesión

Curso Gratis de Programación Básica

Freddy Vega

Uso y carga de imágenes en Canvas20/36

Juego Villa Platzi

Reto Cumplido - Y sin colisión entre animales

Comparto mi código

Juego Villa Platzi