Question

我正在制作类似钻石的游戏（点击3个相同颜色的瓷砖得分）并且我遇到动画效率问题。我现在所做的是做一个启动“跌倒”的间隔。对于每个图块（更多间隔），当它下面的另一个图块被清除时。

例如：

function fall(elem){
     intervals[intervals.length] = setInterval(function(){
        var offset=$('#game_window').offset();
        var a = parseInt(elem.style.left)+offset.left;
        var b = parseInt(elem.style.top)+offset.top+size+1;

        var bottom = document.elementFromPoint(a,b);



        if(!bottom){    
            elem.style.top=parseInt(elem.style.top)+40+'px';
        }else if(bottom.className.indexOf('tile')>-1 ||    parseInt(elem.style.top)>=300 || game_paused==true){
            clearInterval(intervals[intervals.length-1]);
        }
    },50);

}

setInterval(function(){
$('.tile').each(function(){fall(this);});

},50);

但是当然它根本没有效率（好吧，至少它在现实生活中不起作用）。我已经读过，也许setTimeout会更好，但我拒绝了这个选项，因为脚本必须等待逐个执行每个函数。

我也考虑使用css3过渡，但我不知道如何在那里模拟碰撞。希望你能帮助我走上正确的道路，但我知道它可能不是制作任何类型游戏的好方法。

修改

我最终摆脱了额外的间隔，例如：

function fall(elem){
            var offset=$('#game_window').offset();
            var a = parseInt(elem.style.left)+offset.left;
        var b = parseInt(elem.style.top)+offset.top+size+1;

        var bottom = document.elementFromPoint(a,b);

        if(!bottom){
            //something
             }else{
            //something
             }

}

setInterval(function(){
$('.tile').each(function(){fall(this);});  
},50);

我猜这个游戏效果会好一点。它仍然有些滞后，但我认为这是我程序中太多不必要部分的错误。感谢

Answer 1

您可能需要制作一个绘图循环（使用setTimeout / setInterval或requestAnimationFrame - 我推荐后者）并计算所有“下一帧逻辑”。您需要遍历需要设置动画的所有对象，并根据游戏的当前状态绘制下一帧。

如果我理解正确，你不希望你的钻石一个接一个地移动。这通常是通过在隐形画布上绘制下一帧然后使用当前正在显示的画布交换它来实现的，以此类推。如果您使用DOM，那么我想您的缓冲区将是隐藏的<div>标记。另请注意，如果您的游戏将快速开始制作动画，则“非同步动画”的效果可能甚至不可见

setInterval的另一种方法是为元素设置动画（＆＃39;钻石游戏＆＃39;）

1 个答案: