HTML5画布游戏开发复杂化

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。您可以分别计算出它们的值分别为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();​