消除表情小游戏 总结
Posted mflnhg
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了消除表情小游戏 总结相关的知识，希望对你有一定的参考价值。
需求
需求分析：
按钮点击-->
生成一个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); }
以上是关于消除表情小游戏 总结的主要内容，如果未能解决你的问题，请参考以下文章
1年半前的一款iphone游戏，是一个消除游戏，下面有发射器，滚出一些有眼睛的小球