jQuery實現俄羅斯方塊中遇到的問題及解決方法

盛夏光年發表於2017-05-26

記錄一下寫這個遊戲時遇到的問題。

按鍵按下時,禁止重複觸發

需求:按鍵按下時,speed在當前值的基礎上減少300,speed -= 300
存在問題:按鍵一直按住不放時,speed就會一直持續執行自減運算
解決方式:設定一個flag,增加if條件。按鍵按下,flag值就改變,當keyup事件觸發時,flag才會變回原值。

//keydown時觸發
Game.prototype.speedUp = function(){
    if(!this.speedFlag){
        this.speed -= 300;//加速,減少掉落的時間間隔
        if(this.speed<50){
            this.speed = 50;
        }
        this.speedFlag = true;
    }

    console.log(`speedUp`+this.speed);

}

//keyup時觸發
that.speed += 300;
                if(that.speed>(500 - (that.level -1)*50)){
                    that.speed = 500 - (that.level -1)*50;
                }
                that.speedFlag=false;

按鍵控制setInterval的時間間隔

需求:按下向下的按鍵時,下落速度會加快,即setInterval的執行間隔會減小
存在問題:無論是在setInterval外部還是內部更改speed值,都只能在clearInterval之後,才能生效,無法滿足需求
解決方式:將setInterval更改為setTimeout,在setTimeout裡呼叫自身,形成遞迴,即可實現需求

方塊位置檢測

需求:沒有方塊存在時,直接下落到介面底部。有方塊阻擋時,停在方塊上面。
存在問題:如何記錄已有方塊的位置
解決方式:獲取每一個方塊的top和left位置,拼接成字串,存入陣列blockArea。每一次掉落時,都檢測每一個方塊的下一個位置是否已經存在在blockArea中,如果沒有,就允許下落。否則停止下落,生成下一個方塊。

相關文章