Hola que tal, tengo una pregunta y un aporte: <ol> <li> PREGUNTA: ¿como puedo hacer que el lobo solo apareca una sola vez y deje una cami...

Hola que tal, tengo una pregunta y un aporte:

1. PREGUNTA: ¿como puedo hacer que el lobo solo apareca una sola vez y deje una camino de imagenes de lobos? (de antemano agradezco su ayuda).
2. APORTE: pude hacer que al momento llegar un borde la imagen del lobo pudiera aparecer del borde contrario (el lobo lo tome como referencia de otro aporte).

Este es mi codigo:

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

var fondo = {
  url: "tile_1.png",
  cargaOk: false
};
var vaca = {
  url: "vaca_1.png",
  cargaOk: false
};
var pollo = {
  url: "pollo_1.png",
  cargaOk: false
};
var cerdo = {
  url: "cerdo_1.png",
  cargaOk: false
};
var lobo = {
  url: "lobo.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.cargaOk = true;
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);

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

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 cargarLobo()
{
  lobo.cargaOk = true;
  dibujarCaminante();
};

var cantidad = aleatorio(10, 20);

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,4);
      var y = aleatorio(0,4);
      var x = x * 120;
      var y = y * 120;
      papel.drawImage(vaca.imagen, x, y);
    }
  }
  if(pollo.cargaOk)
  {
    for(var v=0; v < cantidad; v++)
    {
      var x = aleatorio(0,4);
      var y = aleatorio(0,4);
      var x = x * 120;
      var y = y * 120;
      papel.drawImage(pollo.imagen, x, y)
    }
  }
  if(cerdo.cargaOk)
  {
    for(var v=0; v < cantidad; v++)
    {
      var x = aleatorio(0,4);
      var y = aleatorio(0,4);
      var x = x * 120;
      var y = y * 120;
      papel.drawImage(cerdo.imagen, x, y)
    }
  }
}

var xLobo = 60;
var yLobo = 60;
function dibujarCaminante()
{
  if(lobo.cargaOk)
  {
    papel.drawImage(lobo.imagen, xLobo, yLobo);
  }
}


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

document.addEventListener("keydown", loboCaminando);

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

function loboCaminando(evento)
{
  if (xLobo < -20)
  {
    xLobo = 460;
    dibujarCaminante();
  }
  if (xLobo > 460)
  {
    xLobo = -11;
    dibujarCaminante();
  }
  if (yLobo < -21)
  {
    yLobo = 440;
    dibujarCaminante();
  }
  if (yLobo > 440)
  {
    yLobo = -21;
    dibujarCaminante();
  }

  else (yLobo > -10)
  {
    var movimiento = 10;
    switch (evento.keyCode)
    {
      case teclas.UP:
        yLobo = yLobo - movimiento;
        dibujarCaminante();
      break;

      case teclas.DOWN:
        yLobo = yLobo + movimiento;
        dibujarCaminante();
      break;

      case teclas.LEFT:
        xLobo = xLobo - movimiento;
        dibujarCaminante();
      break;

      case teclas.RIGHT:
        xLobo = xLobo + movimiento;
        dibujarCaminante();
      break;
    }
  }
}