Uso y carga de imágenes en Canvas

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

Jesús Lautaro Careglio Albornoz

Juego Villa Platzi

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

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

Martin Ardila

cuando resuelves un error de codigo y aparece otro

Jean Carlos González Valverde

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

Cristian Cisneros

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.

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.

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

Lautaro Cabral

Opss

Dayana Bedoya Londoño

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. 😮

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

javier-cubillos

Esta es la mi respuesta al reto 😎

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.

Luis Ariza

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

Santiago Rueda

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

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

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

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

ivan dario castro

hace 9 meses

Yo lo hice un poco diferente 😃

Roco Fernández Pagella

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

favioh

Decidí hacerles un corral a las vacas

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

goicovick

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

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.

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>

Karla

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.

joseanton111

Sonia Mendoza

Yo hice un ovni abduciendo una vaca.

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

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


function moverNave(evento)
{
    var movimiento = 1;

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

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

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

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

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


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

HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Aliens</title>
    </head>
    <body>
        <canvas width="500" height="500" id="campoDeSeñales"></canvas>
        <script src="ovni.JS"></script>
    </body>
</html>

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

Betty María Ramírez de Rios

hace 9 meses

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

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

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

Shay Guzman Vara

esto cuenta? 😂😂🤣🤣

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

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

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>

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…

Ricardo Cuevas Mondragon

Hola aquí les traigo los dos retos resueltos.

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

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

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}

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.

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

Las funciones para las posiciones iniciales

Los objetos

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

Las funciones de carga

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

Moviendo al cerdo con las teclas!!

Arturo Ventura Martínez

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;

}
}

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

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

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

Juan Pablo Reina

Este es mi código:

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

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

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

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

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

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

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

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

// Estas variables servirán para recordar la última posición del cerdo que se va a mover
let posX;
let posY;

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

let cantidad = aleatorio(1, 10);

fondo.imagen = new Image(); // Estamos creando una etiqueta <img>
fondo.imagen.src = fondo.url;
fondo.imagen.addEventListener("load", cargarFondo);

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

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

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

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

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

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

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

function dibujar() {
    if (fondo.cargaOK) {
        papel.drawImage(fondo.imagen, 0, 0); // En el canvas, el punto 0, 0 está en la esquina superior izquierda
        // El segundo y tercer parámetro indican desde donde se va a empezar a dibujar la imagen dentro del canvas
    }

    console.log(cantidad);

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

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

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

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

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

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

        }
    }

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

Andrew Rey

Me gusta que con muy poco se pueden hacer cosas interesantes

![](

jhoneag19

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

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

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

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

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

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

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


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

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

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

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

function cargarGranjero ()
{
  granjero.cargaOK = true;
  dibujar();
}

function dibujar()
{

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


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

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

      break
    }
}
</code>

Christian Pantoja

2 Retos cumplidos.

Oscar Alejandro Umaña Espinosa

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

![](

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

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

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

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

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

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

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

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

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

document.addEventListener("keydown", moverCerdo);

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

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

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

Hendrik Leal

Platzi Team

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

Animal Rebelde

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

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

}

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.

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

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

Cindy Luciani Correa

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

Andres Pozzi

Hice un dark souls en 2D

Jeison Wu Mitre

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

_abajo dejo el código. _

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

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

Rony Romero Duque

hace 10 meses

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

Miguel Fernandez

hace 3 meses

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

Eduardo Villa Gámez

hace 7 meses

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

YessiMaya441

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

Ignacio Ayerbe

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

CarlosZapata

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Michael Moguel

hace 6 meses

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

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

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

Diana Yuslendy Mory Paz

<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

andres-ernesto-gomez

Moviendo al Pollo

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

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

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

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

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

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

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

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

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

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

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

document.addEventListener("keydown", moverPollo);

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

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

Delaney David Sarmiento Hernández

Muy rápido Freddy!!

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

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

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

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

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

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

Juan Manuel Eijo Sorrentino

Que dificil desafio jajaja, pensaba q era mas fácil. Empece en el mundo de la programacion con este curso y este desafio pudo conmigo. A seguir que esto recien empiezaaa!!! Fuerza para todos y principalmente a los que estan empezando como yo, no bajen la cabeza que nada se aprende de un dia para el otro

