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


Posted in Javascript onJune 24, 2015

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

Javascript 相关文章推荐
JS高级笔记
Jul 13 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
浅谈开发eslint规则
Oct 01 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 #Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 #Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 #Javascript
介绍一个简单的JavaScript类框架
Jun 24 #Javascript
jquery分割字符串的方法
Jun 24 #Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 #Javascript
举例详解JavaScript中Promise的使用
Jun 24 #Javascript
You might like
一段防盗连的PHP代码
2006/12/06 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
php-fpm中max_children的配置
2019/03/15 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
对Python3中的input函数详解
2018/04/22 Python
python3实现基于用户的协同过滤
2018/05/31 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
销售人员自我评价怎么写
2013/09/19 职场文书
暑期研修感言
2014/02/17 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
《花木兰》教学反思
2014/04/09 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
作弊检讨书
2015/01/27 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL
基于Python编写一个监控CPU的应用系统
2022/06/25 Python