js实现游戏转盘抽奖
Posted Newbie_小白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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实现游戏转盘抽奖的主要内容，如果未能解决你的问题，请参考以下文章