Kids

Can

JavaScript

<-----Back        Next --->

Grid on the Canvas


Arcade games usually use a Grid to display all elements in the correct position on the canvas.
A Grid is a 2 dimensional Array, that divides the canvas into columns and rows of tiles. For instance the Pacman game below has Grid called "maze". Each position in the maze[x][y] holds tile-information: Empty-, Wall-, smallPill- or a bigPill- String. The redraw(x,y) function draws the tiles on the canvas, in the correct position:( x* tileWidth, y * tileHeight )

example1:

How to make a Grid

Let's make a smaller Grid example with gridWidth=4 and gridHeight=4;



A double for-loop is used to make a 2-dimensional Array (A big Array, with little Arrays in it). The first for-loop creates little new arrays and puts them inside the big Array as its elements. The second for-loop fills all of the little arrays with String-elements: 'sky'.

 var 
 grid 
 = 
 new 
 Array() 
 ; 


 for ( 
 var x=0 ; x < gridWidth ; x++; 
 ) { 
 grid[x] =  
 new Array() ; 


 for ( 
 var y = 0; y < gridHeight; y++ ;  
 ) { 
 grid[x][y]  
 = 
 'sky' 
 ; 
 } 


 } 


How to make a Grid......... .... "TryoutPanel1"
<script> var tileSize=50; // change tileSize, var gridWidth=4; // the gridWidth and var gridHeight=4; // gridHeight var grid = new Array() ; for ( var x=0 ; x < gridWidth ; x++ ) { grid[x] = new Array() ; for ( var y = 0; y < gridHeight; y++ ) { grid[x][y] = 'sky' ; } } //////////// DRAW //////////////////////////////////////////// function draw(x,y){ // draw tile in grid position(x,y) canvas =document.getElementById("canvas"); context=canvas.getContext('2d'); context.fillStyle="lightBlue"; context.fillRect(x * tileSize , y * tileSize, tileSize , tileSize); context.strokeRect(x * tileSize , y * tileSize, tileSize , tileSize); // we just stroke the rect here to show the tiles } ///////// DRAW ALL ///////////////////////////////// function drawAll(){ /// draw all the tiles for (var x=0;x<grid.length;x++){ for(var y=0;y<grid[x].length;y++){ draw(x,y); } } } drawAll(); </script> <canvas width="300" height="300" id="canvas" ></canvas> <p>Play with the Grid: change <b>gridHeight</b>, <b>gridHeight</b>, <b>tileSize</b> <br> </p>



This is a Duck Shooting game, that is made with a grid.
It's too easy though because the ducks don't fly away.
On this page you will learn to make your own duckShooting Game
And how to make it a lot more exciting, with Ducks that fly away, shoot back, obstacles...anything you want

example3:






Draw the Grid

The draw(x,y) function draws the tile of column x and row y on the right place on the canvas.
It grabs the the rigth element from the grid: grid[x][y].

 function 
 draw ( 
 x 
 , 
 y 
 ) { 


 if ( 
 grid[ 
 x 
 ][ 
 y 
 ] 
 == 'sky' 
 ) { 
 context.fillStyle 
 = 
 "lightBlue" ; 
 } 


 else if( 
 grid[ 
 x 
 ][ 
 y 
 ] 
 =='grass' 
 ){ 
 context.fillStyle 
 = 
 "green"; 
 } 


 context.fillRect( 
 x *  
 tileSize 
 , 
 y *  
 tileSize 
 , 
 tileSize  
 , 
 tileSize 
 ) ; 
 } 

In the duckShooting Game above there are some grid elements with 'sky' and some with 'grass'.
If and Else statements tell what to draw in each case.




Draw your own Grid Setting......... .... "TryoutPanel2"
<script> var tileSize=40; // tileSize, var gridWidth=10; // gridWidth var gridHeight=10; // gridHeight ///////////// MAKE THE GRID ///////////////////////////////////// var grid = new Array() ; for ( var x=0 ; x < gridWidth ; x++ ) { grid[x] = new Array() ; for ( var y = 0; y < gridHeight; y++ ) { grid[x][y] = 'sky' ; } } for (var x=0 ; x < gridWidth ; x++ ){ grid[x][gridHeight-1] ='grass';} // bottom row is 'grass' //...............add in more other things like grid[5][9]='fence' //////////// DRAW //////////////////////////////////////////// function draw(x,y){ // draw tile in grid position(x,y) canvas =document.getElementById("canvas"); context=canvas.getContext('2d'); context.fillStyle="black"; if(grid[x][y]=='sky'){ // if grid position is sky context.fillStyle="lightBlue"; // color blue } //......add an else if statement to make the 'grass' tiles green. //....... add other things like 'fence' 'stairs' etc. (make sure to add them in Grid) context.fillRect(x * tileSize , y * tileSize, tileSize , tileSize); context.strokeRect(x * tileSize , y * tileSize, tileSize , tileSize); // comment out this line to remove lines } ///////// DRAW ALL ///////////////////////////////// function drawAll(){ // draws all tiles for (var x=0;x<gridWidth;x++){ for(var y=0;y<gridHeight;y++){ draw(x,y); } } } drawAll(); </script> <h4>Create your own Grid setting</h4> <canvas width="400" height="400" id="canvas" ></canvas> <p>Some tiles are <b> 'sky'</b>. Some tiles are <b>'grass'</b>. <ul> <li>Add an <b>else if</b> statement in the <b>draw()</b> function to color the grass <b>green</b>(34).</li> <li>Add other things like <b>'fence', 'stairs'</b>.(18,36) </p>




Insert Characters in the Grid

example1:

Now you need to place your Characters(Object) in the grid. Let's start with Hunter. Just create an Hunter Constructer like you normally do. Only the x and y coords, are now tile positions on the grid, not pixels on the Canvas. In the this.draw() function, you make sure that Hunter (Object) fits exactly on top of 1 tile.


 this.draw 
 = 
 function ( ) { 


 context.drawImage( 
 huntImg 
 , 
 this.x *  
 tileSize 
 , 
 this.y *  
 tileSize 
 , 
 tileSize  
 , 
 tileSize 
 ) ; 
 } 

