保持對象不會移出畫布

我的遊戲上的藍色對象由鍵盤按鍵（A，z，s，w）控制，但對象始終離開畫布，我如何保持它在畫布？不要擔心黃色物體

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
 
<style> 
 
canvas { 
 
    border: 1px solid #d3d3d3; 
 
    background-color: #f1f1f1; 
 
} 
 
</style> 
 
</head> 
 
<body onload="startGame()"> 
 
<script> 
 
var myGamePiece; 
 
var myObstacle; 
 

 
function startGame() { 
 
\t myGamePiece = new component(40, 80, "rgba(0, 0, 255, 0.5)", 20, 100); 
 
\t myObstacle = new component(20, 20, "yellow", 20, 60); 
 
\t myGameArea.start(); 
 
} 
 

 
var myGameArea = { 
 
    canvas : document.createElement("canvas"), 
 
    start : function() { 
 
     this.canvas.width = 580; 
 
     this.canvas.height = 370; 
 
     this.context = this.canvas.getContext("2d"); 
 
     document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
 
\t \t this.interval = setInterval(updateGameArea, 20); 
 
\t \t window.addEventListener('keydown', function (e){ 
 
\t \t  myGameArea.keys = (myGameArea.keys || []); 
 
\t \t \t myGameArea.keys[e.keyCode] = (e.type == "keydown"); 
 
\t \t \t }) 
 
\t \t 
 
\t \t window.addEventListener('keyup', function (e){ 
 
\t \t  myGameArea.keys[e.keyCode] = (e.type == "keydown"); 
 
\t \t }) 
 
    }, 
 
\t clear : function() { 
 
\t  this.context.clearRect(0,0, this.canvas.width, this.canvas.height); 
 
\t \t } 
 
} 
 
function component(width, height, color, x, y) { 
 
    this.gamearea = myGameArea; 
 
    this.width = width; 
 
    this.height = height; 
 
\t this.speedx = 0; 
 
\t this.speedy = 0; 
 
    this.x = x; 
 
    this.y = y; 
 
    this.update = function(){ \t 
 
    ctx = myGameArea.context; 
 
    ctx.fillStyle = color; 
 
    ctx.fillRect(this.x, this.y, this.width, this.height); 
 
\t } 
 
\t this.newPos = function() { 
 
\t  this.x += this.speedx; 
 
\t \t this.y += this.speedy; 
 
\t \t } 
 
} 
 
function updateGameArea() { 
 
    myGameArea.clear(); 
 
\t myObstacle.update(); 
 
\t myGamePiece.speedx = 0; 
 
\t myGamePiece.speedy = 0; 
 
\t if (myGameArea.keys && myGameArea.keys [65]) {myGamePiece.speedx = -5;} 
 
\t if (myGameArea.keys && myGameArea.keys [83]) {myGamePiece.speedx = 5;} 
 
\t if (myGameArea.keys && myGameArea.keys [87]) {myGamePiece.speedy = -5;} 
 
\t if (myGameArea.keys && myGameArea.keys [90]) {myGamePiece.speedy = 5;} 
 
\t myGamePiece.newPos(); 
 
    myGamePiece.update(); 
 
} 
 

 
</script> 
 

 
<p>The start game</p> 
 

 
</body> 
 
</html>

我遊戲中的藍色物體是由鍵盤按鍵（A，Z，S，W），但對象保持controled走出畫布，我如何將它保留在畫布內？不要擔心黃色物體

來源

2017-03-04 F.Celes

「W」，「A」，「S」和「D」有什麼問題？ – BenM

在newPos功能，你應該增加x只有等到X +寬度大於畫布寬度低。 y一樣，你應該增加它，直到y +高度小於畫布高度。

和遞減直到x和y是大於0

我希望這是有道理的，否則請詢問。

來源

2017-03-04 16:42:27

在更新位置之前，檢查新位置是否在界限內。

尤其是，您應該檢查x的新值是否大於或等於0，如果它不是不更新x。 y也是如此。

