Home/ Questions/Q 7702943
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T23:20:44+00:00

I am working on a dynamic bingo game that randomly generates the number in

  • 0

I am working on a dynamic bingo game that randomly generates the number in each bingo square and when you click on a square it will change color. This I have accomplished. I created a table and within each TD I have the following code:

 <td onclick="javascript:this.style.background = '#00ff00';"    
 id="B1" class="bingo1"><script>document.write(patty[0]);</script></td>

When the page is loaded each square (td) will have a variable that is initially set to 0 (var B1 = 0;). When you click in the square the variable is increased to 1, but I have no idea how to do this. I thought that maybe it could be done with the onclick event or maybe it would detect when the background color changes. But, as I said, I have no idea how to do either of these. Any and all help would be greatly appreciated. Thanks!

  • Each square will have a different id, such as B2, B3, B4, B5, I1, I2, etc.

Take care and have a great day….

ciao,
john.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would just have a two dimensional array, (5×5) all set to zeros (aside the free space, which is set to 1), and then the individual cells are buttons to change some array value to 1.

    like so:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bingo</title>
<style>
#card {width:510px; margin-right:auto; margin-left:auto; position:relative; }
.top {border: thin #000 solid; float:left; width:100px; height:20px; text-align:center;}
.cell {border: thin #000 solid; float:left; width:100px; height:60px;text-align:center;padding-top:40px;}
.on {border: thin #000 solid; float:left; width:100px; height:60px; background-color:#0F0;text-align:center;padding-top:40px;}
.win {border: thin #000 solid; float:left; width:100px; height:60px; background-color:#F00;text-align:center;padding-top:40px;}
</style>
</head>

<body>
<div id="card"><div class="top">B</div><div class="top">I</div><div class="top">N</div><div class="top">G</div><div class="top">O</div></div>
</body>
<script type="text/javascript">
var score=new Array();
var existingNumbers=new Array();
var r,c;
for(r=0;r<5;r++){
    for(c=0;c<5;c++){
        score[r]=Array();
        score[r][c]=0;
        if((c==2)&&(r==2)){
            score[r][c]=1;
            document.getElementById('card').innerHTML+='<div id="cell'+r+c+'" class="on">FREE</div>';
        }
        else{
            document.getElementById('card').innerHTML+='<div id="cell'+r+c+'" class="cell" onclick="tap('+r+','+c+');">'+number(c)+'</div>';    
        }
    }
    document.body.innerHTML+='<br/>';
}

function number(col){
    var num=Math.ceil(Math.random()*15)+(15*col);
    while(existingNumbers.indexOf(num)!=-1){
        num=Math.ceil(Math.random()*15)+(15*col);
    }
    existingNumbers.push(num);
    return num;
}

function tap(r,c){
    document.getElementById('cell'+r+c).className="on";
    score[r][c]=1;
    winTest();
}

function winTest(){
    //there has got to be a more concise way of doing this, but right now it's just for function
    var winner=false;
    r1=score[0][0]+score[1][0]+score[2][0]+score[3][0]+score[4][0];
    r2=score[0][1]+score[1][1]+score[2][1]+score[3][1]+score[4][1];
    r3=score[0][2]+score[1][2]+1+score[3][2]+score[4][2];
    r4=score[0][3]+score[1][3]+score[2][3]+score[3][3]+score[4][3];
    r5=score[0][4]+score[1][4]+score[2][4]+score[3][4]+score[4][4];
    c1=score[0][0]+score[0][1]+score[0][2]+score[0][3]+score[0][4];
    c2=score[1][0]+score[1][1]+score[1][2]+score[1][3]+score[1][4];
    c3=score[2][0]+score[2][1]+1+score[2][3]+score[2][4];
    c4=score[3][0]+score[3][1]+score[3][2]+score[3][3]+score[3][4];
    c5=score[4][0]+score[4][1]+score[4][2]+score[4][3]+score[4][4];
    d1=score[0][0]+score[1][1]+1+score[3][3]+score[4][4];
    d2=score[0][4]+score[1][3]+1+score[3][1]+score[4][0];
    if(r1==5){
        document.getElementById('cell00').className="win";
        document.getElementById('cell10').className="win";
        document.getElementById('cell20').className="win";
        document.getElementById('cell30').className="win";
        document.getElementById('cell40').className="win";
        winner=true;
    }
    if(r2==5){
        document.getElementById('cell01').className="win";
        document.getElementById('cell11').className="win";
        document.getElementById('cell21').className="win";
        document.getElementById('cell31').className="win";
        document.getElementById('cell41').className="win";
        winner=true;
    }
    if(r3==5){
        document.getElementById('cell02').className="win";
        document.getElementById('cell12').className="win";
        document.getElementById('cell22').className="win";
        document.getElementById('cell32').className="win";
        document.getElementById('cell42').className="win";
        winner=true;
    }
    if(r4==5){
        document.getElementById('cell03').className="win";
        document.getElementById('cell13').className="win";
        document.getElementById('cell23').className="win";
        document.getElementById('cell33').className="win";
        document.getElementById('cell43').className="win";
        winner=true;
    }
    if(r5==5){
        document.getElementById('cell04').className="win";
        document.getElementById('cell14').className="win";
        document.getElementById('cell24').className="win";
        document.getElementById('cell34').className="win";
        document.getElementById('cell44').className="win";
        winner=true;
    }
    if(c1==5){
        document.getElementById('cell00').className="win";
        document.getElementById('cell01').className="win";
        document.getElementById('cell02').className="win";
        document.getElementById('cell03').className="win";
        document.getElementById('cell04').className="win";
        winner=true;
    }
    if(c2==5){
        document.getElementById('cell10').className="win";
        document.getElementById('cell11').className="win";
        document.getElementById('cell12').className="win";
        document.getElementById('cell13').className="win";
        document.getElementById('cell14').className="win";
        winner=true;
    }
    if(c3==5){
        document.getElementById('cell20').className="win";
        document.getElementById('cell21').className="win";
        document.getElementById('cell22').className="win";
        document.getElementById('cell23').className="win";
        document.getElementById('cell24').className="win";
        winner=true;
    }
    if(c4==5){
        document.getElementById('cell30').className="win";
        document.getElementById('cell31').className="win";
        document.getElementById('cell32').className="win";
        document.getElementById('cell33').className="win";
        document.getElementById('cell34').className="win";
        winner=true;
    }
    if(c5==5){
        document.getElementById('cell40').className="win";
        document.getElementById('cell41').className="win";
        document.getElementById('cell42').className="win";
        document.getElementById('cell43').className="win";
        document.getElementById('cell44').className="win";
        winner=true;
    }
    if(d1==5){
        document.getElementById('cell00').className="win";
        document.getElementById('cell11').className="win";
        document.getElementById('cell22').className="win";
        document.getElementById('cell33').className="win";
        document.getElementById('cell44').className="win";
        winner=true;
    }
    if(d2==5){
        document.getElementById('cell04').className="win";
        document.getElementById('cell13').className="win";
        document.getElementById('cell22').className="win";
        document.getElementById('cell31').className="win";
        document.getElementById('cell40').className="win";
        winner=true;
    }
    if(winner){
        alert('You WIN!!');
    }
}
</script>
</html>
    • 0