HTML5遊戲 - 散步邊界問題

Question

我正在製作一個自頂向下的射手，基本上角色始於屏幕中間，矩形內（安全區域）。角色不是靜態的，場景是。他可以在安全區內走動。一旦角色走出這個區域，靜態畫面就會切換......角色是靜態的，場景正在他身邊移動。

唯一的問題是，我不能走回安全區域，讓我的靜力學再次切換。

所以我永遠卡在區外。我所做的只是檢查我的角色位置是否在某個值內（這是正確的），如果他不在，那麼我的KeyControls會影響地圖而不是角色。

所以這是我的邊界（安全區）檢查：

//Walking Window Boundaries 
    var boundarySizeX = 400; 
    var boundarySizeY = 200; 

    ctxWalkBoundary.fillStyle = "grey"; 
    ctxWalkBoundary.fillRect(gameWidth/2 - boundarySizeX/2, gameHeight/2 - boundarySizeY/2, boundarySizeX, boundarySizeY); 
    ctxWalkBoundary.clearRect((gameWidth/2 - boundarySizeX/2) + 2, (gameHeight/2 - boundarySizeY/2) + 2, (boundarySizeX) - 4, (boundarySizeY) -4); 

    var paddingLeft = (gameWidth - boundarySizeX)/2; 
    var paddingRight = gameWidth - ((gameWidth - boundarySizeX)/2) - this.charWidth; 
    var paddingTop = (gameHeight - boundarySizeY)/2; 
    var paddingBottom = gameHeight - ((gameHeight - boundarySizeY)/2) - this.charHeight; 

    var paddingY = (gameHeight - boundarySizeY)/2; 

    if(this.drawX > paddingLeft && this.drawX < paddingRight && this.drawY > paddingTop && this.drawY < paddingBottom){ 
     inBoundary = true; 
    } 
    else{ 
     inBoundary = false; 
     console.debug("Out Of Boundary!"); 
    } 

這是我KeyChecker：

//UP 
    if(this.isUpKey){ 

     //Character movement 
     if(inBoundary){ 
      this.drawX = this.drawX + this.speed * Math.cos((this.characterRotation)); 
      this.drawY = this.drawY + this.speed * Math.sin((this.characterRotation)); 
     } 
     else{ 
      mapPositionX = mapPositionX - this.speed * Math.cos((this.characterRotation)); 
      mapPositionY = mapPositionY - this.speed * Math.sin((this.characterRotation)); 
     } 

我的性格始終面臨着我的鼠標（旋轉）。所以每次用戶按下W或Up時，角色將始終走向鼠標位置。

任何想法，我可以回到該區域？

----- -----更新

我想我需要以某種方式檢查，如果我還在安全區朝外 - 如果不是，那麼反向他靜。

Answer 1

只需分開兩件事：地圖和視圖。

地圖是你的等級，你保持有座標的對象。 查看是您在屏幕上看到的地圖的一部分。 查看有4個屬性：x，y，widht和height，其中widht和height最可能是您的畫布大小。

如果你的遊戲從屏幕中間的地圖點（0,0）開始，那麼你的view（x，y）座標應該是（-view.width/2，-view.height/2） 。

如何在視圖中繪製角色和對象？

首先，只繪製視圖矩形中的東西。 所以遍歷所有對象，並檢查是否

object.x >= view.x && object.x <= view.x + view.width && object.y >= view.y && object.y <= view.y + view.height 

（你應該考慮到的物體的邊界太）。

如果對象在視圖區域中，則在位置(object.x - view.x, object.y - view.y)處繪製它。 而這就是繪畫的東西。

移動角色並查看他的區域。

現在，當你的角色有邊界衝突，例如（右邊界碰撞）

character.x >= view.x + view.width 

然後用一些價值遞增view.x移動以正確的（可能是character.width/2）。

- UPDATE -

我看，你是不是在你的遊戲中使用OOP（實際上你是因爲一切都在JS是一個對象，但你不使用它的目的）。

在JS中的OOP是很多解釋，所以我會盡量縮短它。

您可以使用JSON格式製作對象，如角色，地圖和視圖。

character = { 
    x: 0, 
    y: 0, 
    xspeed: 0, 
    yspeed: 0, 
    speed: 0, 
    radius: 20, 
} 

map = { 
    objects: [ 
     {sprite: 'tree.jpg', x: 100, y: 50}, 
     {sprite: 'stone.jpg', x: 20, y: 30}, 
    ], 
} 

view = { 
    width: canvas.width, 
    height: canvas.height, 
    x: -this.width/2, 
    y: -this.height/2, 
} 

這些都是你可以在你的函數使用像這樣的對象：

for (var i=0; i++, i<map.objects.length) { 
    if (map_obj.x >= view.x && map_obj.x <= view.x + view.width && map_obj.y >= view.y && map_obj.y <= view.y + view.height) { 
     var map_obj = map.objects[i]; 
     draw_sprite(map_obj.sprite, map_obj.x - view.x, map_obj.y - view.y); 
    } 
} 

這是不是最好的方式，但它現在仍然是很多比你的好。當你瞭解面向對象的時候，你會爲自己做出更好的選擇。

Answer 2

這裏的問題是，您正在等待角色出界，然後移動地圖。但是國旗已經被絆倒了，現在無論你走向何方，角色的運動都是靜止的，因爲你已經走出了界限。

你可以代替檢測當一個字符是要越過邊界，防止它通過移動地圖，而不是：

//UP 
if(this.isUpKey){ 

// save the x and y offset to prevent needless recalculation 
var xOffset = this.speed * Math.cos(this.characterRotation), 
    yOffset = this.speed * Math.sin(this.characterRotation); 

    //Character movement 
    if(boundaryCheck(xOffset, yOffset)){ 
     this.drawX = this.drawX + xOffset; 
     this.drawY = this.drawY + yOffset; 
    } 
    else{ 
     mapPositionX = mapPositionX - xOffset 
     mapPositionY = mapPositionY - yOffset; 
    } 

然後boundaryCheck取x和y三角洲和計算出，如果他們仍然在界限。如果角色仍然在界限內，return true和角色將移動，否則地圖會移動。

function boundaryCheck(xOffset, yOffset){ 
// variables set and other stuff done... 
    if(this.drawX + xOffset > paddingLeft && this.drawX + xOffset < paddingRight && this.drawY + yOffset > paddingTop && this.drawY + yOffset < paddingBottom){ 
     return true; 
    } 
    else{ 
     console.debug("Out Of Boundary!"); 
     return false; 
    } 

}; 

這樣你就不必弄清楚一個超出界限的角色是否正在向邊界移動。相反，您需要預先確定角色的位置，並相應地進行調整，並始終將其置於邊界之內。

如果沒有完整的代碼，這當然不是可測試的，但我認爲它應該與您給出的內容一致。