topical media & game development
game-javascript-casual-jargon-bingo-game.htm / htm
<!-- THREE STEPS TO INSTALL JARGON BINGO:
1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Kevin Royce (mycontact@verizon.net) -->
<!-- Web Site: http://www.royce-devbox.com -->
<style type="text/css" media="screen">
<!--
body {
background: #c0c0c0;
margin:50px 0;
padding:0;
text-align:center;
}
.main {
position:relative;
width:600px;
height:600px;
background: #fff;
border: 1px solid #000;
font: 10px verdana, sans-serif;
padding: 10px;
text-align: left;
}
.main table {
position:relative;
border: 1px
dotted #000;
margin:50px 50px;
width: 100%;
height: 100%;
background: #D8E8F5;
}
.main td {
width: 20%;
height: 20%;
padding: 0;
text-align: center;
font: 14px verdana, sans-serif;
border: 1px solid #000;
}
#6 {
background: #0080c0;
}
.main button {
text-align : center;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function VER5_Check() {
var b = navigator.appName;
if (b == "Netscape") this.b = "NS";
else if (b == "Microsoft Internet Explorer") this.b = "IE";
this.v = parseInt(navigator.appVersion);
this.IE5 = (navigator.userAgent.indexOf('MSIE 5') > 0);
this.NS5 = (this.b >= "NS" && this.v >= 5);
this.VER5 = (this.IE5 || this.NS5);
}
is = new VER5_Check();
var jargonSelect = new Array();
var c2=0;
function highlight(myId) {
var myCell = document.getElementById(myId);
myCell.style.backgroundColor = "#00ffc0";
jargonSelect[c2]=myId;
if(jargonSelect.length>=5){
//alert("check to see if its a winner");
var row=new Array();
var row2=new Array();
var row3=new Array();
var row4=new Array();
var row5=new Array();
var rowCount=0;
var row2Count=0;
var row3Count=0;
var row4Count=0;
var row5Count=0;
var column=new Array();
var column2=new Array();
var column3=new Array();
var column4=new Array();
var column5=new Array();
var colCount=0;
var col2Count=0;
var col3Count=0;
var col4Count=0;
var col5Count=0;
var diagonal=new Array();
var diagonal2=new Array();
var diagCount=0;
diag2Count=0;
for(i=0;i<jargonSelect.length;++i){
//Checking for diagonal match
if(jargonSelect[i]=="5:1" || jargonSelect[i]=="4:2" || jargonSelect[i]=="3:3" || jargonSelect[i]=="2:4" || jargonSelect[i]=="1:5"){
diagonal[diagCount]=jargonSelect[i];
diagCount++;
if(diagonal.length==5){
alert("BINGO");
document.location.reload(1);
}
}
if(jargonSelect[i]=="1:1" || jargonSelect[i]=="2:2" || jargonSelect[i]=="3:3" || jargonSelect[i]=="4:4" || jargonSelect[i]=="5:5"){
diagonal2[diag2Count]=jargonSelect[i];
diag2Count++;
if(diagonal2.length==5){
alert("BINGO");
document.location.reload(1);
}
}
//Checking for column match
if(jargonSelect[i]=="1:1" || jargonSelect[i]=="2:1" || jargonSelect[i]=="3:1" || jargonSelect[i]=="4:1" || jargonSelect[i]=="5:1"){
column[colCount]=jargonSelect[i];
colCount++;
if(column.length==5){
alert("BINGO");
document.location.reload(1);
}
}
if(jargonSelect[i]=="1:2" || jargonSelect[i]=="2:2" || jargonSelect[i]=="3:2" || jargonSelect[i]=="4:2" || jargonSelect[i]=="5:2"){
column2[col2Count]=jargonSelect[i];
col2Count++;
if(column2.length==5){
alert("BINGO");
document.location.reload(1);
}
}
if(jargonSelect[i]=="1:3" || jargonSelect[i]=="2:3" || jargonSelect[i]=="3:3" || jargonSelect[i]=="4:3" || jargonSelect[i]=="5:3"){
column3[col3Count]=jargonSelect[i];
col3Count++;
if(column3.length==5){
alert("BINGO");
document.location.reload(1);
}
}
if(jargonSelect[i]=="1:4" || jargonSelect[i]=="2:4" || jargonSelect[i]=="3:4" || jargonSelect[i]=="4:4" || jargonSelect[i]=="5:4"){
column4[col4Count]=jargonSelect[i];
col4Count++;
if(column4.length==5){
alert("BINGO");
document.location.reload(1);
}
}
if(jargonSelect[i]=="1:5" || jargonSelect[i]=="2:5" || jargonSelect[i]=="3:5" || jargonSelect[i]=="4:5" || jargonSelect[i]=="5:5"){
column5[col5Count]=jargonSelect[i];
col5Count++;
if(column5.length==5){
alert("BINGO");
document.location.reload(1);
}
}
//Checking for row match
if(jargonSelect[i]=="1:1" || jargonSelect[i]=="1:2" || jargonSelect[i]=="1:3" || jargonSelect[i]=="1:4" || jargonSelect[i]=="1:5"){
row[rowCount]=jargonSelect[i];
rowCount++;
if(row.length==5){
alert("BINGO");
document.location.reload(1);
}
}
if(jargonSelect[i]=="2:1" || jargonSelect[i]=="2:2" || jargonSelect[i]=="2:3" || jargonSelect[i]=="2:4" || jargonSelect[i]=="2:5"){
row2[row2Count]=jargonSelect[i];
row2Count++;
if(row2.length==5){
alert("BINGO");
document.location.reload(1);
}
}
if(jargonSelect[i]=="3:1" || jargonSelect[i]=="3:2" || jargonSelect[i]=="3:3" || jargonSelect[i]=="3:4" || jargonSelect[i]=="3:5"){
row3[row3Count]=jargonSelect[i];
row3Count++;
if(row3.length==5){
alert("BINGO");
document.location.reload(1);
}
}
if(jargonSelect[i]=="4:1" || jargonSelect[i]=="4:2" || jargonSelect[i]=="4:3" || jargonSelect[i]=="4:4" || jargonSelect[i]=="4:5"){
row4[row4Count]=jargonSelect[i];
row4Count++;
if(row4.length==5){
alert("BINGO");
document.location.reload(1);
}
}
if(jargonSelect[i]=="5:1" || jargonSelect[i]=="5:2" || jargonSelect[i]=="5:3" || jargonSelect[i]=="5:4" || jargonSelect[i]=="5:5"){
row5[row5Count]=jargonSelect[i];
row5Count++;
if(row5.length==5){
alert("BINGO");
document.location.reload(1);
}
}
}
}
c2++;
}
var _id;
var _ff = 0;
var _rawId = null;
var _pages = 0;
var _chgFlag = null;
_cellZero = null;
var jargon = new Array( 'the notion of',
'commodity',
'cycles',
'friction',
'space',
'leverage',
'physics',
'directionally correct',
'crisp',
'mind share',
'channel',
'partner',
'drain',
'touch point',
'blocking and tackling',
'framework',
'multi-modal',
'enterprise',
'end of the day',
'cash flow positive',
'spot on',
'fierce',
'facts and data',
'domain',
'integration'
);
var _tableData = new Array();
function randArray() {
var count = 0;
while (jargon.length != 0) {
var f = Math.round(Math.random() * (jargon.length - 1));
_tableData[count]=jargon[f];
jargon[f] = jargon[jargon.length - 1];
jargon.length -= 1;
count++;
}
}
/*Called on page load*/
function loadJargon() {
randArray();
count=0;
for(i = 1; i < 6; ++i) {
for(j = 1; j < 6; ++j) {
cellId=i+":"+j;
cell=document.getElementById(cellId);
cell.appendChild(document.createTextNode(_tableData[count]));
count++;
}
}
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY onLoad="javascript:loadJargon()">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Kevin Royce (mycontact@verizon.net) -->
<!-- Web Site: http://www.royce-devbox.com -->
<div class="main">
<table>
<tr>
<td id="1:1" onclick="javascript:highlight(this.id);">
</td>
<td id="1:2" onclick="javascript:highlight(this.id);">
</td>
<td id="1:3" onclick="javascript:highlight(this.id);">
</td>
<td id="1:4" onclick="javascript:highlight(this.id);">
</td>
<td id="1:5" onclick="javascript:highlight(this.id);">
</td>
</tr>
<tr>
<td id="2:1" onclick="javascript:highlight(this.id);">
</td>
<td id="2:2" onclick="javascript:highlight(this.id);">
</td>
<td id="2:3" onclick="javascript:highlight(this.id);">
</td>
<td id="2:4" onclick="javascript:highlight(this.id);">
</td>
<td id="2:5" onclick="javascript:highlight(this.id);">
</td>
</tr>
<tr>
<td id="3:1" onclick="javascript:highlight(this.id);">
</td>
<td id="3:2" onclick="javascript:highlight(this.id);">
</td>
<td id="3:3" onclick="javascript:highlight(this.id);">
</td>
<td id="3:4" onclick="javascript:highlight(this.id);">
</td>
<td id="3:5" onclick="javascript:highlight(this.id);">
</td>
</tr>
<tr>
<td id="4:1" onclick="javascript:highlight(this.id);">
</td>
<td id="4:2" onclick="javascript:highlight(this.id);">
</td>
<td id="4:3" onclick="javascript:highlight(this.id);">
</td>
<td id="4:4" onclick="javascript:highlight(this.id);">
</td>
<td id="4:5" onclick="javascript:highlight(this.id);">
</td>
</tr>
<tr>
<td id="5:1" onclick="javascript:highlight(this.id);">
</td>
<td id="5:2" onclick="javascript:highlight(this.id);">
</td>
<td id="5:3" onclick="javascript:highlight(this.id);">
</td>
<td id="5:4" onclick="javascript:highlight(this.id);">
</td>
<td id="5:5" onclick="javascript:highlight(this.id);">
</td>
</tr>
<tr>
<td id="6" colspan=5>
<button align="center" onclick="javascript:document.location.reload(1);">
Reload Table
</button>
</td>
</tr>
</table>
</div>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 10.39 KB -->
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
