Javascript 防止对象移出画布 我游戏中的蓝色对象由键盘键（A、z、s、w）控制，但对象一直在画布外，我如何将其保持在画布内？ 不要担心黄色的物体

帆布{
边框：1px实心#D3；
背景色：#f1f1；
}
我的配子；
肌障；
函数startName（）{
myGamePiece=新组件（40,80，“rgba（0,0,255,0.5）”，20,100）；
myObstacle=新组件（20,20，“黄色”，20,60）；
myGameArea.start（）；
}
var myGameArea={
画布：document.createElement（“画布”），
开始：函数（）{
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）；
addEventListener（'keydown'，函数（e）{
myGameArea.keys=（myGameArea.keys | | |[]）；
myGameArea.keys[e.keyCode]=（e.type==“keydown”）；
})
addEventListener（'keyup'，函数（e）{
myGameArea.keys[e.keyCode]=（e.type==“keydown”）；
})
},
清除：函数（）{
this.context.clearRect（0,0，this.canvas.width，this.canvas.height）；
}
}
功能组件（宽度、高度、颜色、x、y）{
this.gamearea=myGameArea；
这个。宽度=宽度；
高度=高度；
这是0.speedx=0；
该值为0；
这个.x=x；
这个。y=y；
this.update=函数（）{
ctx=myGameArea.context；
ctx.fillStyle=颜色；
ctx.fillRect（this.x，this.y，this.width，this.height）；
}
this.newPos=函数（）{
this.x+=this.speedx；
this.y+=this.speedy；
}
}
函数updateGameArea（）{
myGameArea.clear（）；
myObstacle.update（）；
myGamePiece.speedx=0；
myGamePiece.speedy=0；
如果（myGameArea.keys&&myGameArea.keys[65]）{myGamePiece.speedx=-5；}
如果（myGameArea.keys&&myGameArea.keys[83]）{myGamePiece.speedx=5；}
如果（myGameArea.keys&&myGameArea.keys[87]）{myGamePiece.speedy=-5；}
如果（myGameArea.keys&&myGameArea.keys[90]）{myGamePiece.speedy=5；}
myGamePiece.newPos（）；
myGamePiece.update（）；
}
开始比赛

在

newPos

函数中，您应该只增加x，直到x+宽度小于画布宽度。与y相同，您应该增加它，直到y+高度小于画布高度

和递减，直到x和y大于0

---

我希望这是有意义的，否则请询问。

在更新职位之前，请检查新职位是否在范围内

特别是，您应该检查

x

的新值是否大于或等于

0

，如果不是，则不更新

x

。这同样适用于

y

上限有点棘手，因为它需要使用对象的大小进行检查。您需要做的是检查

width

加上

x

的新值是否小于或等于世界大小，如果不是，请不要更新

x

。对

y

执行等效操作

---

目前，您的代码如下所示：

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

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

这相当于：

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

现在，

this.x+this.speedx

和

this.y+this.speedy

分别是

x

和

y

的新值。我们可以将其改写如下：

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

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;

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

检查

width

加上

x

的新值是否小于或等于世界大小，如果不是，则不更新

x

另一种说法是：只有当

width

加上

x

的新值小于或等于世界大小时，才更新

x

。或者，在代码中：

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

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;
}

让newx=this.x+this.speedx；
让newy=this.y+this.speedy；
如果（newx>=0&&this.width+newx 0）
{
this.y=newy；
}

对y做等价的处理

让newx=this.x+this.speedx；
让newy=this.y+this.speedy；
如果（newx>=0&&this.width+newx 0&&this.height+newx
W
、
A
、
s
和
D
？非常感谢，但我在这方面还是个新手，还是个学生，所以我不太明白你想用它做什么，除非你用编码解释，这样我才能知道我的错误在哪里。谢谢你一次更多。@F.Celes更新。虽然我理解通过示例学习，但理解一个人想要什么并用代码对其进行建模与编程非常相似……因此，这是一件值得实践的事情。当使用现代平台时，你必须不遗余力地制造任何问题，所以不要害怕尝试。好吧，做备份只是以防万一.Theraot，你是一个英雄！！！非常感谢你在我的脑海中打开了一个新的窗口，我试图在这个网站上给你发送一条个人信息，但似乎没有界面，我是否可以直接与你联系？（当然，如果你允许的话）@F.Celes在这个网站上有一些类似的东西，但它背后有一道声誉墙（即：为特定的用户群体创建聊天室）。这提醒我，评论不适用于扩展讨论。我的联系信息位于我的个人资料中的“开发者故事”下。我想邀请您尝试一下。您将有更好的机会找到与游戏开发相关问题的帮助。编辑：尝试搜索，可能已经询问过。您好，Theraot，希望您是d好吧，我取得了一点进步，但现在我不知道该怎么做，我的想法是创造