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: px;
font-family: "Lucida Grande", Verdana,Arial, Helvetica, sans-serif;
}
h1, th {
font-family: Georgia, "Times New Roman",Times, serif;
}
h1 {
font-size: px;
}
table {
border-collapse: collapse;
}
th, td {
padding: px;
border: px #666 solid;
text-align: center;
width: %;
}
#free, .pickedBG {
background-color: #f66;<!--控制Free的鍵-->
}
.winningBG {
background-image:url(images/redFlash.gif);
}

js的片段

window.onload = initAll;
//視窗的顯示加載，調用initAll()函數，事件處理程式調用函數
function initAll() {
for (var i=; i<; i++) {
var newNum = Math.floor(Math.random() * ) + ;
//JavaScript 指令Math.random()生成0～1 的一個随機數；floor運算會獲得結果的整數部，最後獲得1到最大值+1的結果
document.getElementById("square" + i).innerHTML = newNum;
}
}

靜态的展示結果

Javascript建構Bingo卡片遊戲

修改js的代碼：使用值傳遞的方式：

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

探測對象：對象探測拒絕這種老式浏覽器（Mac 的Netscape 4）并顯示這個錯誤消息。

window.onload = initAll;
function initAll() {
if (document.getElementById) {
for (var i=; i<; 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() * ) + ;
document.getElementById(currSquare).innerHTML = newNum;
}

**消除重複的數字：更新數組

将數組的内容改為存儲目前值是一種非常強大的技術**

window.onload = initAll;
var usedNums = new Array();
function initAll() {
if (document.getElementById) {
for (var i=; i<; i++) {
setSquare(i);
}
}
else {
alert("Sorry, your browser doesn't support this script");
}
}
function setSquare(thisSquare) {
var currSquare = "square" + thisSquare;
var colPlace = new Array(,,,,,,,,,,,,,,,,,,,,,,,);
var colBasis = colPlace [thisSquare] * ;
var newNum = colBasis + getNewNum() + ;
if (!usedNums[newNum]) {
usedNums[newNum] = true;
document.getElementById(currSquare).innerHTML = newNum;
}
}
function getNewNum() {
return Math.floor(Math.random() * );
}

還允許使用者單擊頁面底部的連結來重新運作腳本，這樣就可以完全在

浏覽器中生成Bingo 卡片，而不需要從伺服器重新加載頁面。這向使用者提供了快速的響應，而且不會産生伺服器負載。

讓使用者有能力自己運作腳本：

window.onload = initAll;
var usedNums = new Array();
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=; i<; i++) {
setSquare(i);
}
}
function setSquare(thisSquare) {
var currSquare = "square" + thisSquare;
var colPlace = new Array(,,,,,,,,,,,,,,,,,,,,,,,);
var colBasis = colPlace thisSquare] * ;
var newNum;
do {
newNum = colBasis + getNewNum() + ;
}
while (usedNums[newNum]);
usedNums[newNum] = true;
document.getElementById(currSquare).innerHTML = newNum;
}
function getNewNum() {
return Math.floor(Math.random() * );
}
function anotherCard() {
for (var i=; i<usedNums.length; i++) {
usedNums[i]=false;
}
newCard();
return false;
}

通過JavaScript 添加一個類，使代碼可以利用CSS 的功能

window.onload = initAll;
var usedNums = new Array();
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=; i<; i++) {
setSquare(i);
}
}
function setSquare(thisSquare) {
var currSquare = "square" + thisSquare;
var colPlace = new Array(,,,,,,,,,,,,,,,,,,,,,,,);
var colBasis = colPlace [thisSquare] * ;
var newNum;
do {
newNum = colBasis + getNewNum() + ;
}
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() * );
}
function anotherCard() {
for (var i=; 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();
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=; i<; i++) {
setSquare(i);
}
}
function setSquare(thisSquare) {
var currSquare = "square" + thisSquare;
var colPlace = new Array(,,,,,,,,,,,,,,,,,,,,,,,);
var colBasis = colPlace [thisSquare] * ;
var newNum;
do {newNum = colBasis + getNewNum() + ;
}
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() * );
}
function anotherCard() {
for (var i=; 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 = -;
var setSquares = ;
var winners = new Array(,,,,,,,,,,,);
for (var i=; i<; i++) {
var currSquare = "square" + i;
if (document.getElementById (currSquare).className != "") {
document.getElementById (currSquare).className = "pickedBG";
setSquares = setSquares | Math.pow(,i);
}
}
for (var i=; i<winners.length; i++) {
if ((winners[i] & setSquares) == winners[i]) {
winningOption = i;
}
}
if (winningOption > -) {
for (var i=; i<; i++) {
if (winners[winningOption] & Math.pow(,i)) {
currSquare = "square" + i;
document.getElementById (currSquare).className = "winningBG";
}
}
}
}

Javascript建構Bingo卡片遊戲

一、靜态bingo區

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條