利用Javascript制作宾果（BINGO）游戏

Bingo游戏简介

Bingo卡片是5×5的正方形，五个列上标着B-I-N-G-O，美国的Bingo游戏格子中的数字通常在70以内随机抽取，英国和澳大利亚的是在90以内。正中间通常是一个空的格子，常常印着单词free。每列可以包含的数字范围如下：

B列包含着数字1~15

I列包含着数字16~30

N列包含着数字31~45

G列包含着数字46~60

O列包含着数字61~75

游戏规则：参与游戏的人没人拿一张Bingo，又另外一个人或专业人士叫号或随机抽取号码，就像拍卖会一样，游戏者根据叫号，迅速标出卡片上的这些数字，若有一个游戏者中奖，那么这一轮游戏就算结束。中奖样式有多种多样，BINGO可以是垂直、水平、或对角线分布的。美国的Bingo中奖方式有12种，即5横行，5纵列再加两个对角线。如下图是一种中奖方式：

现在，利用HTML+CSS+Javascript来制作一个bingo卡片，来进行宾果游戏。

如下是HTML代码：

<body>
<center>
<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"> </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">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="./3.1.html" id="reload">Click here</a>to create a new card</p>
</center>
</body>

以下是CSS代码：

<style type="text/css">
body {
background-color:#FFF;
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 solid #666;
text-align:center;
width:20%
}
#free, .pickedBG {
background-color: #f66;
}
.winningBG {
background-p_w_picpath: url(p_w_picpaths/redFlash.gif);
}
</style>

以下是Javascript代码：

<script type="text/javascript">
window.onload = initAll;
var usedNums = new Array(76);
function initAll(){
document.getElementById("reload").onclick = anotherCard;
newCard();
}
function newCard(){
for(var i=0;i<24;i++){
setSquare(i);
}
}
function setSquare(thisSquare){
var currSquare = "square" + thisSquare;
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
var colBasis = colPlace[thisSquare] * 15;
var newNum;
do{
newNum = colBasis + getNewNum()+1;
}while(usedNums[newNum]);
usedNums[newNum] = true;
document.getElementById(currSquare).innerHTML = newNum;
document.getElementById(currSquare).className = "";
document.getElementById(currSquare).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 = "";
}
checkWin();
}
function getNewNum(){
return Math.floor(Math.random()*15);
}
function anotherCard(){
for(var i=1;i<usedNums.length;i++){
usedNums[i]=false;
}
newCard();
return false;
}
function checkWin(){ <!--检验是否获胜>
var winningOption = -1;
var setSquares = 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 currSquare = "square"+i;
if(document.getElementById(currSquare).className != ""){
document.getElementById(currSquare).className = "pickedBG";
setSquaressetSquares = setSquares | Math.pow(2,i);
}
}
for(var i=0;i<winners.length;i++){
if((winners[i] & setSquares) == winners[i]){
winningOption = i;
}
}
if(winningOption > -1){
for(var i=0;i<24;i++){
if(winners[winningOption] & Math.pow(2,i)){
currSquare = "square" + i;
document.getElementById(currSquare).className = "winningBG";
}
}
}
}
</script>

转载于:https://blog.51cto.com/kaixinbocai/1081627

利用Javascript制作宾果（BINGO）游戏相关推荐

利用JavaScript制作倒计时牌(转)
利用JavaScript制作倒计时牌五一劳动节很快就到了.哈哈,到时可以出去好好玩一玩了.是不是在掐指计算了.下面教你一种方法在网页上面制作倒计时牌,这样就方便多了. 把下面的JavaScript代 ...
android打地鼠设计报告,android开发中利用handler制作一个打地鼠小游戏
android开发中利用handler制作一个打地鼠小游戏发布时间:2020-11-25 15:21:11 来源:亿速云阅读:136 作者:Leah 这期内容当中小编将会给大家带来有关androi ...
python制作阴阳师脚本_利用python制作一个阴阳师小游戏
利用python制作一个阴阳师小游戏发布时间:2020-11-27 13:59:49 来源:亿速云阅读:84 这期内容当中小编将会给大家带来有关利用python制作一个阴阳师小游戏,文章内容丰富且 ...
java中的纸牌游戏_Java中的宾果纸牌游戏
我为Java中的宾果游戏创建了两种方法.一种方法创建一个新的板,根据宾果规则(1-75)用宾果板填充宾果板.我的第二种方法生成范围为1-75的随机数. public static int drawNu ...
python连连看小游戏_利用Python制作一个连连看小游戏，边学边玩！
导语今天我们将制作一个连连看小游戏,让我们愉快地开始吧~ 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块环境搭建安装Python并添加到环 ...
利用JavaScript写猜数字小游戏
要求: 在页面中写一个猜数字的游戏: 要求: 1)生成0~100之间的随机数,让用户猜 2)输入错误需要提示,并让用户重新输入 3)输入正确,提示正确,并询问是否继续游戏结果如下: ...
利用python制作自己的小游戏，超简教程
懒得客套,直接步入主题首先,利用python来做游戏需要用到python中的pygame模块,这个我们在终端cmd中安装输入:pip install pygame 安装好后我们进入pycharm查 ...
JavaScript制作贪吃蛇小游戏
目录效果展示原理分析 Game.js文档 Snake.js文档 Food.js文档附上源代码写了这么久的代码是否你和我一样感到枯燥乏味了呢? 是否没有前进的动力了呢? 别忘了当时的你踌躇满志 ...
用canvas,javascript制作“坦克大战“小游戏
游戏截图这个是游戏做出来的效果: 用到的图片资源: 这里把所有的坦克动画所需的图片,地形图片等放在了一张图中,使用的时候就可以通过截取一部分来使用. 游戏代码下面就是整个游戏目前的代码,有什么建议 ...

利用Javascript制作宾果（BINGO）游戏

利用Javascript制作宾果（BINGO）游戏相关推荐

最新文章

热门文章