In this article we will discuss how to develop a very simple game using HTML5 canvas Api. Its a pretty basic introduction and we are not going to digg more into the details. As HTML5 is the future of the web and all web developers should essentially start learning it, I think canvas is the best place to start with, because its having more fun and ofcourse, its incredible.Canvas api is the most important part of HTML5 specification. We can expect it to replace the Flash in the near future. Adobe® decided to leverage the animation capabilities of canvas api, by introducing Adobe Edge, which is a visual motion and interaction design tool. If you havn't taken a look into, its worth checking it. Also if you are brand new to HTML5, its worth going through this presentation, before moving on.All animation will have three essential steps.
- Drawing objects
- Collision detection
- Update objects state
We will be calling this three steps over and over again to get the animation effect. Before we start implementing the game, we must get the 2d rendering conext of the canvas.1. Drawing objectsIn this step, we will draw the canvas and objects. For drawing canvas, what we are doing is, clear the canvas using ctx.clearRect(). Then we will draw the objects based on their current state. In our case we need to draw the ball and the vertical bar in the bottom. Here we use ctx.arc(), function to draw the circle. We can use a shiny image of ball to make it more attractive.2. Collision detectionOnce we draw the objects we need to check for collision of objects. the logic I have implemented here is pretty basic and not quite accurate (will fall for few pixels :) ).3. Update Object stateTo update the objects state, we need to listen to user activities on keyboard or mouse. Here we need to move the bar in the bottom when user presses right/left keys. For this we use addEventListener function to listen to keyboard activities and will set the direction accordingly. At the same time, we also need to check if the ball hits any of the borders of the canvas. If yes, it need to change the direction of ball too.Once we write these functions,and will call them in particular interval to get the animation effect.Here we are using window.setInterval function for animation. Though this function is not really intented for animation purpose, it is the most widely used one. Browser venders decided to have another funciton, requestAnimationFrame, specifically for animation purpose, so that we can have much better performance. Unfortunately it is not supported by many browsers. To know more about this follow this article by Paul Irish.Now our game is almost ready and we can start playing. We can make this game more attractive by using images in the background and sprites for drawing balls. Though thats not so hard to do, I left them to your enthusiasm. See the full source code on Github.Click start to play the game here.
Don't stop..!! There is more . There are a number of libraries that is much helpful in developing html5 games. I will give links to some of them DIVE INTO HTML5, is a good introduction to html5.CraftyLimeJSRaphaëlPaper.js Is another useful library.And there is lot more, keep exploring. :)