Javascript Issues

Question

I am making a Javascript game with the HTML5 canvas API and hit the checkpoint.

One of the game effects is a rocket moving up along the y axis, which is affected by gusts of wind (emitted by turbines) that move it along the x axis. I had no problems making one of these turbines, but when their number increased to 3, I ran into a problem. At a new level, I create these turbines as objects, which are then placed in an array, as can be seen here:

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 too small turbine.height += Math.floor(Math.random()*100); } turbines.push(turbine); } context.fillStyle = "#FFFFFF" switchGameState(GAME_STATE_PLAYER_START); } 

Now, before they are visualized, they will also be updated through the updateTurbine function. All this function must be done to make sure that the turbines do not overlap with each other and move them up or down along the y axis as necessary (by cyclic moving around the array and comparing each of the objects in it). I did this function, but I completely lost all the loops. It’s about the way I am, and I feel like I'm wrong:

 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 (){ } } } } } 

You can find the source code and the farthest that I received without this thing breaking www.techgoldmine.com

Answer 1

There are errors in your code, see comments here:

 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 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 (){ } } } } } 

Here's how I would rewrite it without knowing what he was doing:

 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] this can lead to errors if you modify the array. I assume that you will only ever add it at the moment.

Answer 2

Your problem probably overlaps; the inner loop changes the value of i for the outer loop.

I changed i to j in the inner loop.

 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? } } } } } 

Let me know if this is fixed.

Answer 3

The answers were helpful, but none of them worked ... this is the code I got at the end.

 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){ } } } }