JavaScript基础教程第8版-例1-Bingo卡片游戏

1基础工作

	<h1>Create A Bingo Card</h1> 
    <table> 
        <tr> 
        <th>B</th> 
        <th>I</th> 
        <th>N</th> 
        <th>G</th> 
        <th>O</th> 
        </tr> 
        <tr> 
        <td id="square0">&nbsp;</td> 
        <td id="square5">&nbsp;</td> 
        <td id="square10">&nbsp;</td> 
        <td id="square14">&nbsp;</td> 
        <td id="square19">&nbsp;</td> 
        </tr> 
        <tr> 
        <td id="square1">&nbsp;</td> 
        <td id="square6">&nbsp;</td> 
        <td id="square11">&nbsp;</td> 
        <td id="square15">&nbsp;</td> 
        <td id="square20">&nbsp;</td> 
        </tr> 
        <tr> 
        <td id="square2">&nbsp;</td> 
        <td id="square7">&nbsp;</td> 
        <td id="free">Free</td> 
        <td id="square16">&nbsp;</td> 
        <td id="square21">&nbsp;</td> 
        </tr> 
        <tr> 
        <td id="square3">&nbsp;</td> 
        <td id="square8">&nbsp;</td> 
        <td id="square12">&nbsp;</td> 
        <td id="square17">&nbsp;</td> 
        <td id="square22">&nbsp;</td> 
        </tr> 
        <tr> 
        <td id="square4">&nbsp;</td> 
        <td id="square9">&nbsp;</td> 
        <td id="square13">&nbsp;</td> 
        <td id="square18">&nbsp;</td> 
        <td id="square23">&nbsp;</td> 
        </tr> 
    </table> 
    <p><a href="test.html" id="reload">Click here</a> to create a new card</p> 

	body { 
    background-color: white; 
    color: black; 
    font-size: 20px; 
    font-family: "Lucida Grande", Verdana,Arial, Helvetica, sans-serif; 
    } 
    h1, th { 
    font-family: Georgia, "Times New Roman",Times, serif; 
    } 
    h1 { 
    font-size: 28px; 
    } 
    table { 
    border-collapse: collapse; 
    } 
    th, td { 
    padding: 10px; 
    border: 2px #666 solid; 
    text-align: center; 
    width: 20%; 
    } 
    #free, .pickedBG { 
    background-color: #f66; 
    } 
    .winningBG { 
    background-image:url(images/redFlash.gif); 
    }

二、
存入随机数字

 window.onload = initAll; 
 function initAll() { 
 	for (var i=0; i<24; i++) { 
  		var newNum = Math.floor(Math.random() * 75) + 1; 
 		document.getElementById("square" + i).innerHTML = newNum;
 	} 
 } 

三、
修复规则：在真实的 Bingo 卡片上，每列具有不同的数字范围：B 列是 1～15，I 列是 16～30，N 列是 31～45，G 列是 46～60，O 列是 61～75。

    window.onload = initAll; 
    var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 
    function initAll() { 
        for (var i=0; i<24; i++) { 
            var newNum = colPlace[i]*15+Math.floor(Math.random()*15+1); 
            document.getElementById("square" + i).innerHTML = newNum;
        } 
    }  

四、
修复规则：去除重复的

	window.onload = initAll; 
    var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 
    var usedNums = new Array(76)
    function initAll() { 
        for (var i=0; i<24; i++) { 
            var newNum = colPlace[i]*15+Math.floor(Math.random()*15+1); 
            if(!usedNums[newNum]){
                usedNums[newNum]=1
                document.getElementById("square" + i).innerHTML = newNum;    
            }
        } 
    }

五、
修复规则：填补空缺

	window.onload = initAll; 
    var usedNums = new Array(76)
    function initAll() { 
        for (var i=0; i<24; i++) { 
            var newNum
            do{
                newNum = Math.floor(i/5)*15+Math.floor(Math.random()*15+1);    
            }while(usedNums[newNum])
            usedNums[newNum]=1
            document.getElementById("square" + i).innerHTML = newNum;
        } 
    } 

六、
修复规则：点击变色

	window.onload = initAll; 
    var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
    var usedNums = new Array(76)
    function initAll() { 
        for (var i=0; i<24; i++) { 
            var newNum
            do{
                newNum = colPlace[i]*15+Math.floor(Math.random()*15+1);    
            }while(usedNums[newNum])
            usedNums[newNum]=1
            document.getElementById("square" + i).innerHTML = newNum;
            document.getElementById("square" + i).className = ""; 
            document.getElementById("square" + i).onmousedown = toggleColor;
        } 
    }
    function toggleColor(evt) { 
        if (evt) { 
            var thisSquare = evt.target; 
        }else{ 
            var thisSquare = window.event.srcElement; 
        } 
        if (thisSquare.className == "") { 
            thisSquare.className = "pickedBG"; 
        }else{ 
            thisSquare.className = ""; 
        } 
    }