RSS

HTML 5 Game Development

08 Jun

<script type=”text/javascript”>
// copy paste this code in html page and run..enjoy

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 8, 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: