Kids

Can

JavaScript

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

Clickable Grid Games


How to make a Grid

example1:



Grid is a 2-dimensional Array (an Array with little arrays in it) that holds info. You can access each tile by its column and row numbers .

 var 
 grid 
 = 
 [ 
 [ 
 C 
 , 
 A 
 , 
 T 
 ] 
 , 
 [ 
 D 
 , 
 O 
 , 
 G 
 ] 
 , 
 [ 
 R 
 , 
 A 
 , 
 T 
 ] 
 ] 
 ; 

Get info from grid: var tile=grid[x][y];
Set info :grid[x][y]='M';

 grid 
 [ 
 0 
 ] 
 [ 
 2 
 ] 
 = 
 'B' 
 ; 

Play with a Grid......... .... "TryoutPanel1"
<script> var tileSize=50; // change tileSize var font="Georgia 20px"; var grid= // make the grid bigger, smaller [ [" ","H"," "], ["M","A","P"], // change the info [" ","T"," "] ]; grid[2][0]='?' // change this grid position //////////// DRAW //////////////////////////////////////////// function draw(x,y){ // draw tile in grid position(x,y) canvas =document.getElementById("canvas"); context=canvas.getContext('2d'); context.font=font; context.fillStyle="yellow"; var tile=grid[x][y]; context.fillRect(x * tileSize , y * tileSize, tileSize , tileSize); context.strokeRect(x * tileSize , y * tileSize, tileSize , tileSize); context.strokeText(tile ,(x+0.5) * tileSize , (y+0.5) * tileSize); } ///////// DRAW ALL ///////////////////////////////// function drawAll(){ 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: <ul><li><b>change</b> the info(10)</li> <li>make it <b>bigger</b>, by adding Strings inside the inner Arrays, or add new Arrays inside the main Array</li> <li>Use column and row numbers to <b>access each tile</b>(13)</li></ul> </p>




Generate a Grid with the Word Search Grid maker. Copy de grid in Tryout Panel 1 above in the place of the other grid, to see what it looks like. Later you will be using it for your own Word Search Game.




Draw the Grid

