Demo
First lets play the game that we shall be making in this tutorial. Its called Fruit Hunter. Tested on Chrome and Firefox.
Click in the game then start using the arrow keys to control the monkey. Press the left, right and up arrow keys to make the monkey move and jump. Do not fall off the stands and try to collect as many apples as possible. More apples you collect, more the points.
Go full screen if having troubles with the iframe.
That is a simple game and in this tutorial we shall learn how to make it. Its made in less than 500 lines of code. Uses box2d and jquery.
Pre-requisites
You should already be knowing how to write object oriented code in javascript and handle closures. Some basic knowledge of 2d graphs and geometry is also required.
Theory
Html5 and canvas
This is a browser based game that does not use other things like flash. It is code purely in javascript and draws the elements on the canvas element. The canvas element allows to draw things pixel by pixel making it possible to draw any kind of shapes etc. It also have functions to draw images, scale them etc.
Box2d World
Box2d is used to create a simulated...
Read full post here
Make a simple html5 game with box2d in javascript – tutorial
First lets play the game that we shall be making in this tutorial. Its called Fruit Hunter. Tested on Chrome and Firefox.
Click in the game then start using the arrow keys to control the monkey. Press the left, right and up arrow keys to make the monkey move and jump. Do not fall off the stands and try to collect as many apples as possible. More apples you collect, more the points.
Go full screen if having troubles with the iframe.
That is a simple game and in this tutorial we shall learn how to make it. Its made in less than 500 lines of code. Uses box2d and jquery.
Pre-requisites
You should already be knowing how to write object oriented code in javascript and handle closures. Some basic knowledge of 2d graphs and geometry is also required.
Theory
Html5 and canvas
This is a browser based game that does not use other things like flash. It is code purely in javascript and draws the elements on the canvas element. The canvas element allows to draw things pixel by pixel making it possible to draw any kind of shapes etc. It also have functions to draw images, scale them etc.
Box2d World
Box2d is used to create a simulated...
Read full post here
Make a simple html5 game with box2d in javascript – tutorial