登录
当前位置： 首页 > 编程笔记 >

JS数字抽奖游戏实现方法

路伟
2023-03-14
本文向大家介绍JS数字抽奖游戏实现方法，包括了JS数字抽奖游戏实现方法的使用技巧和注意事项，需要的朋友参考一下

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

 类似资料：
  • 井字游戏Java抽奖小游戏

    所以我为我的课做了一个抽动练习作业。我已经成功地创建了一个简单的Tic Tac Toe程序，但不知何故，检查绘制的方法有时并不正确。如果所有东西都填满了，但没有赢家，那就是平局。但如果除第0行第1列外，其他所有内容都已填满，则即使该框仍为空白，它仍将显示“Draw”。如果你不明白我的意思，就试着把所有的东西都填满，但不是赢，即使最后一个框没有填满，它也会说“平局”。我在代码中做错了什么？？？？驱动

  • python3实现小球转动抽奖小游戏

    本文向大家介绍python3实现小球转动抽奖小游戏，包括了python3实现小球转动抽奖小游戏的使用技巧和注意事项，需要的朋友参考一下 最近老师在讲 tkinter,所以我做了一个抽奖小游戏。 一、效果图 先上效果图。红色的小球会围绕蓝色小球做环形运动。我设置的四个角是奖品，其余的都是再接再厉。 二、方法 基于tkinter中的button,text,PIL ,time.Canvas drawPa

  • js实现抽奖的两种方法

    本文向大家介绍js实现抽奖的两种方法，包括了js实现抽奖的两种方法的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现抽奖的具体代码，供大家参考，具体内容如下 抽奖活动的原理还是很简单的，通过代码一目了然，如果看不懂就私聊我，可以私下交流！ 方法一：使用table写一个随机抽奖 这是html+js代码 方法二：使用span标签写 html+js代码如下 两个页面的css代码 以上

  • js实现抽奖效果

    本文向大家介绍js实现抽奖效果，包括了js实现抽奖效果的使用技巧和注意事项，需要的朋友参考一下 效果图： 代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！

  • js实现随机抽奖

    本文向大家介绍js实现随机抽奖，包括了js实现随机抽奖的使用技巧和注意事项，需要的朋友参考一下 前言 在前端的开发当中，我们肯定会遇到随机抽奖的需求。我们要怎么去实现呢？下面就来分享随机抽奖的JS代码，有需要的小伙伴可以复制到编译器当中运行查看效果。 随机抽奖的JS代码 小编还为大家准备了精彩的专题：javascript经典小游戏汇总 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多

  • jQuery+PHP实现的掷色子抽奖游戏实例

    本文向大家介绍jQuery+PHP实现的掷色子抽奖游戏实例，包括了jQuery+PHP实现的掷色子抽奖游戏实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery+PHP实现的掷色子抽奖游戏详细步骤。分享给大家供大家参考。具体分析如下： 该游戏是以大富翁游戏为背景，综合运用jQuery和PHP知识，设计出以掷色子点数来达成抽奖的效果，当然抽奖概率是可控的，开发者可以将本实例稍作修改

  • JS实现打字游戏

    本文向大家介绍JS实现打字游戏，包括了JS实现打字游戏的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JS实现打字游戏的具体代码，供大家参考，具体内容如下 第一步：页面的排版和布局 1.1实现开始游戏的界面 1.1.1开始游戏 1.1.2游戏说明 1.2进入游戏的界面 1.2.1开始按钮-->游戏的暂停 1.2.2结束游戏-->清除掉所有字母元素的定时器,删除字母元素 1.2.3退出

  • python实现转盘效果 python实现轮盘抽奖游戏

    本文向大家介绍python实现转盘效果 python实现轮盘抽奖游戏，包括了python实现转盘效果 python实现轮盘抽奖游戏的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了python实现转盘效果的具体代码，供大家参考，具体内容如下 小编再为大家分享一款python模拟轮盘抽奖的游戏 python3.x的版本测试中文的变量名 以上就是本文的全部内容，希望对大家的学习有所帮助，也

相关阅读

JS实现打字游戏python实现转盘效果 python实现轮盘抽奖游戏js实现九宫格抽奖js实现网页抽奖实例js实现简易的单数字随机抽奖（0-9）

相关文章

字节游戏平台运营实习面经酷萌游戏 游戏策划 15min游族游戏策划实习生面筋米哈游游戏测试暑期实习字节游戏测试一面

相关问答

猜数字游戏Python（while循环）含有方块的数独游戏爪哇井字游戏Java猜数游戏象棋游戏-抽象类中的错误

相关工具

数独游戏假日抽奖公司年会抽奖程序2048游戏游戏跳跃

相关文档

常用算法实现方法各种算法的 Python 实现方案厘米游戏引擎接入指南和开发文档JS 数据结构与算法JS 函数式编程指南
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.