金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > JS数字抽奖游戏实现方法,js实现大转盘抽奖游戏

JS数字抽奖游戏实现方法,js实现大转盘抽奖游戏

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-08-29 15:55

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

本文实例讲述了js实现大转盘抽奖游戏。分享给大家供大家参考。具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 1...

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

本文实例讲述了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">
<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程序设计有所帮助。

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新年网页抽奖程序</title>
<style type="text/css">
* {margin:0; padding:0;}
ul,li {list-style-type:none;}
body {overflow:hidden;}
#back {width:100%; height:100%;
background:#f5f5f5; position:absolute; z-index:1;
}
#box {width:360px; height:100px;
position:absolute; z-index:3; top:50%; left:50%;
margin-top:-50px; margin-left:-180px; text-align:center;
}
#box1,#box2,#box3 {width:100px; height:100px;
line-height:100px;
float:left; background:#321c24; 
border:10px #321c24 solid;
border-radius:50%; position:relative; overflow:hidden;
}
#box1 ul,#box2 ul,#box3 ul {color:#fff; font-size:68px; 
font-family:"Arial Black"; text-align:center;
width:100px; height:100px; line-height:100px;
position:absolute; top:0; left:0;
}
#box1 ul li,#box2 ul li,#box3 ul li {
width:100px; height:100px;
background:red; border-radius:50%;
}
</style>
<script type="text/javascript">
var AIR = {
 $: function (id)
 {
  return typeof id === "string" ? document.getElementById(id) : id;
 }, 
 $$: function (elem, oParent)
 {
  return (oParent || document).getElementsByTagName(elem);
 },
 addEvent: function (oElement, sEvent, fnHandler) 
 {
  oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : oElement.attachEvent("on"   sEvent, fnHandler) 
 },
 removeEvent: function (oElement, sEvent, fnHandler) 
 {
  oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on"   sEvent, fnHandler)
 }, 
 getElementClient: function (){
  var arr = [];
  if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){
   arr.push(document.documentElement.clientWidth);
   arr.push(document.documentElement.clientHeight);
   return arr;
  }
 },
 getStyle: function (obj, attr)
 {
  return parseFloat(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr])
 },
 startMove: function (obj, pos, onEnd)
 {
  clearInterval(obj.timer);
  var _this = this;
  obj.timer = setInterval(function ()
  {
   _this.doMove(obj, pos, onEnd)
  }, 30) 
 },
 doMove: function (obj, pos, onEnd)
 {
  var iCurL = this.getStyle(obj, "left");
  var iCurT = this.getStyle(obj, "top");
  var iSpeedL = (pos.left - iCurL) / 5;
  var iSpeedT = (pos.top - iCurT) / 5;
  iSpeedL = iSpeedL > 0 ? Math.ceil(iSpeedL) : Math.floor(iSpeedL);
  iSpeedT = iSpeedT > 0 ? Math.ceil(iSpeedT) : Math.floor(iSpeedT);
  if (pos.left == iCurL && pos.top == iCurT)
  {
   clearInterval(obj.timer);
   onEnd && onEnd()
  }
  else
  {
   obj.style.left = iCurL   iSpeedL   "px";
   obj.style.top = iCurT   iSpeedT   "px"; 
  }
 }
}
function Draw (obj, num)
{
 this.obj = obj;
 this.num = num;
 this.data = [];
 this.result = [];
 this.show = 0;
 this.btn = true;
 this.timer = true;
 this.h = 0;
 this.uh = 0;
 this.initialize();  
}
Draw.prototype = {
 initialize: function ()
 {
  this.createArr ();
  this.createElement ();
  this.closeEvent ();
  this.startDraw (); 
 },
 createElement: function ()
 {
  for(var j=0; j<this.obj.length; j  ){ 
   var ul = document.createElement("ul");
   for(var i=0; i<10; i  ){
    var li = document.createElement("li");
    li.innerHTML = i;
    ul.appendChild(li) 
   } 
   this.obj[j].appendChild(ul);
   this.obj[j].btn = true;
   AIR.$$("ul",this.obj[j])[0].innerHTML  = AIR.$$("ul",this.obj[j])[0].innerHTML;  
  } 
  var UL = AIR.$$("ul",this.obj[0])[0];
  this.h = AIR.getStyle(AIR.$$("li",UL)[0],"height");
  this.uh = AIR.$$("li",UL).length * this.h
 },
 randomSort: function (a, b) {
  return Math.random()>.5 ? -1 : 1;
 },
 createArr: function ()
 {
  for(var i=0; i<this.num 1; i  ){
   this.data.push(i);   
  } 
  this.data.sort(this.randomSort); 
 },
 closeEvent: function ()
 {
  document.onmousedown=document.onmousemove=document.oncontextmenu=function()
  {
   return false; 
  }  
 },
 startDraw: function ()
 {
  var _this = this;
  document.onkeyup = function ( ev )
  {
   var ev = ev || window.event;
   if(ev.keyCode == 13 || ev.keyCode == 32){
    if(_this.btn && _this.timer){
     if(_this.obj[_this.obj.length-1].btn){
      _this.Play ();
      _this.btn = !_this.btn;
      _this.timer = !_this.timer; 
     }      
    }else{
     if(_this.obj[_this.obj.length-1].btn){
      _this.Stop ();
      _this.btn = !_this.btn;
      _this.timer = !_this.timer; 
     }
    }
    return false;
   }else{
    return false; 
   }
  }
 },
 Play: function ()
 {
  if(this.timer && this.btn){
   var t = 0;
   for(var i=0; i<this.obj.length; i  ){
    this.obj[i].btn = false;
    this.playTimer (this.obj[i],t); 
    t  = 1500;
   }
  }else{
   return false; 
  }
 },
 playTimer: function (obj,t)
 {
  var _this = this;
  setTimeout(function(){
   _this.Move (obj);
  },t) 
 },
 Del: function (a)
 {
  for(var i=0; i<this.data.length; i  ){
   if(a == this.data[i]){
    this.data.splice(i,1); 
   } 
  } 
 },
 Stop: function ()
 {
  if(!this.timer && !this.btn){
   var n = this.num   1;
   var r = this.data[Math.floor(Math.random() * (0-n)   n)];
   this.show = r;
   this.Del (r);
   r = r.toString().split("");
   var c = this.obj.length - r.length;
   if(r.length < this.obj.length){
    for(var i=0; i<c; i  ){
     r.unshift(0) 
    } 
   }
   this.result = r; 
   //document.title = r " : " this.data; 
   var t = 0;
   for(var i=0; i<this.obj.length; i  ){
    this.obj[i].btn = false;
    this.obj[i].index = i;
    this.obj[i].num = this.result[this.obj[i].index];
    this.stopTimer (this.obj[i],t); 
    t  = 1500;
   }
  }
 },
 stopTimer: function (obj,t)
 {
  var _this = this;
  setTimeout(function(){
   _this.showResult (obj);
  },t)
 },
 showResult: function (obj)
 { 
  var _this = this;
  this.timer = true;
  this.btn = true;
  obj.btn = false;
  obj.vh = -obj.num * this.h;
  obj.timeOut = setInterval(function(){
   obj.speed -= 1;
   if(obj.speed == 1){
    clearInterval(obj.timeOut); 
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
     if(obj.ul.offsetTop >= obj.vh){
      clearInterval(obj.timer);
      AIR.startMove(obj.ul,{left:0,top:obj.vh},function(){
       obj.btn = true; 
       var set = true;
       for(var i=0; i<_this.obj.length; i  ){
        if(!_this.obj[i].btn){
         set = false;  
        }
       }
       if(set){
        _this.Open(_this.show) 
       }
      });
     }
     obj.ul.style.top = obj.ul.offsetTop   obj.speed  "px"; 
    },30);
   }
  },100);  
 },
 Open: function (num)
 {
  document.title  = " "  num;
 },
 Move: function (obj)
 {
  var _this = this;
  var obj = obj;
  obj.btn = false;
  obj.timer = null;
  obj.speed = 1;
  obj.ul = AIR.$$("ul",obj)[0];
  obj.ul.style.height = this.uh  "px";
  obj.timer = setInterval(function(){
   if(obj.ul.offsetTop > 0){
    obj.ul.style.top = -(_this.uh/2)  "px";
   }
   obj.ul.style.top = obj.ul.offsetTop   obj.speed  "px"; 
  },30);
  obj.timeOut = setInterval(function(){
   obj.speed  = 1;
   if(obj.speed == 30){
    clearInterval(obj.timeOut);
    obj.btn = true; 
   }
  },300) 
 }
}
var initialize = function ()
{
 new Draw ([AIR.$("box1"),AIR.$("box2"),AIR.$("box3")],100);
 reSize ();
}
var reSize = function ()
{
 var v = AIR.getElementClient();
 AIR.$$("img",AIR.$("back"))[0].width = v[0];
 AIR.$$("img",AIR.$("back"))[0].height = v[1]; 
}
AIR.addEvent(window,"load",initialize);
AIR.addEvent(window,"resize",reSize);
</script>
</head>
<body>
<div id="box">
 <div id="box1"></div>
 <div id="box2"></div>
 <div id="box3"></div>
 <div style="clear:both"></div>
</div>
<div id="back">
 <img src="images/20153291274950386.jpg" />
</div>
<div id="showback">100</div>
</body>
</html>

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

您可能感兴趣的文章:

  • jquery 年会抽奖程序
  • jQuery PHP实现的掷色子抽奖游戏实例
  • js实现简单随机抽奖的方法
  • PHP转盘抽奖接口实例
  • php随机抽奖实例分析
  • jQuery实现转动随机数抽奖效果的方法
  • js实现大转盘抽奖游戏实例
  • js实现简易的单数字随机抽奖(0-9)
  • JS实现转动随机数抽奖的特效代码
  • jQuery实现类似老虎机滚动抽奖效果
  • jQuery实现大转盘抽奖活动仿QQ音乐代码分享

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:JS数字抽奖游戏实现方法,js实现大转盘抽奖游戏

关键词: