javascript实现bingo游戏的数字生成

shukuiyan

浏览: 413809 次
性别:
来自: 北京

最近访客更多访客>>

fanghoujun

五五五

pengshuo1981h

bookboy008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

游戏 JavaScript CSS JSP 浏览器

BINGO游戏中5*5的卡片上数字是这样的：第一行5个格分别为B、I、N、G、O五个字母，下面是5行5列，通常在1-15中选择B对应的数字，16-30中选择I对应的数字，31-45中选择N对应的数字，46-60中选择G对应的数字，61-75中选择O对应的数字，而且每一类是不能重复的。

下面用js实现的该卡片上数字随机生成的过程：
一个jsp页面，用来显示卡片，代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <link rel="stylesheet" rev="stylesheet" href="<%=request.getContextPath() %>/css/bingo.css" >
	<script type="text/javascript" src="<%=request.getContextPath() %>/js/bingo.js"  charset="GBK"></script>
  </head>
  <body>
    <h1>Create A Bingo Card</h1>
    <br>
    <table border="1">
      <tr>
        <td width="20%">B</td>
        <td width="20%">I</td>
        <td width="20%">N</td>
        <td width="20%">G</td>
        <td width="20%">O</td>
      </tr>
     <tr>
        <td id="square0">&nbsp;</td>
        <td id="square1">&nbsp;</td>
        <td id="square2">&nbsp;</td>
        <td id="square3">&nbsp;</td>
        <td id="square4">&nbsp;</td>
      </tr>
      <tr>
        <td id="square5">&nbsp;</td>
        <td id="square6">&nbsp;</td>
        <td id="square7">&nbsp;</td>
        <td id="square8">&nbsp;</td>
        <td id="square9">&nbsp;</td>
      </tr>
     <tr>
        <td id="square10">&nbsp;</td>
        <td id="square11">&nbsp;</td>
        <td id="free">Free</td>
        <td id="square12">&nbsp;</td>
        <td id="square13">&nbsp;</td>
      </tr>
      <tr>
        <td id="square14">&nbsp;</td>
        <td id="square15">&nbsp;</td>
        <td id="square16">&nbsp;</td>
        <td id="square17">&nbsp;</td>
        <td id="square18">&nbsp;</td>
      </tr>
      <tr>
        <td id="square19">&nbsp;</td>
        <td id="square20">&nbsp;</td>
        <td id="square21">&nbsp;</td>
        <td id="square22">&nbsp;</td>
        <td id="square23">&nbsp;</td>
      </tr>
    </table>
    <p>
    <a href="bingo.jsp" id="reload">Click here</a> to create a new card</p>
  </body>
</html>

bingo.css代码如下：

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;
   font-size:24px;	
}
#free{
  background-color:#F66;	
}

bigno. js代码如下：

window.onload = initAll;
var usednums=new Array(76);
function initAll(){
	if(document.getElementById){
		document.getElementById("reload").onclick=anothercard;//点击链接时，执行anothercard这段js代码，不去从服务器重新加载页面
		newcard();
	}else{
	  alert("Sorry,you browser doesn't support this script!");	
	}
}
function newcard(){
		for(var i=0;i<24;i++){
			   setSquare(i);
		}
}
function setSquare(thissquare){
	var currentsquare="square"+thissquare;
	var colplace=new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
	var colbasis = colplace[thissquare]*15;
	do{
		var newnum=colbasis + getnewnum() +1;
		//确保B列为1-15 I列是16-30 N列为31-45 G列为46-60 O列为61-75,且不重复
	}while(usednums[newnum])
		
	  usednums[newnum] = true;
	  document.getElementById(currentsquare).innerHTML=newnum;
}
function getnewnum(){
	return Math.floor(Math.random()*15);
}
/*
 * 该函数将usednum数组中的元素重置为FALSE，这样就可以重新使用所有数字
 * 调用newcard函数重新生成数字
 * return FALSE；使浏览器不尝试装载链接的href
 */
function anothercard(){
  for(var i=1;i<usednums.length;i++){
	usednums[i]=false;  
  }
  newcard();
  return false;
}

生成如下：