JavaScript程序设计基础教程实训指导-3-6 实训案例名称：用循环实现Bingo卡片游戏

实训案例名称用循环实现卡片游戏Bingo案例描述

1.卡片是的方形，个列上标着格子里包含的数字正中间通常是一个空的格子，Bingo5*55B-I-N-G-0,1〜75印着单词freeo每列可以包含的数字的范围是B列包含数字1〜15；1列包含数字16〜30；N列包含数字31〜列包含数字；列包含数字45;G46〜60061〜75实现思路

2.卡片总共有个空格需要填充数字，且每个数字互不重复；每列数字有固定的取值范围这样首先Bingo24需要创建一个循环，用作循环变量，循环次；每次循环调用函数依次往卡片中的空格插入数字for i24Bingo实现代码

3.完整代码如脚本所示3-29脚本3-

29.html!DOCTYPE htmlhtmlheadtitleMakeYour OwnBingo Card/titlelink rel=,stylesheetn href=cssO

1.cssHscript src=HscriptO

1.js/script/headbodyh1Create ABingo Card/h1tabletrthB/ththl/ththN/ththG/ththO/th/trtrtd id=squareOnbsp;/tdtd id=square5nbsp;/tdtd id=square10nbsp;/tdtd id=square14nbsp;/tdtd id=square19Hnbsp;/td/trtrtd id=square1nbsp;/tdtd id=square6nbsp;/tdtd id=square11nbsp;/tdtd id=square15nbsp;/tdtd id=square20nbsp;/td/trtrtd id=square2nbsp;/tdtd id=square7nbsp;/tdtd id=freeFree/tdtd id=square16nbsp;/tdtd id=square21nbsp;/td/trtrtd id=nsquare3Hnbsp;/tdtd id=square8nbsp;/tdtd id=square12*nbsp;/tdtd id=square17nbsp;/tdtd id=square22nbsp;/td/trtrtd id=square4nbsp;/tdtd id=square9nbsp;/tdtd id=square13nbsp;/tdtd id=square18nbsp;/tdtd id=square23nbsp;/td/tr/tablepa href=”脚本3・

29.html“id=reloacTClick here/a tocreate anew card/p/body/htmlCSS

01.CSSbody{background-colonwhite;colonblack;font-size:20px;font-family:Lucida Grande1,Verdana,Arial,Helvetica,sans-serif;h1,th{font-family:Georgia,Times NewRoman,Times,serif;h1{font-size:28px;table{border-collapse:collapse;th,td{padding:10px;border:2px#666b solid;text-align:center;width:20%;#free{background-color:#f66;scriptOl.jswindow.onload=bingocard;var nums=new Array76;function bingocard{ifdocument.getElementByld{forvar i=0;i24;i++{setSquarei;}else{alertSorry,your browserdoesnt supportthis script;function setSquarethisSquare{var currSquare=square*+thisSquare;var colPlace=new Array0,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;whilenums[newnum];nums[newnum]=true;document.getElementByldcurrSquare.innerHTML=newnum;function getNewNum{return Math.floorMath.random*15;运行结果如图所示

3.52Create ABingo Card从运行结果看出，最终B列的数值范围为1〜15；1列的数值范围为16〜B IN GO30；N列的数值范围为31〜45；G列的数值范围为46〜60；O列的数值范围1420345670为脚本和搭建卡片的框架，脚本61~753-

29.html cssOl.css BingoscriptOl.js1119405772最终实现卡片填充数值Bingo;即当窗口完成加载时调用函数325Free5175window.onload=bingocard bingocardvarnums=new Array76；即将变量nums声明为一个包含76个对象的数组函数1226436069中，先用条件语句判断bingocard ififdocument.getElementById817374763「Click hee tocreate anew card图

3.52案例3・1运行结果对象是否存在，如果存在则继续脚本的执行这里定义一个for循环，用i作为循环变量循环次，目的是调用函数生成随机数填充卡片的个空格函数中定义数24setSquare Bingo24setSquare组，用来限制哪些随机数可以放在哪一列，定义列编号分别为这样每一列数字可以这样colPlace BINGO01234,来计算（列号*15）+（1〜15的随机数卜setSquare函数中do...while循环用来判断生成的随机数是否已经在卡片中使用过，这里避免生成的卡片出现重复数字Bingo Bingo。