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程序设计有所帮助。