Four By Four Box

March 16, 2007

In this bit of JavaScript code I had to create a four by four box in which I randomly placed numbers 1 to 16 in each box. When the user clicks on the box I have the number revealed and when the user releases the mouse button it hides the number again. When the user finds the correct number I display a message informing them. (This example will only work properly in Internet Explorer as of right now due to features only available in that browser.)

Here is an example of this code in action.

Here is the JavaScript code that I used:

function setup()
{
cells = new Array();
cells = [
[ cell00, cell01, cell02, cell03 ],
[ cell10, cell11, cell12, cell13 ],
[ cell20, cell21, cell22, cell23 ],
[ cell30, cell31, cell32, cell33 ]
];
placeNumbers();
//document.onclick = showCell(randomNum,this);
}

function placeNumbers()
{

var randomLoc,
temp;

for ( var i = 1; i <= 16; i++ )
numbers[ i ] = i;

for ( i = 1; i <= 16; ++i )
{
randomLoc = Math.floor( Math.random() * 16 + 1 );
temp = numbers[ i ];
numbers[ i ] = numbers[ randomLoc ];
numbers[ randomLoc ] = temp;
}

i = 1;
for ( var rows = 0; rows < 4; ++rows )
{
for ( var cols = 0; cols < 4; ++cols )
{
cells[rows][cols].innerText=numbers[i];
++i;
}
}

randomGuess();
tries=0;
/*
for ( var rows = 0; rows < 4; ++rows )
{
for ( var cols = 0; cols < 4; ++cols )
{
document.getElementById(’cell’+rows+”+cols).style.color=”white”;
}
} */
}

function showCell(button)
{
++tries;

if (button.innerText == randomNum)
{
button.style.color=”green”;
alert(’You Found the number ‘+randomNum+’ ! It took you ‘+tries+’ tries. Please click “Shuffle Numbers” to play again.’);
button.style.color=”white”;
}
else
{
button.style.color=”blue”;
}

}

function hideCell(button)
{
button.style.color=”white”;
}

function randomGuess()
{
randomNum = Math.floor( Math.random() * 16 + 1 );
document.getElementById(’ranNumSpan’).innerHTML=randomNum;
}

/*function processClick()
{
var top, bottom, left, right;

for ( var rows = 0; rows < 4; ++rows )
{
for ( var cols = 0; cols < 4; ++cols )
{

if ( cells[ rows ][ cols ].id == window.event.srcElement.id )
{
top = rows - 1;
bottom = rows + 1;
left = cols - 1;
right = cols + 1;

swapped = false;

// test cell above
if ( top != -1 && cells[ top ] [ cols ].innerText == ” ” )
swap( cells[ rows ][ cols ], cells[ top ][ cols ] );

// test cell right
else if ( right != 4 && cells[ rows ] [ right ].innerText == ” ” )
swap( cells[ rows ][ cols ], cells[ rows ][ right ] );

// test cell below
else if ( bottom != 4 && cells[ bottom ] [ cols ].innerText == ” ” )
swap( cells[ rows ][ cols ], cells[ bottom ][ cols ] );

// test cell left
else if ( left != -1 && cells[ rows ] [ left ].innerText == ” ” )
swap( cells[ rows ][ cols ], cells[ rows ][ left ] );

if ( swapped == false )
alert( “This move is not allowed” );
}
}
}
}