防止物體移出畫布
[英]keep object from moving out of the canvas
問題描述
- 我游戲中的藍色對象由鍵盤鍵（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() { myGamePiece = new component(40, 80, "rgba(0, 0, 255, 0.5)", 20, 100); myObstacle = new component(20, 20, "yellow", 20, 60); 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]); this.interval = setInterval(updateGameArea, 20); window.addEventListener('keydown', function (e){ myGameArea.keys = (myGameArea.keys || []); myGameArea.keys[e.keyCode] = (e.type == "keydown"); }) window.addEventListener('keyup', function (e){ myGameArea.keys[e.keyCode] = (e.type == "keydown"); }) }, clear : function() { this.context.clearRect(0,0, this.canvas.width, this.canvas.height); } } function component(width, height, color, x, y) { this.gamearea = myGameArea; this.width = width; this.height = height; this.speedx = 0; this.speedy = 0; this.x = x; this.y = y; this.update = function(){ ctx = myGameArea.context; ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); } this.newPos = function() { this.x += this.speedx; this.y += this.speedy; } } function updateGameArea() { myGameArea.clear(); myObstacle.update(); myGamePiece.speedx = 0; myGamePiece.speedy = 0; if (myGameArea.keys && myGameArea.keys [65]) {myGamePiece.speedx = -5;} if (myGameArea.keys && myGameArea.keys [83]) {myGamePiece.speedx = 5;} if (myGameArea.keys && myGameArea.keys [87]) {myGamePiece.speedy = -5;} if (myGameArea.keys && myGameArea.keys [90]) {myGamePiece.speedy = 5;} myGamePiece.newPos(); myGamePiece.update(); } </script> <p>The start game</p> </body> </html>
- 我游戲中的藍色對象由鍵盤鍵（A，z，s，w）控制，但該對象不斷從畫布中移出，如何將其保留在畫布中？ 不用擔心黃色物體
2 個解決方案
解決方案1
0 2017-03-04 16:42:27
在newPos函數中，應僅遞增x直到x + width小於畫布寬度。 與y相同，您應該增加它直到y + height小於畫布高度。
遞減直到x和y大於0。
我希望這是有道理的，否則請詢問。
解決方案2
0 2017-03-04 16:48:18
在更新位置之前，請檢查新位置是否在范圍之內。
特別是，您應該檢查x的新值是否大於或等於0 ，如果不是，則不更新x 。 y 。
上限有些棘手，因為它需要使用對象的大小進行檢查。 您要做的就是檢查width和x的新值是否小於或等於世界的大小，如果不是，則不更新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當新值x大於或等於0 。 或者，在代碼中：
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的值小於零-您不應允許
y
x的值使x + width大於世界的寬度。
正如您在圖像中看到的那樣， x的值必須始終大於0並且x + width小於世界的寬度。
換句話說， x必須在[0, (width of the world) - width]的區間內。
y等效。
這些要求來自您要建模的行為（您不希望對象超出范圍）並且對其進行無歧義定義（將值賦予這些范圍，因此您可以在代碼中對其進行檢查）。
注意：您擁有的速度以每幀像素為單位，如果幀速率發生變化，它將影響對象移動的程度。 這是因為您沒有使用幀之間的經過時間...但這不是當前的主題。 另外，處理碰撞是另一個主題。
在畫布上平穩地將對象從A移動到B
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.