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 相关文章推荐
在Javascript中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
prototype.js的Ajax对象
Sep 23 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
Jquery $when done then的用法详解
May 20 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
详解Puppeteer 入门教程
May 09 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 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
ftp类(myftp.php)
2006/10/09 PHP
PHP+javascript模拟Matrix画面
2006/10/09 PHP
php 高效率写法 推荐
2010/02/21 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
javascript中的几个运算符
2007/06/29 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
Python判断有效的数独算法示例
2019/02/23 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
python动态文本进度条的实例代码
2020/01/22 Python
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
2014年设计师工作总结
2014/11/25 职场文书
优秀员工自荐书
2015/03/06 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
MySQL update set 和 and的区别
2021/05/08 MySQL
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby
SQL SERVER中的流程控制语句
2022/05/25 SQL Server