Jhon Miguel Moscoso Mamani

pague platzi para comenzar desde 0 este programa/carrera, la verdad bastante decepcionado siento que en estos 40 minutos me quisieron “enseñar” de golpe todo, al final terminé copiando y me deja bastante decepcionado la forma de “seguir el camino”

Milton Alexander Elizalde Gaibor

HICE UN JUEGO DE COMER FRUTAS DE LA GRANJA!
(PUEDES MOVERTE CON A-W-S-D) O EN CASO QUE ESTES EN CELULAR CON BOTONES:

Aqui dejo la pagina:
https://boomcrash.github.io/MinijuegoGranja/
Aqui dejo mi codigo fuente:
https://github.com/boomcrash/MinijuegoGranja

Genaro Ismael Bonavita

https://animalsmemory-game.netlify.app/

Gente, ya se que no forma parte del curso, pero quería mostrar mi proyecto hecho con las imágenes de Villa Platzi:

PD: cualquier bug o error que encuentren me lo pueden comunicar ; )

Juan Palma

está cuidando que no se roben las vacas

Christian Ignacio Loyola Soto

Oh no…

Víctor Manuel Ramírez Guerrero

hace 3 meses

Con este reto te das cuenta de que lo dicho por Freddy tantas veces es cierto “La programación es difícil pero extremadamente recompensante” y por esto animo a todos a que lo intenten!

Después de momentos de estrés, análisis y aprendizaje este es el resultado de mi proyecto personal (luego de pasar con éxito los dos retos planteados en la clase)
+ Añado también los sprites usados, creados en Piskel, basados en el estilo gráfico de PACMAN

