Bingo Game in Javascript

The previous lesson of javascript game development was about a cards game in javascript and in this lesson we will make a simple bingo game in javascript. The demo of a simple bingo game is given below. Click on "Start Game" button to start drawing numbers in Bingo Poll, match the numbers being drawn in bingo poll with the numbers on bingo card and click the numbers on bingo card matching the numbers in bingo poll. Once a new number is drawn in the bingo poll, you won't be able to click the previously drawn number in the pool on your bingo card, so you have to be quick in comparing and clicking the numbers. When all the numbers in your bingo card are clicked, click on the the big, round bingo button to win the game.

Html Code:

<div id="bingo-wrapper">
    <div id="frame1">
        <img src="bingo.png" alt="Bingo" width="200" height="40" style="margin-top:20px;" />
    </div>
    <div id="card">
        <h3 class="card-header">Bingo Card</h3>
        <div id="b-card">
            <div class="num" id="num1" style="float:left;"></div>
            <div class="num" id="num2" style="float:left;"></div>
            <div class="num" id="num3" style="float:left;"></div>
            <div class="num" id="num4" style="float:left;"></div>
            <div class="num" id="num5" style="float:left;margin-left:46px;"></div>
            <div class="num" id="num6" style="float:left;"></div>
            <div class="num" id="num7" style="float:left;"></div>
            <div class="num" id="num8" style="float:left;"></div>
            <div class="num" id="num9" style="float:left;"></div>
            <div class="num" id="num10" style="float:left;margin-left:46px;"></div>
            <div class="num" id="num11" style="float:left;"></div>
            <div class="num" id="num12" style="float:left;"></div>
            <div class="num" id="num13" style="float:left;"></div>
        </div>
        <div id="i-card">
            <div class="num"  id="num14"></div>
            <div class="num" id="num15"></div>
            <div class="num" id="num16"></div>
            <div class="num" id="num17"></div>
            <div class="num"  id="num18"></div>
        </div>
        <div id="bingo-btn">
            <input type="button" id="bingoclaim" onclick="bingo();" value="Bingo" />
        </div>
    </div>
    <div id="poll-wrap">
        <h4>Bingo Poll</h4>
        <div id="poll"></div>
<input type="button" class="bingo-btn" value="Start Game" onclick="setGenerator()" id="setgen" />
    </div>
</div>

Css Code:

h4{
     font-family: Tahoma;
     margin-left:7px;
     border-bottom:0px;
     color:#000;
     font-size:20px;
     font-weight:bold;
     margin-bottom:10px;
}
#bingo-wrapper{
     background:#FFFFFF;
     width:610px;
     height:700px;
     padding-bottom:20px;
     border-radius:10px;
     border:1px solid black;
     padding:10px;
     margin-left:-20px;
}
#frame1{
     color:#ffbf8e;
     font-size:35px;
     font-family:Verdana;
     height:80px;
}
.card-header{
     color:#FFFFFF;
     margin-bottom:0px;
     font-family:Tempus Sans ITC;
     background:#627a66;
     font-size:14px;
     opacity:0.9;
     font-weight:normal;
     border-bottom:2px solid black;
     width:176px;
     padding-left:10px;
     padding-top:5px;
     padding-bottom:5px;
}
.num{
     background:#ece4e6;
     width:20px;
     height:14px;
     margin-left:2px;
     margin-top:2px;
     font-weight:bold;
     padding:10px;
     border:1px solid black;
}
.num-style{
     width:40px;
     height:40px;
     float:left;
     text-align:center;
     border:1px solid black;
     background:#627A66;
     color:#FFFFFF;
     font-weight:bold;
     border-radius:20px;
}
.bingo-btn{
     color:#000;
     width:100px;
     height:30px;
     margin-top:3px;
     outline:none;
}
#card{
     margin-left:0px;
     float:left;
     width:220px;
     margin-top:60px;
}
#b-card{
     float:left;
     width:140px;
}
#i-card{
     float:left;
     width:50px;
}
#bingo-btn{
     margin-left:20px;
     float:left;
     margin-top:40px;
}
#bingoclaim{
     width:140px;
     height:140px;
     border-radius:110px;
     border:1px solid #000000;
     font-family: Verdana;
     font-size:25px;
     font-weight:bold;
     color:#000000;
     background-image: linear-gradient(bottom, rgb(146,153,146) 35%, 
     rgb(255,255,255) 68%);
     background-image: -o-linear-gradient(bottom, rgb(146,153,146) 35%, 
     rgb(255,255,255) 68%);
     background-image: -moz-linear-gradient(bottom, rgb(146,153,146) 35%, 
     rgb(255,255,255) 68%);
     background-image: -webkit-linear-gradient(bottom, rgb(146,153,146) 35%, 
     rgb(255,255,255) 68%);
     background-image: -ms-linear-gradient(bottom, rgb(146,153,146) 35%, 
     rgb(255,255,255) 68%);
     background-image: -webkit-gradient(
     linear,
     left bottom,
     left top,
     color-stop(0.35, rgb(146,153,146)),
     color-stop(0.68, rgb(255,255,255))
     );
}
#poll{
     width:360px;
     height:450px;
     background:#FFFFFF;
     padding:10px;
     padding-top:15px;
     overflow-y:scroll;
     border:1px solid black;
}
#poll-wrap{
     float:left;
}

Javascript Code:

<script type="text/javascript">
var change, count=0, myVar;
var rnum = [];
var num = [];
function bingo(){
    for(var i=1;i<=18;i++){
        num[i] = document.getElementById('num'+i);
    }
    if(num[1].value == "1" && num[2].value == "1" && num[3].value == "1" && 
    num[4].value == "1" && num[5].value == "1" &&     num[6].value == "1" && 
    num[7].value == "1" && num[8].value == "1" && num[9].value == "1" && 
    num[10].value == "1" && num[11].value == "1" && num[12].value == "1" && 
    num[13].value == "1" && num[14].value == "1" && num[15].value == "1" && 
    num[16].value == "1" && num[17].value == "1" && num[18].value == "1"){
        alert("Congratulations you won a bingo!!!");
    }else{
        alert("You donot have bingo!!");
    }
}
function setGenerator(){
    document.getElementById('setgen').disabled = "disabled";
    gen();
    setInterval(function(){ gen(); },4000);
}
function gen(){
    var g, called, numbers_called;
    count++;
    if(count<=108){
        g = Math.floor((Math.random()*60)+1);
        numbers_called = document.getElementById('poll');
        numbers_called.innerHTML += "<div class='num-style'>"+g+"</ div>"; 
        check(g);
    }
}
function cross(e){
    change = e.target;
    change.value = '1';
    change.style.backgroundImage="url('tick.jpg')";
}
function check(g1){
    for(var i=1;i<=18;i++){
        num[i].onmousedown = false;
        if(g1 == rnum[i]){
            num[i] = document.getElementById('num'+i);
            num[i].onmousedown = cross;
        }
    }
}
function do_first(){
    for(var i=1;i<=18;i++){
        rnum[i] = Math.floor((Math.random()*60)+1);
        num[i] = document.getElementById('num'+i);
        num[i].innerHTML = rnum[i];
    }
}
window.addEventListener('load',do_first,false);
</script>