js实现游戏转盘抽奖
<!DOCTYPE html>
<html>
<head>
<title>js抽奖</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
<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() {
//跑马灯变速
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>
幸运大转盘游戏
https://files.cnblogs.com/files/theWayToAce/zpyx.rar
js实现游戏转盘抽奖的更多相关文章
- 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结
大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...
- 原生JS实现简易转盘抽奖
我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...
- 简单JS旋转实现转盘抽奖效果
闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域 比如,我选择了"区域2",结果就是这样 具体可以见下 ...
- js实现大转盘抽奖游戏实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结
大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现老虎-机抽奖 实现思路: Vue component实现老虎-机组件,可以嵌套到任意要使用的 ...
- 原生js轮盘抽奖实例分析（幸运大转盘抽奖）
效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...
- iOS 转盘抽奖游戏(原生)
转盘抽奖游戏在一般的app中都会有,应该算是一种吸引用户的一种手段.在项目中集成转盘抽奖游戏,大都采用h5的方式来实现,但是由于项目需求,需要在app中使用原生来实现转盘抽奖.实现原理也很简单,中间的 ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
- js实现转盘抽奖
大转盘抽奖,主要通过css3的"transform:rotate(0deg)"属性来控制元素的旋转角度来实现. 通常,抽奖的过程需要渐进的效果,所以直接通过旋转属性写比较繁琐. 这 ...
随机推荐
- MATLAB画图符号标注
线型 说明 标记符 说明 颜色 说明 - 实线(默认) + 加号符 r 红色 -- 双划线 o 空心圆 g 绿色 : 虚线 * 星号 b 蓝色 :. 点划线 . 实心圆 c 青绿色 x 叉号符 m 洋 ...
- nordic mesh 任务调度实现
nordic mesh 任务调度实现 nordic mesh的任务调度室基于定时器实现的,有两个链表结构维护任务. 需要注意的是,任务调度的部分接口只能在"bearer event" ...
- selenium元素定位不到之iframe---基于python
我们在使用selenium的18中定位方式的时候,有时会遇到定位不上的问题,今天我们就来说说导致定位不上的其中一个原因---iframe 问题描述:通过firebug查询到相应元素的id或name等, ...
- HDU 4568 Hunter（最短路径+DP）（2013 ACM-ICPC长沙赛区全国邀请赛）
Problem Description One day, a hunter named James went to a mysterious area to find the treasures. J ...
- Python中的__future__
在Python中,你如果在某一个版本的Python想使用未来版本中的功能,可以使用如下语法实现: from __future__ import futurename 这条语句必须放在module文件的 ...
- JavaScript中的事件代理/委托
事件委托在JS高级程序设计中的定义为"利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件" 如何理解上面的这句话呢,在网上,大牛们一般都使用收快递这个例子来解释的, ...
- C语言 指针数组 多维数组
. 作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/21402047 . 1. 地址算数运算示例 指针算数运算 ...
- Alpha 冲刺（3/10）
队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 协助后端界面的开发 搭建项目运行的服务器环境 ...
- cURL和file_get_contents实现模拟post请求
以前面试时候,面试官问过我后端有没有跨域问题,但是不敢肯定,现在可以肯定的说没有. 不文用php的cURL和file_get_contents方法分别实现后端跨域.本文场景也是在tp5下实现的. 一, ...
- c++源文件到可执行文件的过程
1.预处理(preprocessor):对#pragma.#include.#define.#ifdef/#endif.#ifndef/#endif,inline内联函数等进行处理 2.编译(comp ...