Javascript构建Bingo卡片游戏

预备知识点：
1、
“< table >”表示表格，
“< tr >”表示表格的开始一行,
“< th>”表示表格中列的标题单元格，
“< td>”表示表格中的每个单元格
2、常用的字符含义
”&nbsp“表示空格
“&amp”; &
“&lt”; <
“&gt”; >
“&quot”; ”
“&qpos”; ‘

一、静态bingo区

程序代码区：
Html片段：

<!DOCTYPE html>
<html>
<head>
<title>Make Your Own Bingo Card</title>
<link rel="stylesheet" href="script01.css">
<script src="script01.js"></script>
</head>
<body>
<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">&nbsp;</td> <!--&nbsp表示空格-->
<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">Free</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="script01.html" id="reload">Click here</a> to create a new card</p>
</body>
</html>

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;
width: 20%;
}
#free, .pickedBG {
background-color: #f66;<!--控制Free的键-->
}
.winningBG {
background-image:url(images/redFlash.gif);
}

js的片段

window.onload = initAll;
//窗口的显示加载，调用initAll()函数，事件处理程序调用函数
function initAll() {for (var i=0; i<24; i++) {
var newNum = Math.floor(Math.random() * 75) + 1;
//JavaScript 命令Math.random()生成0～1 的一个随机数；floor运算会获得结果的整数部，最后获得1到最大值+1的结果
document.getElementById("square" + i).innerHTML = newNum;
}
}

静态的展示结果

修改js的代码：使用值传递的方式：

window.onload = initAll;
function initAll() {for (var i=0; i<24; i++) {
setSquare(i);
}
}
function setSquare(thisSquare) {var currSquare = "square" + thisSquare;
var newNum = Math.floor(Math.random() * 75) + 1;
document.getElementById(currSquare). innerHTML = newNum;
}

探测对象：对象探测拒绝这种老式浏览器（Mac 的Netscape 4）并显示这个错误消息。

window.onload = initAll;
function initAll() {if (document.getElementById) {
for (var i=0; i<24; i++) {
setSquare(i);
}
}
else {
alert("Sorry, your browser doesn't support this script");
}
}
function setSquare(thisSquare) {var currSquare = "square" + thisSquare;
var newNum = Math.floor (Math.random() * 75) + 1;
document.getElementById(currSquare).innerHTML = newNum;
}

**消除重复的数字：更新数组
将数组的内容改为存储当前值是一种非常强大的技术**

window.onload = initAll;
var usedNums = new Array(76);
function initAll() {if (document.getElementById) {
for (var i=0; i<24; i++) {
setSquare(i);
}
}
else {
alert("Sorry, your browser doesn't support this script");
}
}
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,3,3,3,3,3,4,4,4,4,4);
var colBasis = colPlace [thisSquare] * 15;
var newNum = colBasis + getNewNum() + 1;
if (!usedNums[newNum]) {
usedNums[newNum] = true;
document.getElementById(currSquare).innerHTML = newNum;
}
}
function getNewNum() {return Math.floor(Math.random() * 15);
}

还允许用户单击页面底部的链接来重新运行脚本，这样就可以完全在
浏览器中生成Bingo 卡片，而不需要从服务器重新加载页面。这向用户提供了快速的响应，而且不会产生服务器负载。
让用户有能力自己运行脚本：

window.onload = initAll;
var usedNums = new Array(76);
function initAll() {if (document.getElementById) {
document.getElementById("reload").onclick = anotherCard;
newCard();
}
else {
alert("Sorry, your browser doesn't support this script");
}
}
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,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;
}
function getNewNum() {return Math.floor(Math.random() * 15);
}
function anotherCard() {for (var i=1; i<usedNums.length; i++) {
usedNums[i]=false;
}
newCard();
return false;
}

通过JavaScript 添加一个类，使代码可以利用CSS 的功能

window.onload = initAll;
var usedNums = new Array(76);
function initAll() {if (document.getElementById) {
document.getElementById("reload").onclick = anotherCard;
newCard();
}
else {
alert("Sorry, your browser doesn't support this script");
}
}
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,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 getNewNum() {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 = "";
}
}

这个脚本使用复杂的数学计算判断获胜组合

window.onload = initAll;
var usedNums = new Array(76);
function initAll() {if (document.getElementById) {
document.getElementById("reload").onclick = anotherCard;
newCard();
}
else {
alert("Sorry, your browser doesn't support this script");
}
}
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,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 getNewNum() {return Math.floor(Math.random() * 15);
}
function anotherCard() {for (var i=1; i<usedNums.length; i++) {usedNums[i] = false;1
}
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 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";
setSquares = 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";
}
}
}
}

Javascript构建Bingo卡片游戏相关推荐

利用Javascript制作宾果（BINGO）游戏
Bingo游戏简介 Bingo卡片是5×5的正方形,五个列上标着B-I-N-G-O,美国的Bingo游戏格子中的数字通常在70以内随机抽取,英国和澳大利亚的是在90以内.正中间通常是一个空的格子,常常 ...
javascript做游戏_我用JavaScript构建了一个角色扮演游戏。你也可以这是如何做。...
javascript做游戏 by Robert Skalko 罗伯特·斯科尔科(Robert Skalko) 我用JavaScript构建了一个角色扮演游戏. 你也可以这是如何做. (I built ...
HTML5游戏开发进阶指南（亚马逊5星畅销书，教你用HTML5和JavaScript构建游戏！）
HTML5游戏开发进阶指南(亚马逊5星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.) 著谢光磊译 ISBN 978-7-121-21226-0 ...
bootstrap项目实例_Vue.js 项目实践——创建记忆卡片游戏
作者:Jiawei Pan 转发链接:https://mp.weixin.qq.com/s/VXPD2p7q2S3yR9I7lzAkfw 前言如果你刚开始学习 Vue,想巩固基础知识,那么你可以试试 ...
Javascript开发的HTML5游戏的知识产权保护
Javascript开发的HTML5游戏的知识产权保护,其实这里面保护了两个部分,一个是及时注册相关商标和专利,一个是程序的核心算法,核心数据和用户数据的保护. 本文主要讨论第二个方面,在当前这个时间 ...
给一个div innerhtml 后没有内容显示的问题_实战：仅用18行JavaScript构建一个倒数计时器...
有时候,你会需要构建一个JavaScript倒计时时钟.你可能会有一个活动.一个销售.一个促销或一个游戏.你可以用原生的JavaScript构建一个时钟,而不是去找一个插件.尽管有很多很棒的时钟插件, ...
视频教程-JavaScript打飞机小游戏视频教程-JavaScript
JavaScript打飞机小游戏视频教程拥有6年web前端和后端开发经验,4年授课经验,还曾在百度专业培训过网络营销课程,曾就职于联想集团和当当网,不仅有丰富的项目实战经验还有营销经验,综合实力较强 ...
如何使用 JavaScript 构建计算器应用程序
这个史诗般的教程通过描述如何使用该语言开发一个简单的计算器应用程序,为 JavaScript 新手提供了一个可靠的练习. 面向初学者的 javascript 项目(8 部分系列) 1 构建你的第一个 ...
画布式编程_构建HTML5画布游戏如何帮助我学习编程
画布式编程 by Surbhi Oberoi 由Surbhi Oberoi 构建HTML5画布游戏如何帮助我学习编程 (How building HTML5 canvas games helped m ...
JavaScript实现2048小游戏，我终于赢了一把
JavaScript实现2048小游戏作者简介作者名: 简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢 ...

Javascript构建Bingo卡片游戏

一、静态bingo区

Javascript构建Bingo卡片游戏相关推荐

最新文章

热门文章