Javascript 基于canvasjs的墙检测

我制作了这个脚本，在它的父容器中移动一个较小的div，但是我需要它，这样它就不会超过父容器的边界（由1px黑线边界表示）。有人能帮我吗

var guy=document.getElementById（“guy”）；
var container=document.getElementById（“容器”）；
var-guyLeft=0；
var y=0；
功能动画（e）{
如果（e.keyCode==39）{
左+=2；
guy.style.left=guyLeft+px；
}
否则如果（e.keyCode==37）{
guyLeft-=2；
guy.style.left=guyLeft+px；
}
否则如果（e.keyCode==40）{
y+=2；
guy.style.top=y+“px”；
}
否则如果（e.keyCode==38）{
y-=2；
guy.style.top=y+“px”；
}
}
document.onkeydown=anim
#容器{
高度：300px；
宽度：300px；
外形：2倍纯黑；
位置：相对位置；
}
#家伙{
位置：绝对位置；
高度：20px；
宽度：20px；
外形：1px纯黑；
背景色：红色；左侧：0；
}
您可以使用IF语句来检测字符何时位于边缘

以您的示例为例，您的JavaScript将变成：

var guy = document.getElementById("guy");
var container = document.getElementById("container");
var guyLeft = 0;
var y = 0;
function anim(e) {
if (e.keyCode == 39 && guyLeft <= 278) {
guyLeft += 2; guy.style.left = guyLeft + "px";
}
else if (e.keyCode == 37 && guyLeft >= 2) {
guyLeft -= 2; guy.style.left = guyLeft + "px";
}
else if (e.keyCode == 40 && y <= 278) {
y += 2; guy.style.top = y + "px";
}
else if (e.keyCode == 38 && y >= 2) {
y -= 2; guy.style.top = y + "px";
}

} document.onkeydown = anim;

有帮助吗？