One weekend, I decided to try out developing some simple gaming loops on html 5. I am new to html-5 and JavaScript as well. This is my first project using either. There have been a lot of talk going on about html-5 being the next generation app platform. All mobile platforms including android, IOS and the upcoming windows 8 are featuring support of html-5 apps so does all the modern browsers on your pc.
To start with, get the background setup with the canvas element of html-5. To invoke canvas with required parameters and to check whether the browser supports canvas, try using
1: <canvas id="graphics" width="920" height="560" style="background-color: #A9A9A9;">
2: Canvas not supported! Update/Switch your browser!
3: </canvas>
Usually, the graphics component of the app is developed over <canvas>, but the logic is written using JavaScript. For music/sound components, <audio> can be used.
Here is the grid that’s designed as the background of the app we are going to develop.
The JS code for above:
1: function layout_grid()
2: {
3: cur_y = init_y;
4:
5: for(j=0;j<=maxPosY;j++)
6: {
7: for(i=0;i<=maxPosX;i++)
8: {
9: if((i+j)%2==0)
10: ctx.fillStyle = "#DEDEDE";
11: else
12: ctx.fillStyle = "#CDCDCD";
13: ctx.fillRect(init_x+i*width_x,cur_y,width_x,width_y);
14: }
15: cur_y = cur_y+width_y;
16: }
17: }
where
1: ctx = canvas.getContext("2d");
A control loop is usually written in following steps:
- detect the user input
- determine the next position/action
- update the graphics
- play sound/feedback
Say for a simple case of moving an agent through the grid, we can follow through the above steps. User input are the arrow keys- ‘up’, ‘down’, ‘left’ and ‘right’. Next position is calculated basing on the current position of the agent on the grid and current input. Then the canvas with the new position of the agent is updated.
1: function step()
2: {
3: var xdir=0;
4: var ydir=0;
5:
6: //detect user input
7: if ((37 in keys && keys[37]) || (65 in keys && keys[65])){ //left
8: xdir = -1;
9: }
10: if ((39 in keys && keys[39]) || (68 in keys && keys[68])){ //right
11: xdir = 1;
12: }
13: if ((38 in keys && keys[38]) || (87 in keys && keys[87])){ //up
14: ydir = -1;
15: }
16: if ((40 in keys && keys[40]) || (83 in keys && keys[83])){ //down
17: ydir = 1;
18: }
19:
20: //determine next position/action
21: calc_next_state(xdir,ydir);
22:
23: //update the canvas
24: ctx.clearRect(0, 0, canvas.width, canvas.height);
25: layout_grid();
26: ctx.drawImage(agent, init_x+agentPosX*width_x, init_y+agentPosY*width_y);
27: }
Using ‘a’,’s’,’d’,’f’ key combo in addition to the arrow keys.
ctx.clearRect() function clears the grid, otherwise it will show the previous position of the agent. Let’s skip to the outline of the JS code:
1: <script type="text/javascript">
2: const FPS = 10;
3:
4: //initialized variables and parameters
5: XXX
6: XXX
7:
8: //load agent image
9: var agent = new Image();
10: agent.src = "agent.gif";
11:
12: //intialize canvas object
13: var canvas = null;
14: var ctx = null;
15: var keys = new Array();
16:
17: //primary function on load
18: window.onload = init;
19: window.addEventListener('keydown',keyDown,true);
20: window.addEventListener('keyup',keyUp,true);
21:
22: function keyDown(evt){
23: keys[evt.keyCode] = true;
24: }
25: function keyUp(evt){
26: keys[evt.keyCode] = false;
27: }
28:
29: function init()
30: {
31: canvas = document.getElementById("graphics");
32: ctx = canvas.getContext("2d");
33: layout_grid();
34: setInterval(step, 1000 / FPS);
35: }
Note that function ‘init’ is the main function that is loaded initially. It initializes canvas context and draws the grid then calls the ‘step’ control loop. Now, here is the embedded output of this application. Simple movements up/down/left/right (or a/s/d/f) moves the agent through the grid restricted by the boundaries.
http://ablitz.com/testdir/new.html
Here goes few links for your reference:
http://simon.html5.org/dump/html5-canvas-cheat-sheet.html
http://www.script-tutorials.com/html5-game-development-lesson-1/
http://www.ibm.com/developerworks/web/library/wa-html5fundamentals/index.html?ca=drs-</P