bingo card generator
by pramendra
HTML
<table>
<tr>
<th width="20%">B</th>
<th width="20%">I</th>
<th width="20%">N</th>
<th width="20%">G</th>
<th width="20%">O</th>
</tr>
<tr>
<td id="square0"> </td>
<td id="square1"> </td>
<td id="square2"> </td>
<td id="square3"> </td>
<td id="square4"> </td>
</tr>
<tr>
<td id="square5"> </td>
<td id="square6"> </td>
<td id="square7"> </td>
<td id="square8"> </td>
<td id="square9"> </td>
</tr>
<tr>
<td id="square10"> </td>
<td id="square11"> </td>
<td id="free">Free</td>
<td id="square12"> </td>
<td id="square13"> </td>
</tr>
<tr>
<td id="square14"> </td>
<td id="square15"> </td>
<td id="square16"> </td>
<td id="square17"> </td>
<td id="square18"> </td>
</tr>
<tr>
<td id="square19"> </td>
<td id="square20"> </td>
<td id="square21"> </td>
<td id="square22"> </td>
<td id="square23"> </td>
</tr>
</table>
<p><a href="#" id="reload">Click here</a> to create a new card</p>JavaScript
window.onload =<!-- --> initializePage;
initializePage();
// even though arrays are 0-based, creating 76 positions generates elements 0-75, we will later ignore position 0
// note that newly created arrays have all elements set to false
var usedNumbers = new Array(76);
function initializePage() {
// so older browsers do not get 24 error messages
if (document.getElementById) {
// enable creating a new card without reloading page
document.getElementById("reload").onclick = anotherCard;
// generate the new bingo card
newCard();
} else {
alert("Sorry, but your browser is not running JavaScript, and this game requires it.");
}
}
function newCard() {
for (var i = 0; i < 24; i++) {
// pass the current i as parameter to setSquare function
setSquare(i);
}
}
function setSquare(thisSquare) {
// capture current corresponding html square (via id=) to current digit that was passed over
var currentSquare = "square" + thisSquare;
// while bingo numbers are ranged 1-75, letter columns are restricted to specific number ranges
// b = 1-15, i = 16-30, n = 31-45, g = 46-60, o = 67-75
// OR mathematically we can generate a random number between 1-15 and add column-specific number
// b = 0, i = 15, n = 30, g = 45, o = 60
// need 5 sets of numbers 0-4 (1 set for each letter)
// note missing '2,' from third set, so as to skip the middle 'free' square
var columnPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
// capture appropriate column mulitple by referencing current square # as array element
var columnMultiple = (columnPlace[thisSquare] * 15);
// initialize variable to be used in following do-while loop
var newNumber;
// generate newNumber and check if it has been used already, if so loop again
do {
// add random number to the particular column...