JavaScript基础教程第8版-例1-Bingo卡片游戏
1基础工作<h1>Create A Bingo Card</h1><table><tr><th>B</th><th>I</th><th>N</th><th>G</th><th>O</th>
·
1基础工作
<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="test.html" id="reload">Click here</a> to create a new card</p>
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;
}
.winningBG {
background-image:url(images/redFlash.gif);
}
二、
存入随机数字
window.onload = initAll;
function initAll() {
for (var i=0; i<24; i++) {
var newNum = Math.floor(Math.random() * 75) + 1;
document.getElementById("square" + i).innerHTML = newNum;
}
}
三、
修复规则：在真实的 Bingo 卡片上，每列具有不同的数字范围：B 列是 1～15，I 列是 16～30，N 列是 31～45，G 列是 46～60，O 列是 61～75。
window.onload = initAll;
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);
function initAll() {
for (var i=0; i<24; i++) {
var newNum = colPlace[i]*15+Math.floor(Math.random()*15+1);
document.getElementById("square" + i).innerHTML = newNum;
}
}
四、
修复规则：去除重复的
window.onload = initAll;
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 usedNums = new Array(76)
function initAll() {
for (var i=0; i<24; i++) {
var newNum = colPlace[i]*15+Math.floor(Math.random()*15+1);
if(!usedNums[newNum]){
usedNums[newNum]=1
document.getElementById("square" + i).innerHTML = newNum;
}
}
}
五、
修复规则：填补空缺
window.onload = initAll;
var usedNums = new Array(76)
function initAll() {
for (var i=0; i<24; i++) {
var newNum
do{
newNum = Math.floor(i/5)*15+Math.floor(Math.random()*15+1);
}while(usedNums[newNum])
usedNums[newNum]=1
document.getElementById("square" + i).innerHTML = newNum;
}
}
六、
修复规则：点击变色
window.onload = initAll;
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 usedNums = new Array(76)
function initAll() {
for (var i=0; i<24; i++) {
var newNum
do{
newNum = colPlace[i]*15+Math.floor(Math.random()*15+1);
}while(usedNums[newNum])
usedNums[newNum]=1
document.getElementById("square" + i).innerHTML = newNum;
document.getElementById("square" + i).className = "";
document.getElementById("square" + i).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 = "";
}
}
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
3
0- 0
已为社区贡献7条内容
所有评论(0)