消除表情小游戏 总结

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游戏,是一个消除游戏,下面有发射器,滚出一些有眼睛的小球

覆盖javascript以消除闪烁

2019春第三次课程设计实验报告

vue3版本网页小游戏

刷题总结——mayan游戏(NOIP2011提高组day2T3)

LeetCode 390 消除游戏[数学 归纳法 递归] HERODING的LeetCode之路