HTML5 game programming step by step: March 2013

Saturday, March 30, 2013

HTML5 Copperbar example

This code below as a html file draws a copperbar in the canvas. A copperbar is a Rainbow like drawing that can be used as a background for games. The for loop i var is used to create the colors.

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="320" height="240" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    gameloop=setInterval(doGameLoop,16);
    function doGameLoop(){
        for(var i=0;i<c.height;i++){
            ctx.fillStyle="rgb("+i+",0,0)";
            ctx.fillRect(0,i,c.width,i);
        }
    }
</script></body></html>

Sunday, March 10, 2013

HTML5 Player moving and jumping example

Below is the sourcecode for a example where a rectangle can be moved with the cursor left and right and jumped with the space bar.

<!DOCTYPE=html>
<html><body>
<canvas id="myCanvas" width="320" height="240" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 var px=c.width/2;
 var py=c.height/2;
 var pw=16;
 var ph=16;
 var pm=0.0;
 var pMoveLeft=false;
 var pMoveRight=false;
 gameloop=setInterval(doGameLoop,16);
 window.addEventListener("keydown",kd,true);
 window.addEventListener("keyup",ku,true);
 function doGameLoop(){
  ctx.clearRect(0,0,c.width,c.height);
  ctx.fillText("Use arrow keys to move and space to jump.",10,10);
  ctx.fillRect(px,py,pw,ph);
  playerGravity();
  playerMovement();
 }
 function playerGravity(){
  if(!pm==0){
   py-=pm;
   pm-=0.1;
  }
  if(pm<-4){
   pm=0;
   py=c.height/2;
  }
 }
 function playerMovement(){
  if(pMoveLeft==true){
   if(px>0) px-=1;
  }
  if(pMoveRight==true){
   if(px<c.width-pw) px+=1;
  }
 }
 function kd(evt){
  if(evt.keyCode==37) pMoveLeft=true;
  if(evt.keyCode==39) pMoveRight=true;
  if(evt.keyCode==32){
   if(pm==0) pm=4;
  }
 }
 function ku(evt){
  if(evt.keyCode==37) pMoveLeft=false;
  if(evt.keyCode==39) pMoveRight=false;
 }
</script></body></html>

Saturday, March 9, 2013

HTML5 2d starfield example.

Below is the sourcecode of a 2d starfield in html5 javascript language. There are a 100 stars in the example. Each star is a rectangle. The canvas color is black and the stars are white.

<!DOCTYPE=html>
<html><body>
<canvas id="myCanvas" width="320" height="240" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var sx = new Array(100);
    var sy = new Array(100);
    var ss = new Array(100);
    
    for(i=0;i<sx.length;i++){
        sx[i]=Math.round(Math.random()*c.width);
        sy[i]=Math.round(Math.random()*c.height);
        ss[i]=Math.round(Math.random()*3+1);
    }
    
    gameloop=setInterval(doGameLoop,16);
    function doGameLoop(){
        ctx.fillStyle="black";
        ctx.fillRect(0,0,c.width,c.height);
        // Draw the stars.
        ctx.fillStyle="white";
        for(i=0;i<sx.length;i++){
            ctx.fillRect(sx[i],sy[i],2,2);
        }
        // Update the stars position.
        for(i=0;i<sx.length;i++){
            sx[i]-=ss[i];
            if(sx[i]<0) sx[i]=c.width;
        }
    }
    
</script></body></html>

HTML5 Bouncing rectangle example

Below is a example on how to bounce a rectangle on the canvas. A small rectangle is drawn every 16 milliseconds on the screen and gravity is applied.

<!DOCTYPE=html>
<html><body>
<canvas id="myCanvas" width="320" height="240" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var rx = c.width/2;
    var ry = c.height/2;
    var rw = 16;
    var rh = 16;
    var rm = 5;
    gameloop=setInterval(doGameLoop,16);
    function doGameLoop(){
        ctx.clearRect(0,0,c.width,c.height);
        ctx.fillRect(rx,ry,rw,rh);
        
        // Update the y position
        ry -= rm;
        
        // Decrease the modifier by a value.
        rm -=.1
        
        // If the rect is back to the original position 
        // then set the modifier to 5 again and set
        // the y position back to its start position.
        if(rm < -5){
            rm = 5;
            ry = c.height/2;
        }
        
    }
</script></body></html>

Tuesday, March 5, 2013

HTML5 - Moving a rectangle with the cursor keys.

Below is a html file that has a canvas in it. In this canvas a rectangle is drawn. If you press the cursor keys it will move. It can not get outside of the canvas.

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="320" height="240" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var message="Use cursor keys to move rectangle.";
    var rx=c.width/2;
    var ry=c.height/2;
    var rw=16;
    var rh=16;
    var moveLeft=false;
    var moveRight=false;
    var moveUp=false;
    var moveDown=false;
    gameloop=setInterval(doGameLoop,16);
    window.addEventListener("keydown",kd,true);
    window.addEventListener("keyup",ku,true);
    function doGameLoop(){
        ctx.clearRect(0,0,c.width,c.height);
        ctx.fillText(message,10,10);
        ctx.fillRect(rx,ry,rw,rh);
        updateplayer();
    }
    // Key down function.
    function kd(evt){
        if(evt.keyCode==37) moveLeft=true;
        if(evt.keyCode==39) moveRight=true;
        if(evt.keyCode==38) moveUp=true;
        if(evt.keyCode==40) moveDown=true;        
    }
    // Key up function
    function ku(evt){
        if(evt.keyCode==37) moveLeft=false;
        if(evt.keyCode==39) moveRight=false;
        if(evt.keyCode==38) moveUp=false;
        if(evt.keyCode==40) moveDown=false;
    }
    function updateplayer(){
        if(moveLeft==true){
            if(rx>0){
            rx--;
            }
        }
        if(moveRight==true){
            if(rx<(c.width-rw)){
            rx++;
            }
        }
        if(moveUp==true){
            if(ry>0){
            ry--;
            }
        }
        if(moveDown==true){
            if(ry<(c.height-rh)){
            ry++;
            }
        }
    }
