Question

I’m building a game using HTML5 canvas.

You can find it here, along with the source code: http://www.techgoldmine.com.

I’d make a jsFiddle, but in all honesty my attention span is too short (and myself mostly too stupid) to learn how it works.

I’m currently stuck at a function that looks at the positioning of certain elements on either side of the canvas and moves them so that the y-axis area they cover does not overlap. I call them turbines, but thin white rectangles would be more accurate. I suggest refreshing a few times to visually understand what’s going on.

This is the function that spawns the turbines:

function gameStateNewLevel(){
    for (var i = 0; i < 4; i++){
        turbine = {};
        turbine.width = 10;
        turbine.height = 150;
        turbine.y = Math.floor(Math.random()*600)
        if (Math.random()*10 > 5){
            turbine.side = leftSide;
        }else{
            turbine.side = rightSide;
        }
        turbine.render  = function (){
            context.fillStyle = "#FFFFFF"
    context.fillRect(turbine.side, turbine.y, turbine.width,turbine.height);
        }
        turbine.PositionTop = turbine.y;
        turbine.PositionBottom = turbine.y + turbine.height;

        turbines.push(turbine);

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

}  

So far I’ve built (with the help of you wonderful people) a function (that is part of a loop) picking out each of these turbines, and starts comparing them to one another. I’m completely stumped when it comes to understanding how I’ll get them to move and stop when needed:

function updateTurbines(){
var l = turbines.length-1; 
    for (var i = 0; i < l; i++){
    var tempTurbine1 = turbines[i];
     tempTurbine1.PositionTop = tempTurbine1.y; 
     tempTurbine1.PositionBottom = tempTurbine1.y +    tempTurbine1.height;
     for (var j = 0; j < l; j++) { 
      var tempTurbine2 = turbines[j];
      tempTurbine2.PositionTop = tempTurbine2.y;
      tempTurbine2.PositionBottom = tempTurbine2.y + tempTurbine2.height;
      if ((tempTurbine1 !== tempTurbine2) && FIXME == true){
       if(tempTurbine1.PositionBottom >=    tempTurbine2.PositionTop){
                        turbines[j].y -=2;
                                            //A while loop breaks the browser :(

                    }

                }
            }FIXME = false;
        }
}

Any ideas or requests for additional explanation and info are more than welcome. I also have a feeling I’m severely over complicating this. Goddamn my head hurts. Bless you.

Answer 1

I’m afraid your code is a little bit messy do I decided to begin with a clean slate.

• Use getters/setters for bottom and right. You can calculate them given the left/width and top/height values, respectively. This will save you from altering the complementary variable right when modifying e.g. left.
• You seem to be looking for a collison detection algorithm for rectangles. This is quite easy if the rectangles have the same x-coordinate – two such rectangles do not collide if the bottom of the first is above the top of the other, or if the top of the first is under the bottom of the other. Use this algorithm along with a while loop to generate a new turbine as long as they collide.

This is what I ended up with (it’s a separate piece of code as I stated, so you’ll have to blend it into your game): http://jsfiddle.net/eGjak/249/.

var ctx = $('#cv').get(0).getContext('2d');

var Turbine = function(left, top, width, height) {
    this.left = left;
    this.top = top;
    this.width = width;
    this.height = height;
};

Object.defineProperties(Turbine.prototype, {
    bottom: {
        get: function() {
            return this.top + this.height;
        },
        set: function(v) {
            this.top = v - this.height;
        }
    },
    right: {
        get: function() {
            return this.left + this.width;
        },
        set: function(v) {
            this.left = v - this.width;
        }
    }
});

var turbines = [];

function turbineCollides(tn) {
    for(var i = 0; i < turbines.length; i++) {
        var to = turbines[i];
        // they do not collide if if one's completely under
        // the other or completely above the other
        if(!(tn.bottom <= to.top || tn.top >= to.bottom)) {
            return true;
        }
    }

    return false; // this will only be executed if the `return true` part
                  // was never executed - so they the turbine does not collide
}

function addTurbine() {
    var t, h;

    do { // do while loop because the turbine has to be generated at least once

        h = Math.floor(Math.random() * 300);
        t = new Turbine(0, h, 15, 100);

    } while(turbineCollides(t));

    turbines.push(t);
}

// add two of them (do not add more than 4 because they will always collide
// due to the available space! In fact, there may be no space left even when
// you've added 2.)
addTurbine();
addTurbine();

function draw() {
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, 400, 400);
    ctx.fillStyle = "white";

    for(var i = 0; i < turbines.length; i++) {
        var turbine = turbines[i];
        ctx.fillRect(turbine.left, turbine.top,
                     turbine.width, turbine.height);
    }
}

draw();​