The draw(x,y) function draws the tile of column x and row y on the right place on the canvas.
In our Word Search game each tile (grid[x][y]) can hold 2 pieces of info. The first Character is the letter,

 function 
 draw ( 
 x 
 , 
 y 
 ) { 
 var 
 tile 
 = 
 grid 
 [x] 
 [y] 
 ; 


 if ( 
 tile.indexOf('s')>-1 
 ) { 
 context.fillStyle 
 = 
 "yellow" ; 
 } 


 else{ 
 context.fillStyle 
 = 
 "white"; 
 } 


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


 context.strokeText( 
 tile.charAt(0), 
 (x+0.5) * tileSize , 
 (y+0.5) * tileSize  
 } 

The second Character tells if the letter is selected, or correct, or none.
If and Else statements tell what to draw in each case.




Drawing the Grid......... .... "TryoutPanel2"
<script> var tileSize=50; var font="Georgia 20px"; var grid= // an extra 's'makes a tile selected [ [" ","Hs"," "], ["Ms","A","Pg"], // but 'g' does not do anything yet. [" ","T"," "] ]; // change the draw() function to color these tiles green grid[2][0]+='s'; // adds an 's' to show tile is selected. grid[1][1]+='g'; //////////// DRAW //////////////////////////////////////////// function draw(x,y){ // draw tile in grid position(x,y) canvas =document.getElementById("canvas"); context=canvas.getContext('2d'); context.font=font; var tile=grid[x][y]; if(tile.indexOf('s')>-1){ // an 's' is present in this tile context.fillStyle="yellow"; } // ... make an else if(){} statement that colors tiles with 'g' green. else{ context.fillStyle="white";} // in all other cases make the tile white context.fillRect(x * tileSize , y * tileSize, tileSize , tileSize); // colors context.strokeRect(x * tileSize , y * tileSize, tileSize , tileSize); // outlines context.strokeText(tile.charAt(0) ,(x+0.5) * tileSize , (y+0.5) * tileSize); // writes text } ///////// DRAW ALL ///////////////////////////////// function drawAll(){ // draws all tiles for (var x=0;x<grid.length;x++){ for(var y=0;y<grid[x].length;y++){ draw(x,y); } } } drawAll(); </script> <p>Some tiles have an extra<b> 's'</b> for <b>selected</b>. The draw() function colors them yellow. Some tiles have an extra<b> 'g'</b> for <b>green</b></p> <canvas width="300" height="300" id="canvas" ></canvas> <p> <ul><li>Add an <b>else if statement</b> in the draw() function to color them green.(29)</li></ul> </p>





Select Tiles With Mouse

In our Word Search Game the user has to click the mouse to select the tiles.

First we convert the mouse coordinates to canvas coordinate using getBoundingClientRect(). Then we convert them again to the grid coordinates. Like so...

 var 
 rect 
 = 
 canvas 
 . 
 getBoundingClientRect() 
 ; 


 var  
 X 
 = 
 event 
 . 
 x 
 - 
 rect 
 . 
 left 
 ; 


 var 
 Y 
 = 
 event 
 . 
 y 
 - 
 rect 
 . 
  
 top 
 ; 


 var  
 x 
 = 
 Math.floor(  
 X / tileSize 
 ); 


 var  
 y 
 = 
 Math.floor( 
 Y/tileSize 
 ); 

We save these coords in a Coords Object in the selects Array for later use. We add an 's' to that tile to make it yellow.

 selects 
 . 
 push( 
 new 
 Coord( 
 x 
 , 
 y 
 ) 
 ) ; 


 grid 
 [x] 
 [y] 
 += 
 's' ; 

Now you know everything to make your own Word Search Game.




Make your own Word Search game......... .... "TryoutPanel3"
<script> var canvas; var context; var gridWidth=8; var gridHeight=8; var tileSize=40; var selects=[]; // holds coords of selected tiles // replace with your own grid between = and ; var grid= [["W","S","F","T","O","S","P","M"], ["O","T","O","A","D","T","O","U"], ["L","A","X","O","L","O","T","L"], ["F","R","O","G.","O","A","T","E"], ["B","F","M","A","F","T","E","N"], ["L","I","O","N","B","I","R","D"], ["O","S","L","T","A","P","I","R"], ["P","H","E","R","O","N","M","T"]] ; var wordArray=["STARFISH","FISH","LION", /// replace with your wordArray "AXOLOTL","FOX","TOAD","FROG","MULE","OTTER", "GOAT","STOAT","MOLE","HERON","ANT","WOLF","BIRD","TAPIR"]; //////// COORD CONSTRUCTOR////////////////// function Coord(x,y){ this.x=x; this.y=y; } ///////// SELECT //////////////////////////////////////// function selectLetter(event){ // ....make a function that selects tiles when pressed //............ make a rect with getBoundingClientRect to // ........... convert event.x and event.y to canvas coords // ...........then convert canvas coords to grid coords selects.push(new Coord(x,y)); // make a new coord with x,y properties and push them in 'selects' grid[x][y]+='s'; // add 's' to select this grid-position draw(x,y); // draw the tile } //////////////////// CHECK WORD ////////////////////////////////////////////// function checkWord(){ // will check if selected tiles form search-word var word=''; for(var i=0;i<selects.length;i++){ // for all selected tiles var x= selects[i].x; // get the x,y coordinates var y= selects[i].y; var letter=grid[x][y].charAt(0); // get only first character(this holds letter) grid[x][y]=grid[x][y].replace(/s/g,""); // strip off 's' to un-select word+=letter; // add letter to word } if(wordArray.indexOf(word)>-1){ //.......the word is on the list so make all selected tiles green for(var i=0;i<selects.length;i++){ // for all coords in selects array //...... get the x and y coord , look at the above example(60) //....... add some info in that grid- tile to show letter is correct //.......e.g. grid[x][y] += 'c'; //.......add an else if statement in draw()(100)to make tiles with this info green } } drawAll(); } /////////////////////// DRAW FUNCTION //////////////////////// function draw(x,y){ // draw this tile position canvas=document.getElementById('canvas'); context=canvas.getContext('2d'); context.font='Georgia 22px'; var tile=grid[x][y]; // get tile information if(tile.charAt(tile.length-1)=='s'){ // selected : make yellow context.fillStyle='yellow'; } //...... add 'else if' statement to make the tile green when correct //use the info you put in in checkWord() (68) else{ // no extra information: make white context.fillStyle='white'; } letter=tile.charAt(0); // the letter sits in first position context.fillRect(x*tileSize,y*tileSize,tileSize,tileSize); // background context.strokeText(letter,(x+0.5)*tileSize,(y+0.5)*tileSize); // letter context.strokeRect(x*tileSize,y*tileSize,tileSize,tileSize); // outline } ///////////////////// DRAW ALL /////////////////////////////////////////// function drawAll(){ // draws all the tiles of grid for (var x=0;x<gridWidth;x++){ for (var y=0;y<gridHeight;y++){ draw(x,y); } } } ///////////////////// START /////////////////////////////////// drawAll(); </script> <h1>Word Search </h1> <p> Select the tiles and click check</p> <canvas id="canvas" width="320" height="320" title='select letters and press check' onmousedown="selectLetter(event)" tabindex="0"></canvas> <button onclick="checkWord()" title="checks if word is on the list.">check word</button> <ul><li> replace <b>grid</b> (11) and <b>wordArray</b> (21) with your own</li> <li>finish <b>selectLetter()</b>: convert mouse x,y to grid x,y(38)</li> <li>finish <b>checkWord()</b>: add info to grid position to show 'correct'(68)</li> <li>finish <b>draw()</b>: add an else if statement, to make 'correct' letters green(100)</li>




<-----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