HTML5 Canvas 游戏开发复杂性

Question

我正在使用 HTML5 画布构建游戏。

您可以在这里找到它以及源代码：www.techgoldmine.com。

我会做一个 jsFiddle，但老实说，我的注意力太短（而且我自己大多太愚蠢），无法了解它是如何工作的。

我目前被困在一个函数上，它查看画布两侧某些元素的位置并移动它们，以使它们覆盖的 y 轴区域不重叠。我称它们为涡轮机，但细长的白色矩形会更准确。我建议刷新几次以直观地了解发生了什么。

这是生成涡轮机的函数：

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);

}  

到目前为止，我已经（在你们这些好人的帮助下）构建了一个函数（它是循环的一部分），可以挑选出每个涡轮机，并开始将它们相互比较。在理解如何让它们在需要时移动和停止时，我完全被难住了：

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

非常欢迎任何想法或要求提供更多解释和信息。我也有一种感觉，我把这件事复杂化了。妈的，我的头好痛。祝福你。

Answer 1

恐怕你的代码有点乱，我决定从头开始。

• 为bottom 和right 使用getter/setter。您可以分别在给定 left/width 和 top/height 值的情况下计算它们。这将避免您在修改时更改互补变量right，例如left。
• 您似乎正在寻找矩形的碰撞检测算法。如果矩形具有相同的 x 坐标，这很容易 - 如果第一个矩形的底部高于另一个矩形的底部，或者如果第一个矩形的顶部低于另一个矩形，则两个这样的矩形不会发生碰撞。另一个的底部。只要它们发生碰撞，就可以将此算法与while 循环一起使用以生成新的涡轮机。

这就是我最终得到的（正如我所说，它是一段单独的代码，所以你必须将它融入你的游戏中）：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();​