js實現遊戲轉盤抽獎
阿新 • • 發佈：2017-09-27
document .cn itl interval 空格 device max floor star
<!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>
js實現遊戲轉盤抽獎