Question

我的游戏上的蓝色物体由键盘键（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）控制，但是物体一直走出画布，我如何将它保留在画布中？不要担心黄色物体

Answer 1

在newPos函数中，您应该仅增加x，直到x + width低于画布宽度。对于y，您应该增加它，直到y + height小于画布高度。

并递减直到x和y大于0.

我希望它有意义，否则请问。

Answer 2

在更新头寸之前，检查新头寸是否在界限范围内。

特别是，您应该检查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等效。

这些要求来自您想要建模的行为（您没有超出范围的对象）并且没有歧义地定义它（给这些边界赋值，因此您可以在代码中检查它们。）

注意：您拥有的速度是每帧的像素数，如果您的帧速率发生变化，它将影响对象的移动量。这是因为您没有使用帧之间经过的时间......但这不是手头的主题。另外，处理碰撞是另一个话题。

防止对象移出画布

2 个答案: