BINGO游戏

利用javascript实现bingo小游戏，感觉挺无聊的游戏，主要是为了学习javascript，我把功能添加的过程逐步加上去，这样是一个学习的过程

HTML代码部分，比较简单，我就折叠起来好了

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css_01.css">
    <title>Make your own Bingo Card</title>
</head>
<body>
<h1>create your own 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">&nbsp;</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="Bingo.html" id="reload">Click here</a>to create a new card </p>
</body>
</html>
<script src="js_01.js"></script>

View Code

然后是css部分，也折叠啦，.winningBG这个图片大家随便找个图片就行，我也不会上传，效果出来就Ok啦

body{
    background: white;
    color: black;
    font-size: 20px;
    font-family:verdana, helvetica, arial, sans-serif;
    font-weight: 900;
}

h1,th{
    font-family:verdana, helvetica, arial, sans-serif;
}

h1{
    font-size: 28px;
}

table{
    border-collapse: collapse;
}

th,td{
    padding: 10px;
    border: 2px #666 solid;
    text-align: center;
    width: 20px;
}

#free, .pickedBG{
    background-color: #f66;
}

.winningBG{
    background-image: url("img.jpg");
}

View Code

最后是Javascript部分的，我加上详细注释，大家可以看看吧，包含了挺多知识点的

/**
 * Created by rui on 2015/5/5.
 */
/** 利用脚本自动填充数据，很有意思了啊。。。。*/

/**
 * 开发步骤
 * 1.B列1-15 I列16-30 N列31-45 G列46-60 O列61-75,限定数值范围
 * 2.去掉列元素重合的情况，通过在运行时更新数组的方式
 * 3.组合使用javascript和css来对点击事件进行操作
 * 4.判胜情况，这部分代码我就是随便抄抄的
 */

window.onload=initAll;
var usedNums=new Array(76);

function initAll(){
    if(document.getElementById) {
        document.getElementById("reload").onclick=anotherCard;
        newCard();
    }else{
        alert("sorry,浏览器不支持！")
    }
}

function newCard(){
    for(var i=0;i<24;i++) {
        setSquare(i);
    }
}

function setSquare(thisSquare){
    var currentSquare="square"+thisSquare;
    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 colBasic=colPlace[thisSquare]*15;
    var newNum;
    do{
        newNum=colBasic+getNum()+1;
    }while(usedNums[newNum]);

    //将数组的内容改为存储当前值
    usedNums[newNum]=true;
    document.getElementById(currentSquare).innerHTML=newNum;
    document.getElementById(currentSquare).className="";
    document.getElementById(currentSquare).onmousedown=toggleColor;
}

function getNum(){
    return Math.floor(Math.random()*15);
}

function anotherCard(){
    for(var i=1;i<usedNums.length;i++){
        usedNums[i]=false;
    }
    newCard();
    return false;
}

function toggleColor(evt){
    if(evt){
        var thisSquare=evt.target;
    }
    else{
        var thisSquare=window.event.srcElement;
    }
    if(thisSquare.className==""){
        thisSquare.className="pickedBG";
    }
    else{
        thisSquare.className="";
    }
    checkwin();
}

function checkwin(){
    var winningOption=-1;
    var setSquare=0;
    var winners=new Array(31,992,15360,507904,541729,557328,1083458,2162820,4329736,8519745,8659472,16252928);

    for(var i=0;i<24;i++){
        var currentSquare="square"+i;
        if(document.getElementById(currentSquare).className!=""){
            document.getElementById(currentSquare).className="pickedBG";
            setSquare=setSquare|Math.pow(2,i);
        }
    }

    for(var i=0;i<winners.length;i++){
        if((winners[i]&setSquare)==winners[i]){
            winningOption=i;
        }
    }

    if(winningOption>-1){
        for(var i=0;i<24;i++){
            if(winners[winningOption]&Math.pow(2,i)){
                currentSquare="square"+i;
                document.getElementById(currentSquare).className="winningBG";
            }
        }
    }
}

这个实例是根据《javascript基础教程(第八版)》写的，这本书从第一章就直接上例子感觉很有意思啊，学的东西比较多。

ps:抱怨一下javascript开发好烦啊，各种错误根本就没有提示，唯一调试的方法就是找效果和心理预期的差别然后慢慢琢磨，不知道大神有没有更方便的调试工具什么的，我用的开发工具是WebStorm开发感觉挺方便，调试就很揪心啦。。。。

ps:听说写博客需要很高的水平，不然还是不要拿出来丢人现眼了，可是我估计了一下我的情况，恐怕没啥机会能写了，所以我决定，出来丢人现眼好啦，就把每天做的一些事情记下来，反正不发布在博客我也会记在笔记里面，差不多啦。。。

ps:没有老师检查，格式啥的，凑合看吧