利用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"> </td> <td id="square5"> </td> <td id="square10"> </td> <td id="square14"> </td> <td id="square19"> </td> </tr> <tr> <td id="square1"> </td> <td id="square6"> </td> <td id="square11"> </td> <td id="square15"> </td> <td id="square20"> </td> </tr> <tr> <td id="square2"> </td> <td id="square7"> </td> <td id="free"> </td> <td id="square16"> </td> <td id="square21"> </td> </tr> <tr> <td id="square3"> </td> <td id="square8"> </td> <td id="square12"> </td> <td id="square17"> </td> <td id="square22"> </td> </tr> <tr> <td id="square4"> </td> <td id="square9"> </td> <td id="square13"> </td> <td id="square18"> </td> <td id="square23"> </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>
然后是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"); }
最后是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:没有老师检查，格式啥的，凑合看吧