上限有點棘手，因爲它需要使用對象的大小進行檢查。如果不是不更新x，你需要做的是檢查width加上x的新值是否小於或等於世界的大小。做相當於y。

目前你的代碼如下：

this.x += this.speedx; 
this.y += this.speedy;

這相當於：

this.x = this.x + this.speedx; 
this.y = this.y + this.speedy;

現在，this.x + this.speedx和this.y + this.speedy分別是x和y，新的價值觀。我們可以將其改寫如下：

let newx = this.x + this.speedx; 
let newy = this.y + this.speedy; 
this.x = newx; 
this.y = newy;

到目前爲止，我們剛剛重構了代碼。這應該和以前完全一樣。

讓我們去了什麼，我說：

你應該檢查是否爲x新的值大於或等於0，如果不是不更新x

這與說法相同：只有在x的新值大於或等於0時更新x。另外，在代碼：

let newx = this.x + this.speedx; 
let newy = this.y + this.speedy; 
if (newx >= 0) 
{ 
    this.x = newx; 
} 
this.y = newy;

同樣爲y。

let newx = this.x + this.speedx; 
let newy = this.y + this.speedy; 
if (newx >= 0) 
{ 
    this.x = newx; 
} 
if (newy >= 0) 
{ 
    this.y = newy; 
}

檢查，如果width加上x新值較小或等於世界的大小，如果不是不更新x

另一種方式說的是：只有更新x時width加上x的新值小於或等於世界的大小。另外，在代碼：

let newx = this.x + this.speedx; 
let newy = this.y + this.speedy; 
if (newx >= 0 && this.width + newx <= this.gamearea.canvas.width) 
{ 
    this.x = newx; 
} 
if (newy > 0) 
{ 
    this.y = newy; 
}

執行相當於y的

let newx = this.x + this.speedx; 
let newy = this.y + this.speedy; 
if (newx >= 0 && this.width + newx <= this.gamearea.canvas.width) 
{ 
    this.x = newx; 
} 
if (newy > 0 && this.height + newx <= this.gamearea.canvas.height) 
{ 
    this.y = newy; 
}

來吧，複製粘貼的是，它應該工作... 除非我誤解你的代碼。然而，我想鼓勵你瞭解這裏發生了什麼。否則，你會在你的理解中出現一個缺口，而這個缺口會回來咬你。

對於這些類型的遊戲開發，您需要根據尺寸來思考。在這種特殊情況下，我們可以通過單獨考慮每個組件解決這個問題......請考慮以下事項：

你不應該讓X大於零較小的值 - 你不應該允許值的和 x使得x +寬度大於世界的寬度。

正如你可以在圖片中看到的x值必須始終大於0更大，使得x + width比世界的寬度。

換句話說，x必須在間隔[0, (width of the world) - width]。

對於y等同。這些要求來自你想要建模的行爲（你不要對象超出範圍）並且沒有歧義地定義它（爲這些範圍給出值，所以你可以在代碼中檢查它們）。

注意：你的速度是每幀的像素，如果你的幀速率變化，它會影響多少物體移動。這是因爲您沒有使用幀間的流逝時間......但這不是當前的主題。另外，處理碰撞是另一個話題。

來源

2017-03-04 16:48:18 Theraot

非常感謝你，但是我很新，而且仍然是一名學生，所以我不太明白你想要怎麼做，除非你解釋編碼，所以我可以知道我的錯誤在哪裏。再次感謝你。 –

@ F.Celes更新時間雖然我明白通過實例學習，但理解一個人想要什麼並在代碼中對其進行建模幾乎是編程的內容......因此值得練習。當使用現代化的平臺時，你必須竭盡全力去解決任何問題，所以不要害怕嘗試。那麼，備份以防萬一。 – Theraot

Theraot，你是一個英雄！非常感謝您在此打開一個新窗口，我試圖在本網站上向您發送個人消息，但似乎沒有任何界面，無論如何，我可以直接與您聯繫嗎？（當然，如果你允許的話） –

保持對象不會移出畫布

回答

相關問題