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