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