消除表情小遊戲 【總結】
阿新 • • 發佈：2018-08-18
timer 每次 amp 鼠標 tex axis isa ron 功能
需求
需求分析：
按鈕點擊-->
生成一個icon——icon默認速度下降——中途被點擊——觸碰底邊後抖動——失分加1——重頭開始
└中途被點擊——變成炸彈後抖動——得分加1——重頭開始
實現思路：
生成icon：html階段在遊戲區域寫好圖片標簽不賦值
js隨機生成圖片和圖片位置並給圖片賦值( 利用Math.random() )，寫一個下降函數，每次回調判斷是否被點擊和是否已經到底，如果被點擊執行抖動清除定時器return並重頭開始，如果到底調用抖動函數抖動窗口並重頭開始。
難點：
1.由於doMove函數沒有下落過程中斷的功能(雖然添加也可以，但需要改的太多)，需要自己擼一個新的專用。
2.怎樣在第10個的時候先在面板上顯示並且不要抖動，顯示後在彈窗提示遊戲結束。
3.當下降速度加快時，鼠標很難點到icon
難點解決方案：
1.手寫個專用的
2.因為alert()執行級別比innerHTML高，所以利用抖動函數回調，把alert放入異步事件列表，但這樣第10個還是會抖動，可以修改抖動函數，但有點殺雞用牛刀大動幹戈的感覺，就算了。
3. 這個應該是延遲問題，視覺會延遲，所看的icon被點擊其實這是上一幀的畫面///////或者是鼠標點到了但從機械的點擊到js可以識別這過程需要花費1幀的時間或更多，導致點不到；
*解決辦法，將icon的上方留多一點空白，點的地方可以大一點，不過這治不了本，當快到一定程度還是會點不到。
涉及的新知識：
無
優化方向：
圖片的參數用ajax要讓它自動獲得；
即使下降速度再快也可能被點到；
代碼依賴太強；
備註：
alert()執行級別比innerHTML高，有什麽方法可以降低alert()的執行級別呢？除了定時器，回調還有什麽方法？
連連看遊戲的實現
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> h2,p{ text-align: center; }#btn{ display: block; margin: 10px auto; } .wrap{ position: relative; margin: 0 auto; width: 850px; height: 450px; } #playArea{ overflow: hidden; position: absolute; margin: 0 auto; width: 850px; height: 450px; background: #fff; border: 1px solid #000 } #counter{ background: #FFEB3B; position: absolute; top: 0px; left: -161px; width: 160px; height: 80px; border: 1px solid #000; } #eIcon{ width: 24px; height: 50px; position: absolute; } </style> </head> <body> <h2>你的鼠標有多快？</h2> <p>遊戲說明：點擊“開始遊戲”，隨機掉下QQ表情，點中它，千萬別讓它掉下去！！</p> <input type="button" id="btn" value="開始遊戲" > <div class="wrap"> <div id="playArea" > <div id="eIcon"></div> </div> <div id="counter"> <p style=" margin-top: 10px;">得分：0</p> <p>失分：0</p> </div> </div> <script src="getId.js"></script> <script src="doMove.js"></script> <script src="main.js"></script> </body> </html>
var oBtn = $(‘btn‘); oBtn.onclick = function(){ oBtn.value = ‘正在遊戲中‘; oBtn.disabled = ‘disabled‘; setIcon(); execute(speed); } //數據 var icon = [ ‘img/1.png‘, ‘img/2.png‘, ‘img/3.png‘, ‘img/4.png‘, ‘img/5.png‘, ‘img/6.png‘, ‘img/7.png‘, ‘img/8.png‘, ‘img/9.png‘, ‘img/10.png‘, ‘img/11.png‘ ]; //元素 var iconW = 24, playArea = $(‘playArea‘); var tWidth = parseInt( getStyle(playArea,‘width‘) ), tHeight = parseInt( getStyle(playArea,‘height‘) ), eIcon = $(‘eIcon‘); function setIcon(){ // 挑表情 //設置表情出現的位置 var tIcon = icon[ Math.floor( Math.random()*icon.length ) ], xAxle = Math.floor( Math.random()*(tWidth-iconW) ), yAxle = 0; // 設置參數 eIcon.style.backgroundImage = ‘url(‘+ tIcon +‘)‘; eIcon.style.backgroundRepeat = ‘no-repeat‘; eIcon.style.backgroundPosition = ‘center 7px‘; eIcon.style.left = xAxle + ‘px‘; eIcon.style.top = yAxle + ‘px‘; } var speed = 1, cnt = 0, loseCnt = 1, counter = $(‘counter‘).getElementsByTagName(‘p‘); function execute(tSpeed){ //獲取icon var timer = null, timerInner = null; eIcon.eTop = null; timer = setTimeout(function timerFn(){ //取值-加值-判斷邊界-賦值 eIcon.eTop = parseInt( getStyle(eIcon,‘top‘) ); eIcon.eTop += speed; ( eIcon.eTop > tHeight ) && ( eIcon.eTop = tHeight ) eIcon.style.top = eIcon.eTop + ‘px‘; eIcon.onOff = false; //中途icon被點擊-禁止連續點擊-清除定時器-改圖片-增加得分-速度增加-抖動icon-回調重新生成icon-執行execute eIcon.onclick = function(){ if( eIcon.onOff ){ return; } eIcon.onOff = true; clearTimeout(timer); clearTimeout(timerInner); eIcon.style.backgroundImage = ‘url(img/qq.png)‘; cnt++; counter[0].innerHTML = ‘得分：‘+cnt; speed++; shakeFn(eIcon,‘left‘,function(){ setIcon(); execute(); }); } //判斷邊界-true-->>繼續 false-->>清除定時器-速度增加-失分增加-增加下一次的失分 //判斷失分邊界-true-->>允許抖動窗口 false-->>初始化各項值-“重載”抖動窗口回調-彈出窗口-面板歸零-生成-執行 if( eIcon.eTop != tHeight ){ timerInner = setTimeout(timerFn,30); }else{ clearTimeout(timer); clearTimeout(timerInner); speed++; counter[1].innerHTML = ‘失分：‘+loseCnt; loseCnt++; if( loseCnt <= 10 ){ shakeFn( playArea,‘top‘); }else{ cnt = 0; loseCnt = 1; speed = 1; oBtn.value = ‘開始遊戲‘; oBtn.disabled = ‘‘; shakeFn( playArea,‘top‘,function(){ alert(‘遊戲結束，請重新開始‘); counter[0].innerHTML = ‘得分：0‘; counter[1].innerHTML = ‘失分：0‘; }); return; } setIcon(); execute(); } },30); } function shakeFn(obj,tAxis,endFn){ //抖動參數 var step = 2, range = 16, shakeArr = []; for(var i=range; i>0; i-=step){ shakeArr.push(i,-i); } shakeArr.push(0); //抖動數組遍歷的下標 var j = 0, timer = null, tLeft = parseInt( getStyle(obj,‘left‘) ); console.log(tLeft); timer = setTimeout(function timeFn(){ obj.style[tAxis] = (tLeft+shakeArr[j]) + ‘px‘; j++; if( j <= shakeArr.length ){ timer.inner = setTimeout(timeFn,30); }else{ (endFn) && (endFn()); clearTimeout(timer); clearTimeout(timer.inner); } },30); }
消除表情小遊戲 【總結】