RSS

HTML5 and javascript Key Events

15 Jun
<script type="text/javascript">

document.onkeydown = function(event) {
     var key_pressed; 
     if(event == null){
          key_pressed = window.event.keyCode; 
     }
     else {
          key_pressed = event.keyCode; 
     }
     switch(key_pressed){
          case 37:
               left=true;
               break; 
          case 38:
               up=true;
               break; 
          case 39:
               right=true;
               break;
          case 40:
               down=true;
               break; 
     } 
}

document.onkeyup = function(event) {
     var key_pressed; 
     if(event == null){
          key_pressed = window.event.keyCode; 
     }
     else {
          key_pressed = event.keyCode; 
     }
     switch(key_pressed){
          case 37:
               left=false;
               break; 
          case 38:
               up=false;
               break; 
          case 39:
               right=false;
               break;
          case 40:
               down=false;
               break; 
     } 
}

var context;
var x_speed=0;
var y_speed=0;
var y=250;
var x=250;
var left=false;
var right=false;
var up=false;
var down=false;
var friction=0.95;

function on_enter_frame(){
     if(left){
          x_speed--;
     }
     if(right){
          x_speed++;
     }
     if(up){
          y_speed--;
     }
     if(down){
          y_speed++;
     }
	context=game_area.getContext('2d');
	context.clearRect(0,0,500,500);
	context.beginPath();
	context.fillStyle="#000000";
	context.arc(x,y,30,0,Math.PI*2,true);
	context.closePath();
	context.fill();
	x+=x_speed;
	y+=y_speed;
	x_speed*=0.98;
	y_speed*=0.98;
}

setInterval(on_enter_frame,30);

</script>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#game_area{
     background-color:#f5f5f5;
     border:1px solid #e5e5e5;
}
</style>
</head>
<body>
     <canvas id="game_area" width="500" height="500"></canvas>
</body>
</html>
Advertisements
 
Leave a comment

Posted by on June 15, 2011 in HTML 5

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: