Tech Blur http://ablitz.com/tech-hacks Mon, 26 Sep 2011 06:26:40 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 HTML-5 Canvas Element, Part-I http://ablitz.com/tech-hacks/html-5-canvas-element-part-i/ http://ablitz.com/tech-hacks/html-5-canvas-element-part-i/#comments Mon, 26 Sep 2011 03:00:12 +0000 admin http://ablitz.com/tech-hacks/html-5-canvas-element-part-i-2/ 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.

grid

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:

  1. detect the user input
  2. determine the next position/action
  3. update the graphics
  4. 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

]]> http://ablitz.com/tech-hacks/html-5-canvas-element-part-i/feed/ 0