To move Hunter:

  • redraw the tile where Hunter sits(to erase him)
  • move Hunter by 1 tile.
  • Then draw Hunter in his new position
  •  function 
     keysFunction(){ 
     var 
     code 
     = 
     event 
     . 
     keyCode 
     ; 


     if ( 
     code==39 
     ){ 
     draw( 
     hunter 
     .x 
     , 
     hunter 
     .y 
     ) ; 


     hunter 
     .x ++ ; 


     hunter 
     .draw() 
     } 
     } 

    Moving Animating Characters like Duck, goes exactly the same.
    Look at a piece of the Duck's this.die() function(when he falls down).

     this.die 
     = 
     function(){ 


     if ( 
     this 
     .y  
     <gridHeight 
     ){ 
     draw( 
     this 
     .x 
     , 
     this 
     .y 
     ) ; 


     this 
     .y ++ ; 


     this 
     .draw() 
     } 
     } 

    Add a Character to the Grid ......... .... "TryoutPanel3"
    <script> var grid= new Array(); var gridWidth=10; var gridHeight=10; var tileSize=40; var canvas; var context; var hunter; // global variables var huntImg= new Image(); //create HUNTER image huntImg.src="/pics/hunty.gif" ////////////// CREATE SETTING ////////////////////////////////// function createSetting(){ // create grid and characters canvas=document.getElementById("canvas"); context =canvas.getContext('2d'); var x; // make 2-dimensional grid for (x=0; x<gridWidth; x++){ grid[x]=new Array(); var y; for(y=0;y<gridHeight;y++){ grid[x][y]='sky'; // whole grid is filled with SKY } } var X,Y; for(X=0;X<gridWidth;X++){ // draw the WHOLE GRID for(Y=0;Y<gridHeight;Y++){ drawTile(X,Y); } } hunter=new Hunter(5,9); // make the HUNTER hunter.draw(); // draw him } /////////////////// DRAW TILE //////////////////////////////////////////// function drawTile(x,y){ // DRAWTILE function to draw individual TILES if(grid[x][y]=='sky'){ // pieces of SKY context.fillStyle='lightBlue'; context.fillRect(x*tileSize,y*tileSize,tileSize,tileSize); } } //////////////// HUNTER /////////////////////////////////////////////// function Hunter(x,y){ // HUNTER constructor this.x=x; this.y=y; this.animate; this.draw= function(x,y){ // HUNTER DRAW function //......... draw the Hunter on top of a tile context.drawImage(img,x,y,width,height) } } ////////////// MOVE HUNTER KEYS FUNCTION /////////////////////////////////// function moveHunter(event){ // Move HUNTER var code= event.keyCode; switch(code){ case 37: // LEFT if(hunter.x-1>=0){ // check if hunter stays inside canvas drawTile(hunter.x,hunter.y); // erase Hunter hunter.x--; // hunter shifts 1 tile to the left hunter.draw(); // redraw hunter } break; case 39: // RIGHT //.............move Hunter 1 tile to the right. Use LEFT-example(82) break; } } ////////////////////////////////////////START////////////////////////////// setTimeout(createSetting,200); </script> <p id="p" style="height:30px;font-size:18px">Add Hunter to the grid</p> <canvas id="canvas" height="400" width="400" tabindex="0" onkeydown="moveHunter(event)" style="border:1px solid blue"></canvas> <ul> <li>Write the this.draw function for Hunter(68)</li> <li>Move Hunter with right-key (91)</li> </ul>



    Lets Shoot Some Ducks

    That's everything you need to know about a Grid game with moving characters.
    The Duckshooting Game in the Tryout Panel below is a bit boring. Make it more interesting with obstacles, flying or egg-dropping Ducks.


    Make a Duck Shooting game ......... .... "TryoutPanel4"
    <script> var grid= new Array(); var gridWidth=10; var gridHeight=10; var tileSize=40; var canvas; var context; var hunter; // global variables var ducksArray=new Array(); var bullet; var duckImg= new Image(); //create DUCK image duckImg.src="/pics/duck.gif" var huntImg= new Image(); //create HUNTER image huntImg.src="/pics/hunty.gif" ///////////// CIRCLE ///////////////////////////////////////////////////// function circle(x,y,radius) { // circle function context.beginPath(); context.arc(x, y, radius,0, Math.PI*2, true); context.fill(); context.stroke(); } ////////////// CREATE SETTING ////////////////////////////////// function createSetting(){ // create grid and characters canvas=document.getElementById("canvas"); context =canvas.getContext('2d'); var x; // make 2-dimensional grid for (x=0; x<gridWidth; x++){ grid[x]=new Array(); var y; for(y=0;y<gridHeight;y++){ grid[x][y]='sky'; // whole grid is filled with SKY } } //.... put in obstacles e.g. grid[3][9]='fence'; // in drawTile() define how to draw a fence (82) var X,Y; for(X=0;X<gridWidth;X++){ // draw the WHOLE GRID for(Y=0;Y<gridHeight;Y++){ drawTile(X,Y); } } hunter=new Hunter(5,9); // make the HUNTER hunter.draw(); // draw him for ( var i=0;i<2;i++){ // make some Ducks ducksArray[i]=new Duck(3*i,0); // put in ducksArray ducksArray[i].draw(); // and draw //.... if you make them fly, call fly() function } } /////////////////// DRAW TILE //////////////////////////////////////////// function drawTile(x,y){ // DRAWTILE function to draw individual TILES if(grid[x][y]=='sky'){ // pieces of SKY context.fillStyle='lightBlue'; context.fillRect(x*tileSize,y*tileSize,tileSize,tileSize); } //......with more else-if statements define how to draw your obstacles // don't forget to add it in the Grid (48) } /////////////// DUCK /////////////////////////////////////////////////////// function Duck(x,y){ // DUCK constructor this.x=x; this.y=y; this.stop=false; // ***************** THIS DRAW ********// // Draw a Duck this.draw= function(){ context.drawImage(duckImg,this.x*tileSize,this.y*tileSize,tileSize,tileSize); } //********** THIS DIE*******************// this.die = function(){ // animation when duck is shot if(this.stop==false){ // if duck is not stopped if(this.y+1>gridHeight){ // check if duck reaches floor this.stop=true; // stop duck } else { // keep falling drawTile(this.x,this.y); // erase duck this.y++; // duck FALLS down 1 tile this.draw(); setTimeout(this.die.bind(this),300); // loop } } if(this.stop==true){ // if duck is stopped var index=ducksArray.indexOf(this); // get index of duck in array ducksArray.splice(index,1); // delete this duck from duckArray if(ducksArray.length==0){ win(); // if no ducks left; WIN } } } //*********** THIS FLY *******************// //......make the ducks fly with a this.fly = function(){..} //look at the this.die function above to help you(104) //*************** THIS DROP EGGS *************// // this.dropEggs = function(){ // ... let the ducks shoot back // .......create an Egg instance in the position of this duck //...... animate the egg. // setTimeout(this.dropEggs.bind(this),2000); //} // .... to create an Egg Constructer,look at the Bullet Constructer(160) // Eggs should fall down instead of shoot up } //////////////// HUNTER /////////////////////////////////////////////// function Hunter(x,y){ // HUNTER constructor this.x=x; this.y=y; this.animate; this.draw= function(x,y){ // HUNTER DRAW funtion context.drawImage(huntImg,this.x*tileSize,this.y*tileSize,tileSize,tileSize); } } ////////////////// BULLET ///////////////////////////////////////////// function Bullet(x,y){ // BULLET constructor this.x=x; this.y=y; this.stop=false; this.draw= function(x,y){ // BULLEt DRAW funtion context.fillRect(this.x*tileSize,this.y*tileSize,tileSize,tileSize); context.fillStyle="white"; circle(this.x*tileSize + 0.5*tileSize,this.y*tileSize + 0.5*tileSize,4); } //************SHOOT*********************// this.shoot = function(){ if(this.y<0){ // if bullet shoots through top canvas this.stop=true; // stop bullet } else{ for (var i=0;i<ducksArray.length;i++){ // check if bullet hits any Duck if(this.y-1==ducksArray[i].y && this.x == ducksArray[i].x){ // if bullet and duck sit on same tile ducksArray[i].die(); this.stop=true; } } } if(this.stop==false){ // if bullet is not stopped drawTile(this.x,this.y); // erase bullet this.y--; // shoot up 1 tile this.draw(); setTimeout(this.shoot.bind(this),200); // loop } else { // if bullet is stopped delete this; // delete the bullet } } } ////////////// MOVE HUNTER KEYS FUNCTION /////////////////////////////////// function moveHunter(event){ // Move HUNTER var code= event.keyCode; switch(code){ case 37: // LEFT if(hunter.x-1>=0){ // check if hunter stays inside canvas drawTile(hunter.x,hunter.y); // redraw the tile hunter.x--; // change hunter x-coord hunter.draw(); // redraw hunter } break; case 39: // RIGHT event.preventDefault(); // otherwise window scrolls if(hunter.x-1<gridWidth){ //.... same as LEFT drawTile(hunter.x,hunter.y); hunter.x++; hunter.draw(); } break; case 32: // SPACE event.preventDefault(); // otherwise window shifts bullet= new Bullet(hunter.x,hunter.y-1); // make a bullet bullet.draw(); bullet.shoot(); // shoot() moves bullet break; } } function win(){ // WIN : set message WIN document.getElementById('p').innerHTML="YOU WIN !!!"; document.getElementById('p').style.color='green'; document.getElementById('p').style.fontSize='26px'; } setTimeout(createSetting,200); </script> <p id="p" style="height:30px;font-size:18px">Move hunter with left- right arrows, Shoot with space bar</p> <canvas id="canvas" height="400" width="400" tabindex="0" onkeydown="moveHunter(event)" style="border:1px solid blue"></canvas> <ul> <li>Make the Ducks fly away(130,68)</li> <li>Make Obstacles (48,82)</li> <li>Let the ducks shoot back(134,141)</li></ul>

    <-----Back        Next --->

    This username already exists.

    This username already exists.

    Login or register to save your work.

    User name field is empty.

    Your username needs to be at least 7 characters long.

    Your username can not contain any of the following characters: ",', <, > , < and whitespaces.

    Please enter a correct email addresss .

    This email address is not found in our database .

    Your password needs to be at least 7 characters long.

    login
    username
    password
    forgot password
    email
    register
    username
    password
    email