js實(shí)現(xiàn)大轉(zhuǎn)盤(pán)抽獎(jiǎng)游戲?qū)嵗?/h1>
更新時(shí)間:2015年06月24日 16:54:31 作者:一把汗
這篇文章主要介紹了js實(shí)現(xiàn)大轉(zhuǎn)盤(pán)抽獎(jiǎng)游戲的方法,實(shí)例分析了javascript基于數(shù)組、隨機(jī)數(shù)等實(shí)現(xiàn)抽獎(jiǎng)游戲的技巧,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)大轉(zhuǎn)盤(pán)抽獎(jiǎng)游戲。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js抽獎(jiǎng)</title>
<style type="text/css">
td{width:50px;height:50px;border:3px solid #ccc;text-align:center;vertical-align:middle}
</style>
</head>
<body>
<table id="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>
請(qǐng)輸入1-16其中一位整數(shù),代表要停止的位置<input id="txtnum" value="12" type="text" /><input type="button" value="開(kāi)始" onclick="StartGame()" />
<script type="text/javascript">
/*
* 刪除左右兩端的空格
*/
function Trim(str){
return str.replace(/(^\s*)|(\s*$)/g, "");
}
/*
* 定義數(shù)組
*/
function GetSide(m,n){
//初始化數(shù)組
var arr = [];
for(var i=0;i<m;i++){
arr.push([]);
for(var j=0;j<n;j++){
arr[i][j]=i*n+j;
}
}
//獲取數(shù)組最外圈
var resultArr=[];
var tempX=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;
}
}
return resultArr;
}
var index=0, //當(dāng)前亮區(qū)位置
prevIndex=0, //前一位置
Speed=300, //初始速度
Time, //定義對(duì)象
arr = GetSide(5,5), //初始化數(shù)組
EndIndex=0, //決定在哪一格變慢
tb = document.getElementById("tb"), //獲取tb對(duì)象
cycle=0, //轉(zhuǎn)動(dòng)圈數(shù)
EndCycle=0, //計(jì)算圈數(shù)
flag=false, //結(jié)束轉(zhuǎn)動(dòng)標(biāo)志
quick=0; //加速
function StartGame(){
cycle=0;
flag=false;
EndIndex=Math.floor(Math.random()*16);
//EndCycle=Math.floor(Math.random()*4);
EndCycle=1;
Time = setInterval(Star,Speed);
}
function Star(num){
//跑馬燈變速
if(flag==false){
//走五格開(kāi)始加速
if(quick==5){
clearInterval(Time);
Speed=50;
Time=setInterval(Star,Speed);
}
//跑N圈減速
if(cycle==EndCycle+1 && index==EndIndex){
clearInterval(Time);
Speed=300;
flag=true; //觸發(fā)結(jié)束
Time=setInterval(Star,Speed);
}
}
if(index>=arr.length){
index=0;
cycle++;
}
//結(jié)束轉(zhuǎn)動(dòng)并選中號(hào)碼
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="3px solid red";
if(index>0)
prevIndex=index-1;
else{
prevIndex=arr.length-1;
}
tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.border="3px solid #ccc";
index++;
quick++;
}
/*
window.onload=function(){
Time = setInterval(Star,Speed);
}
*/
</script>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
-
再談JavaScript中bind、call、apply三個(gè)方法的區(qū)別與使用方式
這篇文章主要介紹了Javascript中bind、call、apply三個(gè)方法的使用方式,需要的朋友可以參考下 2022-05-05
-
javascript循環(huán)鏈表之約瑟夫環(huán)的實(shí)現(xiàn)方法
這是一道比較經(jīng)典的循環(huán)鏈表問(wèn)題,在華為上機(jī)筆試中也出現(xiàn)過(guò)。
約瑟夫環(huán)是一個(gè)數(shù)學(xué)的應(yīng)用問(wèn)題,下面這篇文章主要就給大家介紹了javascript循環(huán)鏈表之約瑟夫環(huán)的實(shí)現(xiàn)方法,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。 2017-01-01
-
純JavaScript實(shí)現(xiàn)HTML5 Canvas六種特效濾鏡示例
實(shí)現(xiàn)了六款簡(jiǎn)單常見(jiàn)HTML5 Canvas特效濾鏡,并且封裝成一個(gè)純JavaScript可調(diào)用的API文件gloomyfishfilter.js,程序源代碼如下,感興趣的朋友可以參考下哈 2013-06-06
-
JavaScript中json數(shù)組查找數(shù)據(jù)的幾種方式(含模糊查找)
這篇文章主要給大家介紹了關(guān)于JavaScript中json數(shù)組查找數(shù)據(jù)的幾種方式,文中包括模糊查找,文中給出了詳細(xì)的代碼示例,對(duì)大家學(xué)習(xí)或者使用json具有一定的參考借鑒價(jià)值,需要的朋友可以參考下 2023-09-09
-
js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽的方法,涉及javascript鼠標(biāo)點(diǎn)擊事件及頁(yè)面元素的遍歷技巧,需要的朋友可以參考下 2015-08-08
-
JavaScript實(shí)現(xiàn)生成隨機(jī)密碼的示例詳解
使用JavaScript我們可以輕松地在客戶端生成隨機(jī)密碼,本文我們將實(shí)現(xiàn)一個(gè)簡(jiǎn)單的隨機(jī)密碼生成器,能夠生成指定長(zhǎng)度和包含特定字符集的密碼,有需要的可以參考下 2024-01-01
-
原生javascript運(yùn)動(dòng)函數(shù)的封裝示例【勻速、拋物線、多屬性的運(yùn)動(dòng)等】
這篇文章主要介紹了原生javascript運(yùn)動(dòng)函數(shù)的封裝,結(jié)合實(shí)例形式分析了JavaScript封裝勻速、拋物線、多屬性的運(yùn)動(dòng)等函數(shù)及相關(guān)使用方法,需要的朋友可以參考下 2020-02-02
-
微信小程序?qū)崿F(xiàn)滾動(dòng)加載更多的代碼
這篇文章通過(guò)實(shí)例代碼給大家介紹了微信小程序?qū)崿F(xiàn)滾動(dòng)加載更多,給大家提供了完整代碼,需要的朋友可以參考下 2019-12-12
-
js圖片實(shí)時(shí)加載提供網(wǎng)頁(yè)打開(kāi)速度
沒(méi)必要一開(kāi)始加載就要把全部圖片加載出來(lái),這樣子打開(kāi)網(wǎng)面的速度得到了很好提高,下面有個(gè)不錯(cuò)的思路,大家可以看看 2014-09-09
最新評(píng)論
本文實(shí)例講述了js實(shí)現(xiàn)大轉(zhuǎn)盤(pán)抽獎(jiǎng)游戲。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js抽獎(jiǎng)</title> <style type="text/css"> td{width:50px;height:50px;border:3px solid #ccc;text-align:center;vertical-align:middle} </style> </head> <body> <table id="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> 請(qǐng)輸入1-16其中一位整數(shù),代表要停止的位置<input id="txtnum" value="12" type="text" /><input type="button" value="開(kāi)始" onclick="StartGame()" /> <script type="text/javascript"> /* * 刪除左右兩端的空格 */ function Trim(str){ return str.replace(/(^\s*)|(\s*$)/g, ""); } /* * 定義數(shù)組 */ function GetSide(m,n){ //初始化數(shù)組 var arr = []; for(var i=0;i<m;i++){ arr.push([]); for(var j=0;j<n;j++){ arr[i][j]=i*n+j; } } //獲取數(shù)組最外圈 var resultArr=[]; var tempX=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; } } return resultArr; } var index=0, //當(dāng)前亮區(qū)位置 prevIndex=0, //前一位置 Speed=300, //初始速度 Time, //定義對(duì)象 arr = GetSide(5,5), //初始化數(shù)組 EndIndex=0, //決定在哪一格變慢 tb = document.getElementById("tb"), //獲取tb對(duì)象 cycle=0, //轉(zhuǎn)動(dòng)圈數(shù) EndCycle=0, //計(jì)算圈數(shù) flag=false, //結(jié)束轉(zhuǎn)動(dòng)標(biāo)志 quick=0; //加速 function StartGame(){ cycle=0; flag=false; EndIndex=Math.floor(Math.random()*16); //EndCycle=Math.floor(Math.random()*4); EndCycle=1; Time = setInterval(Star,Speed); } function Star(num){ //跑馬燈變速 if(flag==false){ //走五格開(kāi)始加速 if(quick==5){ clearInterval(Time); Speed=50; Time=setInterval(Star,Speed); } //跑N圈減速 if(cycle==EndCycle+1 && index==EndIndex){ clearInterval(Time); Speed=300; flag=true; //觸發(fā)結(jié)束 Time=setInterval(Star,Speed); } } if(index>=arr.length){ index=0; cycle++; } //結(jié)束轉(zhuǎn)動(dòng)并選中號(hào)碼 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="3px solid red"; if(index>0) prevIndex=index-1; else{ prevIndex=arr.length-1; } tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.border="3px solid #ccc"; index++; quick++; } /* window.onload=function(){ Time = setInterval(Star,Speed); } */ </script> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
再談JavaScript中bind、call、apply三個(gè)方法的區(qū)別與使用方式
這篇文章主要介紹了Javascript中bind、call、apply三個(gè)方法的使用方式,需要的朋友可以參考下2022-05-05javascript循環(huán)鏈表之約瑟夫環(huán)的實(shí)現(xiàn)方法
這是一道比較經(jīng)典的循環(huán)鏈表問(wèn)題,在華為上機(jī)筆試中也出現(xiàn)過(guò)。 約瑟夫環(huán)是一個(gè)數(shù)學(xué)的應(yīng)用問(wèn)題,下面這篇文章主要就給大家介紹了javascript循環(huán)鏈表之約瑟夫環(huán)的實(shí)現(xiàn)方法,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-01-01純JavaScript實(shí)現(xiàn)HTML5 Canvas六種特效濾鏡示例
實(shí)現(xiàn)了六款簡(jiǎn)單常見(jiàn)HTML5 Canvas特效濾鏡,并且封裝成一個(gè)純JavaScript可調(diào)用的API文件gloomyfishfilter.js,程序源代碼如下,感興趣的朋友可以參考下哈2013-06-06JavaScript中json數(shù)組查找數(shù)據(jù)的幾種方式(含模糊查找)
這篇文章主要給大家介紹了關(guān)于JavaScript中json數(shù)組查找數(shù)據(jù)的幾種方式,文中包括模糊查找,文中給出了詳細(xì)的代碼示例,對(duì)大家學(xué)習(xí)或者使用json具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽的方法,涉及javascript鼠標(biāo)點(diǎn)擊事件及頁(yè)面元素的遍歷技巧,需要的朋友可以參考下2015-08-08JavaScript實(shí)現(xiàn)生成隨機(jī)密碼的示例詳解
使用JavaScript我們可以輕松地在客戶端生成隨機(jī)密碼,本文我們將實(shí)現(xiàn)一個(gè)簡(jiǎn)單的隨機(jī)密碼生成器,能夠生成指定長(zhǎng)度和包含特定字符集的密碼,有需要的可以參考下2024-01-01原生javascript運(yùn)動(dòng)函數(shù)的封裝示例【勻速、拋物線、多屬性的運(yùn)動(dòng)等】
這篇文章主要介紹了原生javascript運(yùn)動(dòng)函數(shù)的封裝,結(jié)合實(shí)例形式分析了JavaScript封裝勻速、拋物線、多屬性的運(yùn)動(dòng)等函數(shù)及相關(guān)使用方法,需要的朋友可以參考下2020-02-02微信小程序?qū)崿F(xiàn)滾動(dòng)加載更多的代碼
這篇文章通過(guò)實(shí)例代碼給大家介紹了微信小程序?qū)崿F(xiàn)滾動(dòng)加載更多,給大家提供了完整代碼,需要的朋友可以參考下2019-12-12js圖片實(shí)時(shí)加載提供網(wǎng)頁(yè)打開(kāi)速度
沒(méi)必要一開(kāi)始加載就要把全部圖片加載出來(lái),這樣子打開(kāi)網(wǎng)面的速度得到了很好提高,下面有個(gè)不錯(cuò)的思路,大家可以看看2014-09-09