</script></body></html>

Saturday, March 2, 2013

HTML5 rectsoverlap example.

The code below show a rectangle on the mouse coordinates and a rectangle on the screen. When you move the rectangle on the other rectangle a message is shown on the canvas. Rectangle overlap collision is a important collision for games. You need it for platformer games and such.

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="150" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 var mx=0;
 var my=0;
 var col="No collision";
 gameloop = setInterval(doGameLoop,16);
 window.addEventListener("mousemove",mm,true);
 function doGameLoop(){
  ctx.clearRect(0,0,c.width,c.height);
  ctx.fillText("mx:"+mx+" my:"+my,10,10);   
  ctx.fillRect(mx,my,20,20);
  ctx.fillRect(100,100,20,20);
  ctx.fillText(col,10,20);
  col="No collision";
  if(rectsoverlap(mx,my,20,20,100,100,20,20)==true){
    col="Collision";
  }
 }
 function mm(evt){
  var rect = c.getBoundingClientRect();
  mx = evt.clientX - rect.left;
  my = evt.clientY - rect.top;
 }
 function rectsoverlap(r1x1,r1y1,r1w,r1h,r2x1,r2y1,r2w,r2h){
  var r1x2 = r1x1+r1w;
  var r1y2 = r1y1+r1h;
  var r2x2 = r2x1+r2w;
  var r2y2 = r2y1+r2h;
 
  return (r1x1 < r2x2 && r1x2 > r2x1 && r1y1 < r2y2 && r1y2 > r2y1);

 }

</script></body></html>

HTML5 mousemove example (get the mouse coordinates)

The code below shows how to get the mouse coordinates. The code is a complete html file that runs in a browser.

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="150" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 var mx=0;
 var my=0;
 gameloop = setInterval(doGameLoop,16);
 window.addEventListener("mousemove",mm,true);
 function doGameLoop(){
  ctx.clearRect(0,0,c.width,c.height);
  ctx.fillText("mx:"+mx+" my:"+my,10,10);   
 }
 function mm(evt){
  var rect = c.getBoundingClientRect();
  mx = evt.clientX - rect.left;
  my = evt.clientY - rect.top;
 }

</script></body></html>

HTML5 mousedown and mouseup example.

The code below shows how a mouseup and mousedown event is handled. The code is a html file that can be run from a browser. The code worked in ie9.

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="150" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 var m="Left Mouse is not pressed";
 gameloop = setInterval(doGameLoop,16);
 window.addEventListener("mousedown",md,true);
 window.addEventListener("mouseup",mu,true);

 function doGameLoop(){
  ctx.clearRect(0,0,c.width,c.height);
  ctx.fillText(m,10,10);   
 }
 function md(evt){
  if(evt.which==1){
   m="left mouse is being pressed.";
  }
 }
 function mu(evt){
  if(evt.which==1){
   m="No mouse is pressed.";
  }
 }
</script></body></html>


<!DOCTYPE = html>
<html><body>

html5 mousedown example

Below is the code that checks when the left mouse button is pressed. A message is shown on the screen when is is down. It should be simple enough to see how other mouse buttons are done.

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="150" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 var m="Left Mouse is not pressed";
 gameloop = setInterval(doGameLoop,16);
 window.addEventListener("mousedown",mp,true);
 function doGameLoop(){
  ctx.clearRect(0,0,c.width,c.height);
  ctx.fillText(m,10,10);   
 }
 function mp(evt){
  if(evt.which==1){
   m="left mouse was pressed";
  }
 }

</script></body></html>

Keydown keyup example

Below is the code to test when a keydown and keyup code are triggered. The canvas shows a message when the left arrow key is pressed and then it is not pressed.

You need to know when a key is pressed when a character is to be moved on the screen. Just copy and paste the code into a empty file and save it as a htm file. Then double click on it to see it in action. This code has been tested in ie9.

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 var test="Left arrow key is not pressed.";
 gameloop=setInterval(doGameLoop,16);
 window.addEventListener("keydown",kd,true);
 window.addEventListener("keyup",ku,true);
 function doGameLoop(){
  ctx.clearRect(0,0,c.width,c.height);
  ctx.fillText(test,10,10);
 }
 function kd(evt){
  if(evt.keyCode==37){
   test="Left arrow key is pressed.";
  }
 }
 function ku(evt){
  if(evt.keyCode==37){
   test="Left arrow key is not pressed.";
  }
 }
</script></body></html>

I have been interested in html5 game programming for a few years now. I have been reading about it and got a book about javascript as a present. The book is a reference book by o'reilly. A few days ago I got the book html5 pro games as a present. In this book you can learn to program a rts game.

I had another blog. This blog was about java game programming. I stopped updating this blog when the applets stopped working. I think google sites changed or something else happened. The blog gets about 10.000 views a year.

I have been memorising html5 code for the last few days. I created a couple of example programs that I will be posting on this blog.

I have been programming since the early 1990's. I will be posting simple game examples on this blog. Mostly platform game examples and strategy game examples/ I will also make a couple of other genre game examples.

I hope to learn to program in html5 while having this blog.