Archive for February, 2014

Basic JS Canvas 2D Game Programming : Game Loop, Draw, Physic and Key Input

Published on Feb 23, 2014 by galawana

On this post I will show you what we can get with canvas and a little javascript code. I will try to implement game loop, game draw,  simple 2D physic, and key input method with this little demo of bouncing ball. on this simple tutorial we using keymaster.js simple micro-library for defining and dispatching keyboard shortcuts in our little project.

Useful Link

Project Files >> Download Here

Game Demo >> See Here

#1 Build your HTML code with canvas tags in it.

First we must create our html file with canvas tags in it, here is our html file example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>BASIC Canvas Game Part 1</title>
//we need to load keymaster micro library here
<script src="keymaster.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
//Javascript Code goes here
</script>
</head>
<body>
<canvas id="canvas" width="800" height="600" />
<p>Use Arrow Keys to add movement to the ball</p>
</body>
</html>

(more…)

read more