消除表情小游戏【总结】

需求

需求分析：

按钮点击-->

生成一个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);


}

消除表情小游戏 【总结】

猜你喜欢

消除表情小游戏【总结】