重寫toFixed方法——以既可以指定小數位又可返回數字型別
阿新 • • 發佈：2021-12-06
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>貪吃蛇</title> <link type="text/css" rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript" src="js/script.js"></script> <style> </style> </head> <body> <div id="h"> <h1>貪吃蛇遊戲</h1> </div> <div class="map" id="map"> <div class="s" style="background: pink;top: 250px;left: 250px;"></div> <div class="s" style="top: 260px;left: 250px;"></div> <div class="s" style="top: 270px;left: 250px;"></div> <div class="s" style="top: 280px;left: 250px;"></div> <div class="s" style="top: 290px;left: 250px;"></div> <!--初始長度5--> <div id="p"></div> </div> <input id="b1" type="button" onclick="run_click()" value="開始"> <!--第一個按鈕控制開始、暫停和繼續，開始後只有暫停和繼續--> <input id="b2" type="button" onclick="over_click()" value="結束"> <!--第二個按鈕控制結束--> </body> <script> </script> </html>
/*css/style.css*/ *{ margin: 0px; } body{ text-align: center; } #h{ margin: 70px auto 0; width: 510px; height: 100px; background: red; font-family: 楷體; line-height: 100px; } .map{ width: 510px; height: 510px; margin: 10px auto 0; background: skyblue; border: 2px double black; position: absolute; top: 170px; left: 0; right: 0; } .s{ width: 10px; height: 10px; background: black; border-radius: 5px; position: absolute; } #p{ width: 10px; height: 10px; background: black; border-radius: 5px; position: absolute; } #b1{ margin: 10px auto 0; width: 15%; height:35px; border: 1px double black; position: absolute; top: 700px; left:30%; } #b2{ margin: 10px auto 0; width: 15%; height:35px; border: 1px double black; position: absolute; top: 700px; right:30%; }
/* js/script.js */ let delay_time = 200;// 速度（延時） let myVar; let length = 5;// 蛇的長度 let direction = "up";// 行進方向 let flag = 0;// 遊戲狀態 let location_self,location_before;// 移動時儲存每個節點的位置 let point_x,point_y;// 重新整理的隨機點的x、y座標 let map = document.getElementsByClassName('map');// 獲取畫布物件 function head_go(top,left) { // 確定蛇頭的下一個位置 if (direction == "up"){ top -= 10; }else if (direction == "left"){ left -= 10; }else if (direction == "down"){ top += 10; }else{ left += 10; } return [top+'px',left+'px'] } function move(sna) { // 蛇身移動 let top = parseInt(sna[0].style.top); let left = parseInt(sna[0].style.left); location_before = head_go(top,left); // 得到蛇頭的下一個位置 for(let s of sna){ // 遍歷頂替前一節蛇身的位置 location_self = [s.style.top,s.style.left]; // console.log(location_before); [s.style.top,s.style.left] = location_before; location_before = location_self; // console.log(location_before); // console.log('=================='); } // console.log(location_before); } function create_point() { // 隨機生成一個座標作為蛇的食物 point_x = Math.floor(Math.random()*51)*10; point_y = Math.floor(Math.random()*51)*10; $('#p')[0].style.top = point_y+'px'; $('#p')[0].style.left = point_x+'px'; } function add_point() { // 蛇吃到食物後新增一節身體 let tail_point = document.createElement('div'); map[0].appendChild(tail_point); tail_point.className = 's'; // console.log(location_before); tail_point.style.top = location_before[0]; tail_point.style.left = location_before[1]; } function eat_point(head) { // 執行吃食物 if(parseInt(head.style.top)== point_y && parseInt(head.style.left)== point_x){ add_point(); length ++; create_point(); } } function go_ahead(e) { // 返回鍵盤鍵入的方向 switch (e){ case 37: if(direction == 'right') {return 'right';} return 'left'; case 38: if(direction == 'down') {return 'down';} return 'up'; case 39: if(direction == 'left') {return 'left';} return 'right'; case 40: if(direction == 'up') {return 'up';} return 'down'; } } function game_over() { // 遊戲結束後的操作 clearInterval(myVar); // 結束迴圈 alert('\ngame over!!!\n\n您的分數是: '+(length-5)); // 彈窗提示結果 location.reload(); // 重新整理文件以開始下一局遊戲 } function touch_self(sna) { // 判斷蛇頭是否碰到自己的身體 for(let s of sna){ if(s == sna[0]){ continue; } if(sna[0].style.top == s.style.top && sna[0].style.left == s.style.left){ // console.log('相等了'); return true; } } return false; } function touch_wall(head) { // 判斷蛇頭是否出界了 if(parseInt(head.style.top) < 0 || parseInt(head.style.top) > 505){ return true; }else if(parseInt(head.style.left) < 0 || parseInt(head.style.left) > 505){ return true; }else{ return false; } } function is_dead(sna) { // 蛇頭碰到身體或出界就結束遊戲 if(touch_self(sna)){ game_over(); }else if(touch_wall(sna[0])){ game_over(); } } function game_running() { // 執行遊戲 move($('.s')); is_dead($('.s')); eat_point($('.s')[0]); } function run_click() { // 按鈕點選事件 switch (flag){ case 0: // 點選了開始遊戲 myVar = setInterval('game_running()',delay_time); $('#b1')[0].value = '暫停'; flag = 1; break; case 1: // 點選了暫停遊戲 clearInterval(myVar); $('#b1')[0].value = '繼續'; flag = 0; break; } } function over_click() { // 點選結束按鈕的事件 game_over(); } $(function () { // 載入完文件執行的操作 create_point(); // 重新整理一個新的食物 $(document).keydown(function (event) { // 監聽鍵盤鍵入事件 direction = go_ahead(event.which); // 根據鍵入的值確定方向 }); });