https://imgur.com/a/7NzG59k
HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        body{
            background-color: black;
            color: white;
            font-family: monospace;
            text-align: center;
        }
        canvas{
            padding: 0;
            margin: auto;
            display: block;
            width: 600px;
            height: 300px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        h3{
            color: black;
            background-color: #14fc04;
        }
        a{
            color: #14fc04;
        }
    </style>
    <title>PlatziRETRO</title>
</head>
<body>
    <h1>MUEVE EL CURSOR CON LAS FLECHAS DE TU TECLADO</h1>
    <h3>VE A LA ESCUELA QUE DESEES</h3>
    <h4>Este proyecto corresponde al reto planteado en el curso de: <br><a href="https://platzi.com/cursos/programacion-basica/" target="_blank" rel="noopener noreferrer">Programación básica</a></h4>
    <h4>HECHO POR: VICTOR RAMIREZ</h4>
    <canvas width="600" height="300" id="platziretro"></canvas>
    <script src="platzi_retro.js"></script>
</body>
</html>

JS:

document.addEventListener("keyup", moverCursor);
var canvas = document.getElementById("platziretro");
var ctx = canvas.getContext("2d");
var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

var cantidad = aleatorio(2, 3);

var fondo = {
    url: "background.png",
    loadOK: false
};
var manzana = {
    url: "manzana.png",
    loadOK: false
};
var naranja = {
    url: "naranja.png",
    loadOK: false
};
var cereza = {
    url: "cereza.png",
    loadOK: false
};
var pera = {
    url: "pera.png",
    loadOK: false
};
var cursor = {
    url: "cursor.png",
    loadOK: false,
    x: 300,
    y: 150
};

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

manzana.imagen = new Image();
manzana.imagen.src = manzana.url;
manzana.imagen.addEventListener("load", cargarManzanas);

naranja.imagen = new Image();
naranja.imagen.src = naranja.url;
naranja.imagen.addEventListener("load", cargarNaranjas);

cereza.imagen = new Image();
cereza.imagen.src = cereza.url;
cereza.imagen.addEventListener("load", cargarCerezas);

pera.imagen = new Image();
pera.imagen.src = pera.url;
pera.imagen.addEventListener("load", cargarPeras);

cursor.imagen = new Image();
cursor.imagen.src = cursor.url;
cursor.imagen.addEventListener("load", cargarCursor);

function cargarFondo()
{
    fondo.loadOK = true;
    dibujar();
};
function cargarManzanas()
{
    manzana.loadOK = true;
    dibujar();
};
function cargarNaranjas()
{
    naranja.loadOK = true;
    dibujar();
};
function cargarCerezas()
{
    cereza.loadOK = true;
    dibujar();
};
function cargarPeras()
{
    pera.loadOK = true;
    dibujar();
};
function cargarCursor()
{
    cursor.loadOK = true;
    dibujar();
};

var posManzanas = {
    MANZANASX: [],
    MANZANASY: []
};

var posNaranjas = {
    NARANJASX: [],
    NARANJASY: []
};

var posCerezas = {
    CEREZASX: [],
    CEREZASY: []
};

var posPeras = {
    PERASX: [],
    PERASY: []
};

function dibujar()
{
    if (fondo.loadOK){
        ctx.drawImage(fondo.imagen, 0, 0);
    }
    if (manzana.loadOK)
    {
        for(var i=0; i < cantidad; i++)
        {
        var x = aleatorio(70, 530);
        var y = aleatorio(70, 230);
        ctx.drawImage(manzana.imagen, x, y);
        posManzanas.MANZANASX[i] = x;
        posManzanas.MANZANASY[i] = y;
        }
    }
    if (naranja.loadOK)
    {
        for(var i=0; i < cantidad; i++)
        {
        var x = aleatorio(70, 530);
        var y = aleatorio(70, 230);
        ctx.drawImage(naranja.imagen, x, y);
        posNaranjas.NARANJASX[i] = x;
        posNaranjas.NARANJASY[i] = y;
        }
    }
    if (cereza.loadOK)
    {
        for(var i=0; i < cantidad; i++)
        {
        var x = aleatorio(70, 530);
        var y = aleatorio(70, 230);
        ctx.drawImage(cereza.imagen, x, y);
        posCerezas.CEREZASX[i] = x;
        posCerezas.CEREZASY[i] = y;
        }
    }
    if (pera.loadOK)
    {
        for(var i=0; i < cantidad; i++)
        {
        var x = aleatorio(70, 530);
        var y = aleatorio(70, 230);
        ctx.drawImage(pera.imagen, x, y);
        posPeras.PERASX[i] = x;
        posPeras.PERASY[i] = y;
        }
    }
    if(cursor.loadOK)
    {
        ctx.drawImage(cursor.imagen, cursor.x, cursor.y);
    }
};

function redibujar()
{
    ctx.drawImage(fondo.imagen, 0, 0);
    for(var i=0; i < cantidad; i++){
        ctx.drawImage(manzana.imagen, posManzanas.MANZANASX[i], posManzanas.MANZANASY[i]);
    }
    for(var i=0; i < cantidad; i++){
        ctx.drawImage(naranja.imagen, posNaranjas.NARANJASX[i], posNaranjas.NARANJASY[i]);
    }
    for(var i=0; i < cantidad; i++){
        ctx.drawImage(cereza.imagen, posCerezas.CEREZASX[i], posCerezas.CEREZASY[i]);
    }
    for(var i=0; i < cantidad; i++){
        ctx.drawImage(pera.imagen, posPeras.PERASX[i], posPeras.PERASY[i]);
    }
    ctx.drawImage(cursor.imagen, cursor.x, cursor.y);
};

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

function moverCursor(evento)
{
    var movimiento = 25;
    switch(evento.keyCode)
    {
        case teclas.UP:
            cursor.y = cursor.y - movimiento;
            if (cursor.y < 25){
                cursor.y = cursor.y + movimiento;
            }
            redibujar();
            if (cursor.x == 300 && cursor.y == 25){
                if (confirm("Para ingresar a la Escuela de WEB DEVELOPMENT en Platzi: \nPRESIONE ACEPTAR")){
                open('https://platzi.com/web/',"_blank")
                }
            }
        break;
        case teclas.DOWN:
            cursor.y = cursor.y + movimiento;
            if (cursor.y > 275){
                cursor.y = cursor.y - movimiento;
            }
            redibujar();
            if (cursor.x == 300 && cursor.y == 275){
                if (confirm("Para ingresar a la Escuela de VIDEOGAMES en Platzi: \nPRESIONE ACEPTAR")){
                open('https://platzi.com/videojuegos/',"_blank")
                }
            }
        break;
        case teclas.LEFT:
            cursor.x = cursor.x - movimiento;
            if (cursor.x < 25){
                cursor.x = cursor.x + movimiento;
            }
            redibujar();
            if (cursor.x == 25 && cursor.y == 150){
                if (confirm("Para ingresar a la Escuela de ENGLISH en Platzi: \nPRESIONE ACEPTAR")){
                open('https://platzi.com/idioma-ingles/',"_blank")
                }
            }
        break;
        case teclas.RIGHT: 
            cursor.x = cursor.x + movimiento;
            if (cursor.x > 575){
                cursor.x = cursor.x - movimiento;
            }
            redibujar();
            if (cursor.x == 575 && cursor.y == 150){
                if (confirm("Para ingresar a la Escuela de CORE SKILLS en Platzi: \nPRESIONE ACEPTAR")){
                open('https://platzi.com/habilidades-blandas/',"_blank")
                }
            }
        break;
    }
}

Jorge Almaguer Sánchez

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

Screen Shot 2022-01-27 at 4.25.27 PM.png

Screen Shot 2022-01-27 at 4.26.50 PM.png

Screen Shot 2022-01-27 at 4.27.04 PM.png

Screen Shot 2022-01-27 at 4.27.16 PM.png

Screen Shot 2022-01-27 at 4.27.26 PM.png

Screen Shot 2022-01-27 at 4.28.32 PM.png

Screen Shot 2022-01-27 at 4.28.41 PM.png

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>

Abraham Misael Flores Castrejón

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

Gabriela Andreina García Uzcategui

hace 7 meses

Es 100% real cuando dicen que el 90% del tiempo te pasas leyendo el código y no escribiéndolo, pasé muchas horas, y no pude sola, lo logré gracias a la comunidad de compañeros, aunque a veces terminas más confundido por todas las mejoras que hacen en sus programas.

Para los que están empezando como yo, por aquí les dejo lo que pidió Freddy, espero les sirva.

HTML:

Y el JavaScript

Juan Esteban Salazar

¡Hola 😀!
Si tal vez alguien a estado teniendo problemas para realizar el movimiento del cerdito estos son algunos puntos que pueden tener en cuenta para esta tarea 😉

Primero naturalmente deben traer el codigo que se hizo anteriormente para poder que la pagina detecte cuando se levanta una tecla

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

document.addEventListener("keyup", moverCerdito)

Lo siguiente es que la pagina sepa cuales teclas se estan oprimiendo, esto tambien lo podemos hacer reciclando el codigo anterior con el switch; Todo esto claro dentro de la funcion que se dispara al oprimir cualquier tecla

switch (informacionEvento.keyCode) 
    {
        case teclasFlechas.UP:
            //Aqui es donde se mueve el cerdito hacia arriba
            break;
        case teclasFlechas.DOWN:
            //Aqui es donde se mueve el cerdito hacia abajo
            break;
        case teclasFlechas.LEFT:
            //Aqui es donde se mueve el cerdito hacia la izquierda
            break;
        case teclasFlechas.RIGHT:
            //Aqui es donde se mueve el cerdito hacia la derecha
            break;
    }

Lo que yo hice fue hacer que el cerdo aparezca siempre en la misma posicion y no en una aleatoria, ya que lo tome como si este fuera el personaje del jugador y la norma general es que este siempre aparece en una posicion concreta. Esto lo hice declarando las posiciones de los animales fuera de cualquier funcion para que este valor sea constante durante toda la ejecucion del codigo

//Establecer posicion inicial del cerdito
var xCerdo = 420;
var yCerdo = 20;

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

var xPollo = aleatorio(0, 420);
var yPollo = aleatorio(0, 420);

Ya sabiendo que la pagina detecta la accion de presionar teclas le vamos a dar la accion de que cada que se dispare el evento redibuje el cerdo en la posicion deseada. ¿Que tanto se movera el cerdo? Pues teniendo en cuenta que la imagen mide 80*80 hice que el movimiento fuera de ese tamaño. Ahora aqui aparece un problema que puede frenar todo el proceso

switch (informacionEvento.keyCode) 
    {
        case teclasFlechas.UP:
            papel.drawImage(cerdo.imagen, xCerdo, yCerdo - movimiento);
            yCerdo = yCerdo - movimiento;
            break;

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

Espero haya sido de utlidad 😉

Santiago Gómez