Ejemplo eventos del teclado

código HTML:

<div id="ecenario"><div id="pollito"></div></div>

código CSS:

#ecenario {
    width: 100%;
    min-width: 500px;
    height: 180px;
    background: #6FD9FF;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #6FD9FF, #289FCB);
    background-image: -ms-linear-gradient(top, #6FD9FF, #289FCB);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6FD9FF), to(#289FCB));
    background-image: -webkit-linear-gradient(top, #6FD9FF, #289FCB);
    background-image: -o-linear-gradient(top, #6FD9FF, #289FCB);
    background-image: linear-gradient(top, #6FD9FF, #289FCB);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6FD9FF', endColorstr='#289FCB',GradientType=0 );
    border-bottom: 25px solid #208A00;
}
#pollito {
    position: absolute;
    margin-left: 400px;
    margin-top: 70px;
    background: URL('pollito.png') no-repeat;
    width: 161px;
    height: 134px;
}

Código jQuery::

$pollito = $("#pollito");
$ecenario = $("#ecenario");
pos_x = 400;

$('body').keydown(function(event) {
    switch(event.which) {
    case 39:
      $pollito.css("background-position", "0 0");
      if(pos_x < ($ecenario.width() - $pollito.width()) ) {
        pos_x += 10;
        $pollito.css("margin-left", pos_x + "px");
        }
      break;
    case 37:
      $pollito.css("background-position", "-161px 0");
      if(pos_x>0) {
        pos_x -= 10;
        $pollito.css("margin-left", pos_x + "px");
        }
      break;
    default:
        console.log('Tecla: '+ event.which);
    }
});

Resultado

Utilice las feclas de su teclado para darle animación al pollito :

Con especial agredecimiento a: