js实现大转盘抽奖游戏实例

   本文实例讲述了js实现大转盘抽奖游戏。分享给大家供大家参考。具体实现方法如下:

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

<!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抽奖</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>
请输入1-16其中一位整数,代表要停止的位置<input id="txtnum" value="12" type="text" /><input type="button" value="开始" onclick="StartGame()" />
<script type="text/javascript">
/*
* 删除左右两端的空格
*/
function Trim(str){
return str.replace(/(^s*)|(s*$)/g, "");
}
/*
* 定义数组
*/
function GetSide(m,n){
//初始化数组
var arr = [];
for(var i=0;i<m;i++){
arr.push([]);
for(var j=0;j<n;j++){
arr[i][j]=i*n+j;
}
}
//获取数组最外圈
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, //当前亮区位置
prevIndex=0, //前一位置
Speed=300, //初始速度
Time, //定义对象
arr = GetSide(5,5), //初始化数组
EndIndex=0, //决定在哪一格变慢
tb = document.getElementById("tb"), //获取tb对象
cycle=0, //转动圈数
EndCycle=0, //计算圈数
flag=false, //结束转动标志
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){
//走五格开始加速
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="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>

  希望本文所述对大家的javascript程序设计有所帮助。

时间: 2024-10-25 12:33:35

js实现大转盘抽奖游戏实例的相关文章

js实现大转盘抽奖游戏实例_javascript技巧

本文实例讲述了js实现大转盘抽奖游戏.分享给大家供大家参考.具体实现方法如下: <!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"> <hea

大家快来玩转盘抽奖游戏(走在网页游戏开发的路上(七))

.  抽奖流程 其实我们的Flash只是一个显示作用,要转到哪个位置(中哪个奖品)是后台来完成的.而且每个奖品的概率是不同的,不是等概率的,我想没有转盘抽奖游戏是等概率的.从玩家点击"抽奖"开始到结束,与后台的交互如下: 转盘抽奖的大致流程是这样的: F  玩家点击Flash中的"抽奖"按钮: F  Flash调用web页面中的Javascript函数,告诉它玩家开始抽奖了.当然Flash调用JS的时候是带了参数的,比如是谁在抽奖等详细信息: web页面中的Java

基于 SurfaceView 详解 android 幸运大转盘,附带实例app

基于 SurfaceView 详解 android 幸运大转盘,附带实例app       首先说一下,幸运大转盘,以及SurfaceView是在看了也为大神的博客,才有了比较深刻的理解,当然这里附上这位大神的博客地址:博客地址,有兴趣的话你可以去看看,里面有很多的例子.至于我为什么要写这篇博客?,原因之一:加强自己的理解,原因之二:大神的博客就是大神的博客,跳转的太快,基础不好的,很难理解.还有就是一天在实验室太无聊了,没事写写东西.这里我再来更加基础的分析一下.写的不好,原谅.有什么写的不对

jquery——九宫格大转盘抽奖

 一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery九宫格大转盘抽奖</title> <style> #lottery{width:570px;height:510

jquery实现九宫格大转盘抽奖_jquery

下面我们来分享一个九宫格抽奖特效 特效说明: 一款jQuery九宫格大转盘抽奖代码网页特效,点击抽奖按钮开始随机抽奖选择奖品,可设置起点位置.奖品数量.转动次数.中奖位置参数.(兼容测试:IE7及以上.Firefox.Chrome.Opera.Safari.360等主流浏览器) HTML: <!--效果html开始--> <div id="lottery"> <table border="0" cellpadding="0&q

使用jQuery Rotare实现微信大转盘抽奖功能_jquery

很多公司到了年底都会做一些抽奖活动来刺激.吸引.粘住客户,比如抽奖转盘活动. 前几天用一个jqueryRotate插件实现了转盘的效果.比起那些很炫丽的flash是稍逊点,但也基本实现了需求 效果图: 实现这个其实蛮简单的,转动的效果用的jqueryRotate插件,所以只要判断每个奖荐对应的角度,然后设置指针的转动角度就可以了.比如关键的是jqueryRotate这个插件的用法. jqueryRotate的资料: 支持Internet Explorer 6.0+ .Firefox 2.0 .S

jquery实现九宫格大转盘抽奖源码

一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery九宫格大转盘抽奖</title><style>#lottery{width:570px;height:510px;marg

PHP大转盘中奖概率算法实例_php技巧

本文实例讲述了PHP大转盘中奖概率算法的实现方法,分享给大家供大家参考.具体如下: 大转盘是最近很多线上网动中一个比较有意思的东西了,下面我们就来看看这个大转盘中奖概率算法与例子,希望对各位有所帮助. 这是一个APP客户端有大转盘抽奖算法,具体如何抽奖当然在我们服务端实现了.下面和大家简单分享一下实现代码: 复制代码 代码如下: header("Content-type: text/html; charset=utf-8"); $prize_arr = array( '0' =>

PHP转盘抽奖接口实例

 这篇文章主要介绍了PHP转盘抽奖接口的实现方法,实例分析了随机抽奖接口的实现原理与对应数据库操作的技巧,需要的朋友可以参考下     本文实例讲述了PHP转盘抽奖接口的实现方法.分享给大家供大家参考.具体如下: 这里的转盘抽奖随机返回一个转盘角度,概率可自己定义 lottery_get.php接口文件如下:   代码如下: <?php /*session_start(); if(!isset($_SESSION['zaszh_user_id'])){ echo json_encode(arra