如何在for循環中停止動畫速度的提高？

Question

我做了一個簡單的游戲，但是我有一個問題。 如果您單擊下面的鏈接，您將理解。 如果發射的一枝新芽錯過了藍球，一切速度都會加快。

查看演示，單擊鏈接，按ENTER開始

游戲代碼如下

var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
var tileldig = Math.floor((Math.random() * 300) + 1);
var tekst = document.getElementById("tekst")

var kuler = [
    {r: 10, x: canvas.width/2, y: canvas.height-100, f: "red", dy:0},
]

var fiender = [
    {r: 20, x: tileldig, y: -20, vx:0 , vy: 1, },
]

var snd = new Audio("Skudd.m4a");

var poeng = 1;
var høyre = 0;
var venstre = 0;
var opp = 0;
var ned = 0;

document.onkeydown = function tast (e) {
        if (e.keyCode == 39) {  // høyre
            høyre = 1;  
        } 
        if (e.keyCode == 37) {  // venstre
            venstre = 1;  
        } 
        if (e.keyCode == 38) {  // opp 
            opp = 1; 
        } 
        if (e.keyCode == 40) {  // ned
            ned = 1;              
        } 
        if(e.keyCode == 32) {
            newskudd();
            snd.play();
            console.log("hit space")
        }
        if(e.keyCode == 13){
            spill();
        }

}
document.onkeyup = function tast2 (e) {
        if (e.keyCode == 39) {  // høyre
            høyre = 0;  
        } 
        if (e.keyCode == 37) {  // venstre
            venstre = 0;  
        } 
        if (e.keyCode == 38) {  // opp 
            opp = 0; 
        } 
        if (e.keyCode == 40) {  // ned
            ned = 0;              
        } 
}

function spill() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < kuler.length; i++) { 
        kuler[i].x += 0;
        kuler[i].y += kuler[i].dy;


        ctx.fillStyle = kuler[i].f;
        ctx.beginPath();
        ctx.arc(kuler[i].x, kuler[i].y, kuler[i].r, 2*Math.PI, 0);
        ctx.closePath();
        ctx.fill();

        if (venstre == 1){
            kuler[0].x -= 4;
        }
        if (høyre == 1){
            kuler[0].x += 4;;
        }
        if (opp == 1){
            kuler[0].y -= 4;
        }
        if (ned == 1){
            kuler[0].y += 4;
        }


        if (kuler[0].x >= canvas.width-kuler[0].r) {
            kuler[0].x = canvas.width-kuler[0].r
        };
        if (kuler[0].x <= 0+kuler[0].r) {
            kuler[0].x = 0+kuler[0].r
        };
        if (kuler[0].y >= canvas.height-kuler[0].r) {
            kuler[0].y = canvas.height-kuler[0].r
        };
        if (kuler[0].y <= 0+kuler[0].r) {
            kuler[0].y = 0+kuler[0].r
        };



    for (var j = 0; j < fiender.length; j++) { 
        ctx.fillStyle = "blue";
        ctx.beginPath();
        ctx.arc(fiender[j].x, fiender[j].y, fiender[j].r, 2*Math.PI, 0);
        ctx.closePath();
        ctx.fill();

        fiender[j].y += fiender[j].vy;

        if (fiender[j].x >=  canvas.width -fiender[j].r) {
            fiender[j].x =canvas.width - fiender[j].r;
        };
        if (fiender[j].x  <= 0 + fiender[j].r) {
            fiender[j].x =0 + fiender[j].r;
        };  

        if (fiender[j].vy >= 2) {
            fiender[j].vy = 2;  
        };


        /*if (fiender[j].y + fiender[j].r >= kuler[i].y && fiender[j].x + fiender[j]. == kuler[i].x) { // remove kuler[i] and fiender[j] } 
            fiender.splice(j, 1);
            kuler.splice(i,1);
        };*/

        var distanceFromCenters = Math.sqrt(Math.pow(Math.abs(fiender[j].x - kuler[i].x),2) + Math.pow(Math.abs(fiender[j].y - kuler[i].y),2 )); // you have a collision
        if (distanceFromCenters <= (fiender[j].r + kuler[i].r)) {
            fiender.splice(j, 1);
            kuler.splice(i,1);
            poeng += 1;
        } else if (fiender[j].y > canvas.height) {
            fiender.splice(j,1)
        }

        if(j > 1){ 
            fiender.splice(j,1)

        }


        tekst.innerHTML = ( "Poeng: " + poeng  )
    }
}






    requestAnimationFrame(spill);
}

function newskudd () {
    var nyttskudd = 
    {x:kuler[0].x, y:kuler[0].y, r:5, dy:-5, f:"white"};
    kuler.push(nyttskudd);
};

setInterval(
    function(){
        fiender.push({r: 20, x: Math.floor((Math.random() * 300) + 1), y: -20, vx:0 , vy: 1, f: "green"});
}, 1000);

Answer 1

問題是您在為每個子彈處理過的loop中移動了玩家和敵人 。 因此，您擁有的子彈越多，增加玩家和敵人位置的次數就越多。

所以： 您的游戲速度不會增加。 您只需在另一個循環內的代碼中的某個位置移動玩家和敵人的位置即可。

這是您以前使用過的（偽代碼）：

// INCORRECT!
for each bullet {
    move_bullet();
    move_player();
    for each enemy {
        move_enemy();
    }
}

// CORRECT:
for each bullet {
    move_bullet();
}
move player;
for each enemy {
    move_enemy()
}

造成這種情況的原因可能是代碼格式不正確。 您為不同的塊分配了錯誤的空格數， 這可能是導致此問題的原因。 我已經通過http://jsbeautifier.org/運行了您的代碼以查找問題。

我已將其移至主循環下。 您可以看到新舊地方，我已經添加了評論。

這是您的靈丹妙葯： http : //jsfiddle.net/andunai/mho43ek7/