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