js实现大转盘抽奖游戏实例_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:53 PM

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7515

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

Nvgpucomp64.dll导致Windows PC游戏崩溃; Mar 26, 2024 am 08:20 AM

如果Nvgpucomp64.dll导致游戏频繁崩溃，这里提供的解决方案可能会对您有所帮助。这种问题通常是由于过时或损坏的显卡驱动程序、游戏文件损坏等原因引起的。修复这些问题可以帮助您解决游戏崩溃的困扰。Nvgpucomp64.dll文件与NVIDIA显卡关联。当这个文件崩溃时，你的游戏也会崩溃。这通常发生在《LordsoftheFallen》、《LiesofP》、《RocketLeague》和《ApexLegends》等游戏中。Nvgpucomp64.dll使WindowsPC上的游戏崩溃如果N

英伟达上线 RTX HDR 功能：不支持的游戏借助 AI 滤镜达到 HDR 艳丽视觉效果 Feb 24, 2024 pm 06:37 PM

本站2月23日消息，英伟达昨晚更新推出了NVIDIA‏‏应用程序，为玩家提供了全新的统一GPU控制中心，便于玩家通过游戏内悬浮窗提供的强大录像工具捕捉精彩时刻。在本次更新中，英伟达还引入了RTXHDR功能，本站附上官方介绍如下：RTXHDR是一款AI赋能的全新Freestyle滤镜，可以将高动态范围(HDR)的艳丽视觉效果无缝引入到原本不支持HDR的游戏中。你只需拥有兼容HDR的显示器，即可对大量基于DirectX和Vulkan的游戏使用此功能。玩家在启用RTXHDR功能之后，运行即便不支持HD

超级人类（superpeople）游戏下载安装方法介绍 Mar 30, 2024 pm 04:01 PM

超级人类（superpeople）游戏可以通过steam客户端下载游戏，这款游戏的大小在28G左右，下载到安装通常需要一个半小时，下面为大家带来具体的下载安装教程！新的申请全球封闭测试方法1)在Steam商店（steam客户端下载）搜索“SUPERPEOPLE”2)点击“SUPERPEOPLE”商店页面下方的“请求SUPERPEOPLE封闭测试访问权限”3)点击请求访问权限按钮后，将在Steam库中可确认“SUPERPEOPLECBT”游戏4)在“SUPERPEOPLECBT”中点击安装按钮并下

win11蜘蛛纸牌在哪 win11玩蜘蛛纸牌游戏的方法 Mar 01, 2024 am 11:37 AM

在玩够3A大作以及手游的小伙伴们，是不是想重温一下儿时的电脑游戏呀？那我们一起在windows11中寻找蜘蛛纸牌吧！点击界面上的开始菜单，点击“所有应用”按钮；点击“所有应用”。找到并选择“MicrosoftSolitaireCollection”，这是微软的纸牌系列游戏应用；纸牌系列游戏选择。加载完成后，进入选择界面，找到“蜘蛛纸牌”；选择“蜘蛛纸牌”。虽然界面有些许变化，但还是以前的

华硕发布 BIOS 更新，提高英特尔第 13/14 代处理器游戏稳定性 Apr 20, 2024 pm 05:01 PM

本站4月20日消息，华硕公司近日发布了BIOS更新，改善了英特尔第13/14代处理器运行游戏时崩溃等不稳定情况。本站此前报道，玩家反馈的问题包括运行万代南梦宫格斗游戏《铁拳8》PC演示版时，即便电脑拥有充足的内存和显存，也会出现系统崩溃并提示内存不足的错误信息。类似的崩溃问题也出现在《战地风云2042》、《遗迹2》、《堡垒之夜》、《堕落之主》、《霍格沃茨之遗》以及《TheFinals》等多款游戏中。RAD公司今年2月发布长文，解释说游戏崩溃问题是BIOS设置、英特尔处理器的高时钟频率和高功耗共同

小黑盒买的游戏怎么入库steam Feb 23, 2024 pm 05:30 PM

小黑盒中可以购买各种游戏，那么买的游戏怎么入库steam呢？用户们需要在steam里的在Steam上激活产品，然后复制小黑盒里的激活码来激活，这篇买的游戏入库steam方法介绍就能够告诉大家具体的方法，下面就是详细的介绍，赶紧来看看吧！小黑盒买的游戏怎么入库steam答：在steam里的在Steam上激活产品来入库具体方法：1、首先点击steam上面的游戏按键。2、点击里面的在Steam上激活产品。3、之后点击出现窗口的下一步。4、在产品激活里粘贴小黑盒过购买的代码。5、之后点击下一步，就能够添

ipad玩游戏没声音什么原因 Feb 20, 2024 am 08:24 AM

iPad玩游戏没声音，可能存在的原因在使用iPad进行游戏娱乐时，突然发现没有声音是非常令人沮丧的。无声的游戏体验无疑会大大降低乐趣，让人感到困惑和不满。那么，当我们在iPad上玩游戏时遇到没有声音的问题，可能存在哪些原因呢？本文将为大家分析和解决此类问题的可能原因。音量设置不正确首先，我们需要检查iPad的音量设置。在iPad的侧边或顶部中的物理按键，可以

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题