Guided Chopper

HTML

CSS

JS

@keyframes spin {
  0% {transform:rotate(0deg);}
  50% {transform:rotate(180deg);}
  100% {transform:rotate(360deg);}
}
body {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#eee;
}
#cenario {
  position: absolute;
  left:0;
  top:0;
  width: 4000px;
  height: 4000px;
  background-color:#eee;
  z-index:1;
}
#chopper {
  position:absolute;
  background-color:#666;
  width: 20px;
  height:60px;
  z-index:2;
  top:50%;
  left:50%;
  border-radius: 10px;
}
#chopper:before, #chopper:after {
  content:" ";
  position:absolute;
  background-color: #300;
  height: 30px;
  width: 10px;
  border-radius:5px;
  top:15px;
  left:-10px;
}
#chopper:after {
  left: 20px;
}
#chopper .wings {
  background-color: #000;
  position:absolute;
  width: 10px;
  height: 100px;
  left:5px;
  top: -20px;
  z-index:3;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-duration: .5s;
  animation-timing-function: linear;
}
#chopper .wings:before {
  content:" ";
  background-color: #000;
  position:absolute;
  width: 100px;
  height: 10px;
  left:-45px;
  top: 45px;
}
#chopper .tail {
  background-color: #666;
  position:absolute;
  width: 10px;
  height: 60px;
  top: 50px;
  left: 5px;
  border-radius: 5px;
}
#chopper .tail:before {
  content:" ";
  background-color: #000;
  position:absolute;
  width: 20px;
  height: 10px;
  left:-5px;
  top: 50px;
}

var app = {};
app.KEYS = {UP:38, DOWN:40, RIGHT:39, LEFT:37};
app.game = (function(){
  var eventMap = {};
  function on(type, f){
    (eventMap[type] = (eventMap[type] || [])).push(f);
  }
  function off(type, f){
  }
  function trigger(type){
    var list = eventMap[type];
    if(list){
      for(var i=0, l=list.length; i<l; i++){
        list[i]();
      }
    }
  }
  setInterval(function(){trigger('loop');}, 15);
  function render(){
    trigger('render');
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
  return {
    on:on
  }
})();
app.vehicle = (function(){
  var toRad = Math.PI / 180;
  function Engine(){
    this.max = 5;
    this.speed = 0;
    this.move = 0;
    this.step = .25;
  }
  Engine.prototype = {
    run:function(){
      var speed = this.speed;
      if(this.move){
        speed += this.move * this.step;
      } else if(speed > 0) {
        speed -= this.step;
      } else if(speed < 0) {
        speed += this.step;
      }
      return this.speed = Math.max(-this.max, Math.min(speed, this.max));
    }
  }
  function Gear(){
    this.deg = 0;
    this.engine = new Engine();
  }
  Gear.prototype = {
    run:function(){
      this.deg = (this.deg + this.engine.run()) % 360;
      return this;
    },
    get radians(){
      return this.deg * toRad;
    },
    get i(){
      return Math.cos(this.radians);
    },
    get j(){
      return Math.sin(this.radians);
    }
  }
  function Vehicle(){
    this.engine = new Engine();
    this.gear = new Gear();
  }
  Vehicle.prototype = {
    run:function(){
      this.engine.run();
      this.gear.run();
      return this;
    },
    get x(){
      return this.engine.speed * this.gear.i;
    },
    get y(){
      return this.engine.speed * this.gear.j;
    }
  }
  return {
    Engine:Engine,
    Gear:Gear,
    Vehicle:Vehicle
  };
})();
app.chopper = (function(){
  var chopper = new app.vehicle.Vehicle()
  , $chopper = document.getElementById('chopper');
  chopper.left = 200;
  chopper.top = 200;
  chopper.engine.max = 20;
  app.game.on('loop', function(){
    chopper.run();
    chopper.left += chopper.x;
    chopper.top += chopper.y;
  });
  app.game.on('render', function(){
    $chopper.style.left = chopper.left + 'px';
    $chopper.style.top = chopper.top + 'px';
    $chopper.style.transform = 'rotate('+(chopper.gear.deg + 90)+'deg)';
  });
  document.body.addEventListener('keydown', function(e){
    switch(e.keyCode){
      case app.KEYS.UP : return chopper.engine.move = 1;
      case app.KEYS.DOWN : return chopper.engine.move = -1;
      case app.KEYS.LEFT : return chopper.gear.engine.move = -1;
      case app.KEYS.RIGHT: return chopper.gear.engine.move = 1;
    }
  });
  document.body.addEventListener('keyup', function(e){
    switch(e.keyCode){
      case app.KEYS.UP : return chopper.engine.move = 0;
      case app.KEYS.DOWN : return chopper.engine.move = 0;
      case app.KEYS.LEFT : return chopper.gear.engine.move = 0;
      case app.KEYS.RIGHT: return chopper.gear.engine.move = 0;
    }
  });
})();

Ad #1

Ad #2