js实现大转盘抽奖游戏实例
本文实例讲述了js实现大转盘抽奖游戏。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>js抽奖</title> <styletype="text/css"> td{width:50px;height:50px;border:3pxsolid#ccc;text-align:center;vertical-align:middle} </style> </head> <body> <tableid="tb"> <tr> <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> </tr> <tr> <td>16</td><td></td><td></td><td></td><td>6</td> </tr> <tr> <td>15</td><td></td><td></td><td></td><td>7</td> </tr> <tr> <td>14</td><td></td><td></td><td></td><td>8</td> </tr> <tr> <td>13</td><td>12</td><td>11</td><td>10</td><td>9</td> </tr> </table> <p></p> 请输入1-16其中一位整数,代表要停止的位置<inputid="txtnum"value="12"type="text"/><inputtype="button"value="开始"onclick="StartGame()"/> <scripttype="text/javascript"> /* *删除左右两端的空格 */ functionTrim(str){ returnstr.replace(/(^\s*)|(\s*$)/g,""); } /* *定义数组 */ functionGetSide(m,n){ //初始化数组 vararr=[]; for(vari=0;i<m;i++){ arr.push([]); for(varj=0;j<n;j++){ arr[i][j]=i*n+j; } } //获取数组最外圈 varresultArr=[]; vartempX=0, tempY=0, direction="Along", count=0; while(tempX>=0&&tempX<n&&tempY>=0&&tempY<m&&count<m*n) { count++; resultArr.push([tempY,tempX]); if(direction=="Along"){ if(tempX==n-1) tempY++; else tempX++; if(tempX==n-1&&tempY==m-1) direction="Inverse" } else{ if(tempX==0) tempY--; else tempX--; if(tempX==0&&tempY==0) break; } } returnresultArr; } varindex=0,//当前亮区位置 prevIndex=0,//前一位置 Speed=300,//初始速度 Time,//定义对象 arr=GetSide(5,5),//初始化数组 EndIndex=0,//决定在哪一格变慢 tb=document.getElementById("tb"),//获取tb对象 cycle=0,//转动圈数 EndCycle=0,//计算圈数 flag=false,//结束转动标志 quick=0;//加速 functionStartGame(){ cycle=0; flag=false; EndIndex=Math.floor(Math.random()*16); //EndCycle=Math.floor(Math.random()*4); EndCycle=1; Time=setInterval(Star,Speed); } functionStar(num){ //跑马灯变速 if(flag==false){ //走五格开始加速 if(quick==5){ clearInterval(Time); Speed=50; Time=setInterval(Star,Speed); } //跑N圈减速 if(cycle==EndCycle+1&&index==EndIndex){ clearInterval(Time); Speed=300; flag=true;//触发结束 Time=setInterval(Star,Speed); } } if(index>=arr.length){ index=0; cycle++; } //结束转动并选中号码 if(flag==true&&index==parseInt(Trim(document.getElementById("txtnum").value))-1){ quick=0; clearInterval(Time); } tb.rows[arr[index][0]].cells[arr[index][1]].style.border="3pxsolidred"; if(index>0) prevIndex=index-1; else{ prevIndex=arr.length-1; } tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.border="3pxsolid#ccc"; index++; quick++; } /* window.onload=function(){ Time=setInterval(Star,Speed); } */ </script> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。