Javascript游戏问题

Question

我正在使用HTML5的canvas API和Javascript制作一款游戏，但现在遇到了一个问题。

游戏中有一个导弹沿y轴向上移动的效果，它会受到风扇（发射风力）在x轴方向上的影响。我已经成功地制作了一个风扇，但当它们的数量增加到3个时，我遇到了麻烦。 在新的关卡中，我将这些风扇实例化为对象，然后将它们推入一个数组中，如下所示：

function gameStateNewLevel(){

    for (var i = 0; i < 2; i++){
        turbine = {};
        turbine.width = 10;
        turbine.height = Math.floor(Math.random()*200); //turbine height
        turbine.y = Math.floor(Math.random()*600) //turbine y-axis 
        if (Math.random()*10 > 5){ //indicates turbine side of canvas
            turbine.side = leftSide;
        }else{
            turbine.side = rightSide;
        }
        if(turbine.height <= 100){ //Increases turb. size if it's too small
            turbine.height += Math.floor(Math.random()*100);
        }

        turbines.push(turbine);

    }

    context.fillStyle = "#FFFFFF"       
    switchGameState(GAME_STATE_PLAYER_START);
}

现在，在它们被呈现之前，它们也会通过updateTurbine函数进行更新。这个函数的作用只是确保涡轮之间没有重叠，并根据需要沿y轴向上或向下移动它们（通过循环遍历数组并比较其中的每个对象）。我尝试了一下写这个函数，但是在所有循环中完全迷失了。这是我做到的最远的地方，我有一种感觉我走错了路：

function updateTurbines(){
    tempTurbine = {}
    turbinePositionTop = tempTurbine.y;
    turbinePositionBottom = tempTurbine.y + tempTurbine.height;
    for (var i = turbineArrayLength; i < 2; i++){
        tempTurbine = turbines[i];
        for (var i = turbineArrayLength; i < 2; i++){
            if (tempTurbine !== tempTurbines[i]){
                while (){

                }
            }   
        }
    }
}

你可以在www.techgoldmine.com找到源代码，并且我没有使用这个东西也能成功运行。

- styke

---

建议：如果新的高度仍然小于100，您的 if(turbine.height <= 100){ 应该改为 while(turbine.height <= 100){。 - Jeffrey Sweeney

@Jeffrey 或者从一开始就使用 100 + Math.random()*100... - Andrew

@Andrew 是的...那可能是个更好的主意 :) - Jeffrey Sweeney

Answer 1

你的代码有错误，请查看这里的注释：

function updateTurbines(){
    tempTurbine = {}
    turbinePositionTop = tempTurbine.y; // tempTurbine is an empty object right now so .y is undefined
    turbinePositionBottom = tempTurbine.y + tempTurbine.height; // same problem here
    for (var i = turbineArrayLength; i < 2; i++){ // why am I starting at the end of the array? What's the 2 for?
        tempTurbine = turbines[i];
        for (var i = turbineArrayLength; i < 2; i++){ // why am I doing this twice? I'm also clobbering the value of "i"
            if (tempTurbine !== tempTurbines[i]){
                while (){

                }
            }   
        }
    }
}

如果我不知道它正在做什么，我会这样重新编写：

function updateTurbines(){
    var l = turbines[i].length; // get the turbine length directly from the array[1]
    for (var i = 0; i < l; i++){ // go through all of the turbines
        var tempTurbine = turbines[i];
        turbinePositionTop = tempTurbine.y; // now .y is defined because tempTurbine is not an empty object
        turbinePositionBottom = tempTurbine.y + tempTurbine.height;
        for (var j = 0; j < l; j++) { // NOT i but j here
            if (tempTurbine !== tempTurbines[j]){
                while (){
                     // ...
                }
            }   
        }
    }
}

[1] 如果您修改了数组，可能会导致错误。我现在假设您只会添加到它。

- Simon Sarris

---

谢谢您的回复。我明天会尝试一下并告诉您结果，非常感谢。 - styke

嘿，只想说你接近正确了，但是还是错了。var l = turbines[i].length;这只获取当前对象的长度。tempTurbine也没有正确定义，在第8行应该是tempTurbine[j]。 无论如何都不起作用。我已经在答案中发布了可行的代码。 - styke

Answer 2

你遇到的问题可能是因为索引重叠了；内部循环正在更改外部循环的 i 值。

我在内部循环中将 i 改为了 j。

function updateTurbines(){
    tempTurbine = {}
    turbinePositionTop = tempTurbine.y;
    turbinePositionBottom = tempTurbine.y + tempTurbine.height;
    for (var i = turbineArrayLength; i < 2; i++){
        tempTurbine = turbines[i];
        for (var j = turbineArrayLength; j < 2; j++){
            if (tempTurbine !== tempTurbines[j]){
                while (){
                    //What the heck is going on here?
                }
            }   
        }
    }
}

如果问题已经解决，请告诉我。

- Jeffrey Sweeney

---

谢谢，这不仅仅是修复问题，更是澄清函数需要的样子。我也会记住你的建议。干杯！ - styke

Answer 3

回复很有帮助，但是它们都没有起作用...这是我最终得到的代码。

function updateTurbines(){
    var l = turbines.length; 
    for (var i = 0; i < l; i++){ // go through all of the turbines
        var tempTurbine1 = turbines[i];
        tempTurbine1.PositionTop = tempTurbine1.y; // now .y is defined because tempTurbine is not an empty object
        tempTurbine1.PositionBottom = tempTurbine1.y + tempTurbine1.height;
        for (var j = 0; j < l; j++) { // NOT i but j here
            var tempTurbine2 = turbines[j];
            if (tempTurbine1 !== tempTurbine2 && tempTurbine1.PositionBottom >= tempTurbine2.PositionTop){

    }
   }
  }
 }

- styke