BINGO

The source code:

<!doctype HTML> <html lang="en"> <head> <meta charset="utf-8" /> <title>Bingo game (sort of)</title> <style> div#controls { margin-bottom: 1em; } table { border-collapse: collapse; font-weight: bold; } th { background-color: tan; } td, th { border: 1px black solid; text-align: center; vertical-align: center; width: 2.5em; height: 2em; } td.called { background-color: yellow; } td.win0 { background-color: white; color: red; } td.win1 { background-color: red; color: white; } </style> <script> var wins = [ ['c11','c21','c31','c41','c51'], ['c12','c22','c32','c42','c52'], ['c13','c23','c33','c43','c53'], ['c14','c24','c34','c44','c54'], ['c15','c25','c35','c45','c55'], ['c11','c12','c13','c14','c15'], ['c21','c22','c23','c24','c25'], ['c31','c32','c33','c34','c35'], ['c41','c42','c43','c44','c45'], ['c51','c52','c53','c54','c55'], ['c11','c22','c33','c44','c55'], ['c15','c24','c33','c42','c51']]; var blinkID = null; var inCheckForWin = false; function $(id) { return document.getElementById(id); } function handleCellClick(evt) { if (inCheckForWin) return; var thisCell = null; if (evt) thisCell = evt.target; // non-IE else thisCell = window.event.srcElement; // IE if (thisCell.className != '') thisCell.className = ''; else thisCell.className = 'called'; checkForWin(); } function blink() { if (inCheckForWin) return; for (var row=1; row<=5; row++) { for (var col=1; col<=5; col++) { var curClass = $('c'+col+row).className; if (curClass=='win0') $('c'+col+row).className = 'win1'; else if (curClass=='win1') $('c'+col+row).className = 'win0'; } } } function checkForWin() { inCheckForWin = true; var row, col; var winner = false; if (blinkID != null) { clearInterval(blinkID); blinkID = null; } for (row=1; row<=5; row++) { for (col=1; col<=5; col++) { var curClass = $('c'+col+row).className; if (curClass=='win0' || curClass=='win1') $('c'+col+row).className = 'called'; } } var ndx = 0; for (var win=0; win<wins.length; win++) { var localWin = true; for (ndx=0; ndx<wins[win].length; ndx++) { if ($(wins[win][ndx]).className == '') { localWin = false; break; } } if (localWin) { for (ndx=0; ndx<wins[win].length; ndx++) { $(wins[win][ndx]).className = 'win0'; } winner = true; } } if (winner) blinkID = setInterval('blink()', 1000); inCheckForWin = false; } function randomElement(arr) { if (inCheckForWin) return; var ndx = Math.floor(Math.random() * arr.length); var temp = arr[ndx]; arr[ndx] = arr[arr.length-1]; arr[arr.length-1] = temp; return arr.pop(); } function newCard() { if (inCheckForWin) return; var nums = new Array(); for (var col=1; col<=5; col++) { while (nums.length > 0) nums.pop(); // set array of possible numbers for column for (var k=1; k<=15; k++) nums.push((col-1)*15+k); for (var row=1; row<=5; row++) { if (row!=3 || col!=3) { $('c' + col + row).onclick = handleCellClick; $('c' + col + row).className = ''; $('c' + col + row).innerHTML = randomElement(nums); } else { $('c' + col + row).innerHTML = 'Free'; $('c' + col + row).className = 'called'; } } } } function init() { $('btnNewCard').onclick = newCard; // set up event handling for each cell for (var row=1; row<=5; row++) { for (var col=1; col<=5; col++) { if (row!=3 || col!=3) { $('c' + col + row).onclick = handleCellClick; } } } newCard(); } if (!document.getElementById) alert("This browser is not supported."); else window.onload = init; </script> </head> <body> <div id="controls"><button id="btnNewCard">New Card</button></div> <div id="card"> <table> <thead> <tr><th>B</th><th>I</th><th>N</th><th>G</th><th>O</th></tr> </thead> <tbody> <script> for (var row=1; row<=5; row++) { document.write('<tr>'); for (var col=1; col<=5; col++) { document.write('<td id="c' + col + row + '"> </td>'); } document.writeln('</tr>'); } </script> </tbody> </table> </div> </body> </html>