得分: 分
摘要:判斷游戲是否結束如果棋子移動了得到的,就再次產生新的棋子調用函數,給棋子涂色并記錄當前分數建立滑動屏幕監聽事件,通過判斷滑動方向來執行對應的移動操作,并在每次滑動屏幕后調用判斷游戲是否結束。
一、前言
今年過完年來到學校步入了大三下學期,一番掙扎之后狠心放棄了學了一年多的Java,決定開始轉戰喜歡的前端。然后每天泡在實驗室里學習前端的基礎,一切從零開始,這期間剛好是各大互聯網公司春招的時候就順便往幾個大廠投了的簡歷,申請暑期實習。2048小游戲是360奇舞學院的前端星的壓軸選拔題目。剛看到這個題目時一臉懵,因為我之前沒玩過2048小游戲不知道這是個什么東西【允悲】,接下來就跟大家一起分享一下我用了5天的課余時間從不知道這是個什么游戲到最后把它寫出來的過程吧。[這是一道30分的題目 我得了23分 大佬評語是動畫做的差了點]
二、題目描述用JavaScript實現一個2048小游戲
題目要求:
實現web的2048游戲,使用JavaScript或TypeScript完成
基本規則、計算分數和判斷終局準確無誤
移動數字時有基本的動畫效果
加分項
適配移動端
其他額外的效果或可玩性改進
代碼實現優雅,注釋完整
三、游戲設計思路先一起來看一下項目文件結構(此項目我沒用任何框架和jQuery庫)
頁面布局樣式,先把頁面基本元素展示出來(HTML+CSS完整代碼)。
HTML
2048小游戲 2048小游戲
重新開始
得分: 分
這里我做了手機端適配,這段代碼可以讓頁面在手機端等比放大。
CSS
body { background-color: #ced9c5; text-align: center; font-size: 20px; font-weight: bold; font-family: "Microsoft YaHei"; } /*header部分樣式*/ header{ display: block; margin: 0px auto; text-align: center; } header h1{ font-size: 1.5em; } header #newgame_btn{ width: 100px; padding:10px; background: #7da962; font-family:inherit; font-size: 20px; color: #fff; border-radius: 10px; text-decoration: none; } /*table樣式*/ table { margin: 0px auto; margin-top: 30px; border-radius: 10px; background-color: #bfc0bb; border-spacing: 8px; } td { width: 80px; height: 80px; border-radius: 10px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } /*footer部分樣式*/ main .number_title { font-size: 0.8em; } main #show_number{ color: #f8563d; font-size: 1.3em; } .inner { height: 50px; line-height: 1.8; text-align: center; padding: 15px; font-size: .7em; color: #656565; } footer .operation_pc{ border-top: 1px solid #bfc0bb; } footer .operation_phone{ border-bottom: 1px solid #bfc0bb; }
棋盤棋子初始化與產生新的棋子、計分和對產生的新棋子涂色
通過了解游戲規則,游戲中有16個格子,游戲剛開始時需要隨機在兩個格子里出現兩個數,接下來每次移動后要產生一個隨機數,隨機數只能是隨機的2或4。所以這里我們就要做一個生成隨機數的函數。
通過調用這個函數并傳入最大和最小數值的參數,然后函數會返回一個介于這兩個數之間(包括這兩個數)的一個隨機整數。
function GetRandom(Min,Max){ return Min + Math.round((Max-Min) * Math.random()); }
調用產生隨機數的函數,在1~16的空格子里產生隨機的2或4。
要注意的是,在產生隨機的2或4時要先判斷要放入隨機數的格子是否是空的,如果隨機找的格子不為空則不產生隨機的2或4,要再次調用自身直到找到空的格子為止。
/*給隨機的格子放入隨機的2或4*/ function RandomNum(){ // 產生一個1~16的隨機數來獲取一個格子的ID let num = GetRandom(1,16); // 空格子數量計數器 let count = 0; // 判斷產生隨機格子內是否有數字 if(document.getElementById(num).innerHTML == ""){ // 產生2或4隨機數并放入隨機產生的空格子中 document.getElementById(num).innerHTML = GetRandom(1,2) * 2; } // 如果格子有數字遍歷棋盤是否放慢了棋子 else{ // 遍歷棋盤是否有空格子,如果有計數器就累加1 for(let i = 1; i <= 16; i++){ let piece_ = document.getElementById(i); if( piece_.innerHTML== ""){ count++; } } // 判斷棋盤是否有空格,如果有就再次執行隨機產生棋子的函數 if(count > 0){ RandomNum(); } } }
接下來創建一個每次棋子移動后產生結果的函數,這里創建一個控制不同數字背景顏色的對象
let color_object = { "":"#d3d3d3", "2":"#fef4f2", "4":"#fed9a2", "8":"#fc8c5e", "16":"#f8692f", "32":"#f8563d", "64":"#ff3936", "128":"#00c3dd", "256":"#00a4be", "512":"#00abcb", "1024":"#00abcb", "2048":"#00abcb", "4096":"#005d6e" };
產生隨機數和結果的函數創建后,進行函數的初始化。
function init(){ // 獲取棋盤table對象 let checkerBoard = document.getElementById("checkerBoard"); let text = ""; let id = 1; // 循環產生tr*4+td*4的行和列并給每一個tablecell賦予ID值(用1~16分別代表每個格子的ID值) for(let i = 1; i < 5; i++){ // 拼接text += " "; for(let j = i; j <= i+12; j += 4){ // 拼接 text += "" } // 把循環產生的行和列放入table中 checkerBoard.innerHTML = text; // 在棋盤中循環放入兩個由RandomNum()產生的隨機位置和隨機的2或4 for(let k = 0; k < 2; k++){ RandomNum(); } Result(); }text += " "; // 使td的ID值依次遞增 id++; } // 拼接
main.js(完整的main.js代碼)
/*新打開窗口時初始化游戲*/ window.onload = init(); /*點擊重新開始游戲按鈕時初始化游戲*/ function newGame(){ init(); } /*生成一個介于兩個整數之間的隨機整數*/ function GetRandom(Min,Max){ return Min + Math.round((Max-Min) * Math.random()); } /*給隨機的格子放入隨機的2或4*/ function RandomNum(){ // 產生一個1~16的隨機數來獲取一個格子的ID let num = GetRandom(1,16); // 空格子數量計數器 let count = 0; // 判斷產生隨機格子內是否有數字 if(document.getElementById(num).innerHTML == ""){ // 產生2或4隨機數并放入隨機產生的空格子中 document.getElementById(num).innerHTML = GetRandom(1,2) * 2; } // 如果格子有數字遍歷棋盤是否放慢了棋子 else{ // 遍歷棋盤是否有空格子,如果有計數器就累加1 for(let i = 1; i <= 16; i++){ let piece_ = document.getElementById(i); if( piece_.innerHTML== ""){ count++; } } // 判斷棋盤是否有空格,如果有就再次執行隨機產生棋子的函數 if(count > 0){ RandomNum(); } } } /*初始化游戲數據*/ function init(){ // 獲取棋盤table對象 let checkerBoard = document.getElementById("checkerBoard"); let text = ""; let id = 1; // 循環產生tr*4+td*4的行和列并給每一個tablecell賦予ID值(用1~16分別代表每個格子的ID值) for(let i = 1; i < 5; i++){ // 拼接text += " "; for(let j = i; j <= i+12; j += 4){ // 拼接 text += "" } // 把循環產生的行和列放入table中 checkerBoard.innerHTML = text; // 在棋盤中循環放入兩個由RandomNum()產生的隨機位置和隨機的2或4 for(let k = 0; k < 2; k++){ RandomNum(); } Result(); } /*給不同數值的棋子涂上不同的顏色,并計算得分*/ function Result(){ // 給分數初始值為0 let score = 0; // 計數棋子的數量 let count = 0; // 定義一個數值對應顏色的對象 let color_object = { "":"#d3d3d3", "2":"#fef4f2", "4":"#fed9a2", "8":"#fc8c5e", "16":"#f8692f", "32":"#f8563d", "64":"#ff3936", "128":"#00c3dd", "256":"#00a4be", "512":"#00abcb", "1024":"#00abcb", "2048":"#00abcb", "4096":"#005d6e" }; for(let i = 1; i <= 16; i++){ // 遍歷所有棋子,給對應數值的棋子涂上對應的顏色 let text = document.getElementById(i); text.style.backgroundColor = color_object[text.innerHTML]; // 以棋子數值為8的棋子作為臨界給數值大于等于8和小于8的棋子數字分別設置不同的顏色 if(text.innerHTML >= 8){ text.style.color = "#fff"; }else{ text.style.color = "#6e6f71"; } // 如果格子的數值不為空就把此格子上棋子的數值累加作為當前得分 if(text.innerHTML != ""){ score += parseInt(text.innerHTML); count++; } } // 如果棋子數量為2時,即游戲剛初始化,此時分數置零 if(count == 2){ document.getElementById("show_number").innerHTML = 0; } // 如果棋子數量不是二則正常累加得分 else{ document.getElementById("show_number").innerHTML = score; } }text += " "; // 使td的ID值依次遞增 id++; } // 拼接
接下來開始讓棋子動起來(pc端用方向鍵操作,移動端用手指滑動操作)
創建一個棋子移動的函數,并設兩個參數。
function Change(piece_1,piece_2){ // 判斷如果棋子要移動的方向有空格就將其移動 if(piece_1.innerHTML == "" && piece_2.innerHTML != ""){ res = true; piece_1.innerHTML = piece_2.innerHTML; piece_2.innerHTML = ""; } // 判斷如果相鄰棋子都不為空并且數值相等就將他們合并,同時將一個格子置空 else if(piece_1.innerHTML != "" && piece_1.innerHTML == piece_2.innerHTML){ res = true; piece_1.innerHTML = parseInt(piece_1.innerHTML) + parseInt(piece_2.innerHTML); piece_2.innerHTML = ""; } }
棋子往各個方向移動的函數Top()、Down()、Right()、Left()這里不再一一陳述見下面完整代碼。
建立鍵盤監聽來判斷按壓對應的方向鍵執行對應的移動函數,并在每次按壓后調用gameOver();判斷游戲是否結束。
document.onkeydown = function pc_move(){ res = false; if(event.keyCode == 38) Top(); else if(event.keyCode == 40) Down(); else if(event.keyCode == 37) Left(); else if(event.keyCode == 39) Right(); // 判斷游戲是否結束 gameOver(); // 如果棋子移動了得到的res==true,就再次產生新的棋子 if(res) RandomNum(); // 調用Result()函數,給棋子涂色并記錄當前分數 Result(); }
建立滑動屏幕監聽事件,通過判斷滑動方向來執行對應的移動操作,并在每次滑動屏幕后調用gameOver();判斷游戲是否結束。
值得注意的是在手機上滑動時屏幕默認的動作是頁面滑動,所以用下面的一行代碼來阻止默認事件的執行。
e.preventDefault();
function touch_move(){ // 定義滑動的起點和終點X、Y坐標值 let startX = 0; let startY = 0; let endX = 0; let endY = 0; // 獲取棋盤對象 let table = document.getElementById("checkerBoard"); // 給棋盤綁定"touchstart"事件 table.addEventListener("touchstart",function(e){ let touch = event.targetTouches[0]; // 在手指點擊屏幕時阻止屏幕拖動事件 e.preventDefault(); //獲取手指滑動起點坐標 startX = touch.pageX; startY = touch.pageY; }); // 給棋盤綁定"touchmove"事件 table.addEventListener("touchmove",function(e){ let touch = event.targetTouches[0]; // 在手指滑動屏幕時阻止屏幕拖動事件 e.preventDefault(); //獲取手指滑動屏幕的終點坐標 endX = touch.pageX; endY = touch.pageY; }); // 給棋盤綁定"touchend"事件 table.addEventListener("touchend",function(e){ // 在手指滑動屏幕結束時阻止屏幕拖動事件 e.preventDefault(); //滑動結束,計算出手指分別在X、Y軸上滑動距離 let distanceX = endX - startX; let distanceY = endY - startY; res = false; // console.log("startX " + startX + " startY" + startY); // console.log("endX" + endX + " endY" + endY); // console.log("distanceX" + distanceX + " distanceY" + distanceY) // console.log("------------------------------------------------------------------------------"); // 如果終點坐標X、Y值都不為零則進入下一步判斷滑動方向 if(endX!=0 && endY!=0){ //向上滑動 if(Math.abs(distanceY) > Math.abs(distanceX) && distanceY < -10){ Top(); } //向下滑動 else if(Math.abs(distanceY) > Math.abs(distanceX) && distanceY > 10){ Down(); } //向左滑動 else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX < -10){ Left(); } //向右滑動 else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 10){ Right(); } // 判斷游戲是否結束 gameOver(); // 如果棋子移動了得到的res==true,就再次產生新的棋子 if(res){ RandomNum(); } // 將以上綁定事件獲取的起始點坐標值置零 startX = startY = endX = endY = 0; } // 調用Result()函數,給棋子涂色并記錄當前分數 Result(); }); } touch_move();
move.js(move.js完整代碼)
// 控制棋盤是否產生隨機的棋子,當res==true時產生新的棋子 let res = false; /*移動棋子使相鄰并且相同數值的棋子合并,同時將數值相加*/ function Change(piece_1,piece_2){ // 判斷如果棋子要移動的方向有空格就將其移動 if(piece_1.innerHTML == "" && piece_2.innerHTML != ""){ res = true; piece_1.innerHTML = piece_2.innerHTML; piece_2.innerHTML = ""; } // 判斷如果相鄰棋子都不為空并且數值相等就將他們合并,同時將一個格子置空 else if(piece_1.innerHTML != "" && piece_1.innerHTML == piece_2.innerHTML){ res = true; piece_1.innerHTML = parseInt(piece_1.innerHTML) + parseInt(piece_2.innerHTML); piece_2.innerHTML = ""; } } /*向上移動棋子*/ function Top(){ for(let i = 1; i < 5; i++){ for(let j = i; j <= i + 12; j += 4){ for(let k = j; k > 4; k -= 4){ let piece_1 = document.getElementById(k - 4); let piece_2 = document.getElementById(k); Change(piece_1,piece_2); } } } } /*向下移動棋子*/ function Down(){ for(let i = 1; i < 5; i++){ for(let j = i + 12; j >= i; j -= 4){ for(let k = j; k < 13; k += 4){ let piece_1 = document.getElementById(k + 4); let piece_2 = document.getElementById(k); Change(piece_1,piece_2); } } } } /*向左移動棋子*/ function Left(){ for(let i = 1; i <= 13; i += 4){ for(let j = i; j <= i + 3; j += 1){ for(let k = j; k > i; k -= 1){ let piece_1 = document.getElementById(k - 1); let piece_2 = document.getElementById(k); Change(piece_1,piece_2); } } } } /*向右移動棋子*/ function Right(){ for(let i = 1; i <= 13; i += 4){ for(let j = i + 4; j >= i; j -= 1){ for(let k = j; k < i + 3; k += 1){ let piece_1 = document.getElementById(k + 1); let piece_2 = document.getElementById(k); Change(piece_1,piece_2); } } } } /*按壓鍵盤方向鍵使棋子移動*/ document.onkeydown = function pc_move(){ res = false; if(event.keyCode == 38) Top(); else if(event.keyCode == 40) Down(); else if(event.keyCode == 37) Left(); else if(event.keyCode == 39) Right(); // 判斷游戲是否結束 gameOver(); // 如果棋子移動了得到的res==true,就再次產生新的棋子 if(res) RandomNum(); // 調用Result()函數,給棋子涂色并記錄當前分數 Result(); } /*滑動手機屏幕使棋子移動*/ function touch_move(){ // 定義滑動的起點和終點X、Y坐標值 let startX = 0; let startY = 0; let endX = 0; let endY = 0; // 獲取棋盤對象 let table = document.getElementById("checkerBoard"); // 給棋盤綁定"touchstart"事件 table.addEventListener("touchstart",function(e){ let touch = event.targetTouches[0]; // 在手指點擊屏幕時阻止屏幕拖動事件 e.preventDefault(); //獲取手指滑動起點坐標 startX = touch.pageX; startY = touch.pageY; }); // 給棋盤綁定"touchmove"事件 table.addEventListener("touchmove",function(e){ let touch = event.targetTouches[0]; // 在手指滑動屏幕時阻止屏幕拖動事件 e.preventDefault(); //獲取手指滑動屏幕的終點坐標 endX = touch.pageX; endY = touch.pageY; }); // 給棋盤綁定"touchend"事件 table.addEventListener("touchend",function(e){ // 在手指滑動屏幕結束時阻止屏幕拖動事件 e.preventDefault(); //滑動結束,計算出手指分別在X、Y軸上滑動距離 let distanceX = endX - startX; let distanceY = endY - startY; res = false; // console.log("startX " + startX + " startY" + startY); // console.log("endX" + endX + " endY" + endY); // console.log("distanceX" + distanceX + " distanceY" + distanceY) // console.log("------------------------------------------------------------------------------"); // 如果終點坐標X、Y值都不為零則進入下一步判斷滑動方向 if(endX!=0 && endY!=0){ //向上滑動 if(Math.abs(distanceY) > Math.abs(distanceX) && distanceY < -10){ Top(); } //向下滑動 else if(Math.abs(distanceY) > Math.abs(distanceX) && distanceY > 10){ Down(); } //向左滑動 else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX < -10){ Left(); } //向右滑動 else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 10){ Right(); } // 判斷游戲是否結束 gameOver(); // 如果棋子移動了得到的res==true,就再次產生新的棋子 if(res){ RandomNum(); } // 將以上綁定事件獲取的起始點坐標值置零 startX = startY = endX = endY = 0; } // 調用Result()函數,給棋子涂色并記錄當前分數 Result(); }); } touch_move();
進行游戲結束判斷(遍歷棋盤當棋盤放滿棋子,并且每個棋子上下左右相鄰位置都不相同則游戲結束)
gameOver.js(gameOver.js完整代碼)
/*游戲結束判斷*/ function gameOver(){ // 設置一個空格子計數器 let count = 0; // 遍歷棋盤是否有空格子,如果有計數器就累加1 for(let i = 1; i <= 16; i++){ let piece_ = document.getElementById(i); if( piece_.innerHTML== ""){ count++; } } // 判斷棋盤是否擺滿棋子 if(count == 0){ // 當棋盤擺滿棋子時,遍歷所有棋子看其與相鄰的棋子數值是否相等,一旦有相等的計數器就累加1 for(let i = 1; i <= 16; i++){ let piece_self = document.getElementById(i); let piece_add_1 = document.getElementById(i + 1); let piece_cut_1 = document.getElementById(i - 1); let piece_add_4 = document.getElementById(i + 4); let piece_cut_4 = document.getElementById(i - 4); switch (i){ case 1: if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML)){ count++; } break; case 2: if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML)){ count++; } break; case 3: if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML)){ count++; } break; case 4: if(parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML)){ count++; } break; case 5: if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){ count++; } break; case 6: if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){ count++; } break; case 7: if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){ count++; } break; case 8: if(parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){ count++; } break; case 9: if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){ count++; } break; case 10: if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){ count++; } break; case 11: if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){ count++; } break; case 12: if(parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){ count++; } break; case 13: if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){ count++; } break; case 14: if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){ count++; } break; case 15: if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){ count++; } break; case 16: if(parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){ count++; } break; default: break; } } // 當遍歷所有棋子后與相鄰位置棋子數值都不相等,游戲結束 if(count == 0){ // 獲取當前得分 let score = document.getElementById("show_number").innerHTML; alert("瀟灑人生,極限挑戰。游戲結束! 您的得分:"+score+" 分"); // 點擊確定按鈕后初始化游戲 init(); } } }
至此整個項目設計過程就結束了,由于剛轉入前端代碼書寫肯定不是很優雅,歡迎大家對我的代碼不足之處進行指正。
(寢室已經斷電,室友已是鼾聲四起,準備睡覺啦,明天一早還要起來去上課【允悲】)
完整項目訪問我的github倉庫
點擊此處體驗我的2048小游戲歡迎大家轉載此文章 但請注明出處 謝謝合作
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94503.html
摘要:直到今天,突然看到一個有意思的微信小游戲。后來試了幾次之后才發現,這個小游戲比較刁,不僅做了微信的登錄授權,而且做了手機端訪問的判斷,更甚至竟然用的還是協議的網頁。調用的目標發生了異常。 記一次使用Fiddler抓包工具抓取Https協議數據的踩坑過程 前言 記得從剛入門前端第一天開始,當時的師傅就跟我介紹了一個可以抓取一些必須要在微信瀏覽器打開的鏈接的工具Fiddler,主要用來抓取...
摘要:為了實現物體隨機出現的效果,讓每個物體隨機多少秒后開始出現最后一個物體出現完,多少秒后出現結束畫面等等,需要理清楚各個定時器的關系,并對其添加語義化良好的標記,及時對未完結的定時器進行清除,防止定時器帶來的意想不到的問題。 快到年終的時候做了一個以游戲形式展示的h5活動頁,第一次嘗試使用js寫小游戲,很有趣的過程,很寶貴的經驗。 效果圖 直接上個效果的gif圖,游戲的一小部分效果,錄出...
閱讀 898·2021-10-25 09:44
閱讀 1270·2021-09-23 11:56
閱讀 1193·2021-09-10 10:50
閱讀 3137·2019-08-30 15:53
閱讀 2142·2019-08-30 13:17
閱讀 622·2019-08-29 18:43
閱讀 2500·2019-08-29 12:57
閱讀 861·2019-08-26 12:20