open in new window | flash version

Demos : Keyboard Events

Code:

<html>
<head>
     <script type="text/javascript" src="http://lib.ivank.net/ivank.js"></script>
     <script type="text/javascript">

          var stage, car, angle = 0, speed = 0;
          var l, r, u, d;
          
          function Start()
          {
               stage = new Stage("c");
               
               // background
               var s = new Sprite();
               s.graphics.beginBitmapFill(new BitmapData("asphalt.jpg"));
               s.graphics.drawRect(0,0,stage.stageWidth, stage.stageHeight);
               stage.addChild(s);
               
               // car			
               car = new Sprite(); 
               car.x = stage.stageWidth/2;
               car.y = stage.stageHeight/2;
               var cb = new Bitmap(new BitmapData("car.png"));
               cb.x = -123; cb.y = -50; car.addChild(cb);
               stage.addChild(car);
               
               // events
               stage.addEventListener(KeyboardEvent.KEY_DOWN, onKD);
               stage.addEventListener(KeyboardEvent.KEY_UP  , onKU);
               stage.addEventListener(Event.ENTER_FRAME     , onEF);
          }
          
          function onKD (e)
          { 
               console.log(e.keyCode);
               if(e.keyCode == 37) l = true;
               if(e.keyCode == 38) u = true;
               if(e.keyCode == 39) r = true;
               if(e.keyCode == 40) d = true;
          }
          
          function onKU (e)
          {
               if(e.keyCode == 37) l = false;
               if(e.keyCode == 38) u = false;
               if(e.keyCode == 39) r = false;
               if(e.keyCode == 40) d = false;
          }
          
          function onEF (e)
          {
               speed *= 0.9;
               if(u) speed += 1+speed*0.06;
               if(d) speed -= 1;
               
               if(r) angle += speed * 0.003;
               if(l) angle -= speed * 0.003;
                    
               car.rotation = angle*180/Math.PI;
               car.x += Math.cos(angle) * speed;
               car.y += Math.sin(angle) * speed;
          }
     </script>
</head>
<body onload="Start();"><canvas id="c"></canvas></body>
</html>