利用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:没有老师检查，格式啥的，凑合看吧
时间： 2024-10-07 13:34:07