Javascript 将对象保持在边界内

这将从DOM生成4个形状，这些形状在屏幕上的位置不同，并在提示时在屏幕上移动

我在使boundaryChecker函数工作时遇到问题。多年来我一直在想该怎么办，但我被难住了。我知道我必须按值调用，而不是引用dx和dy值，因为它们是对象，但我不确定如何执行。如果有人能提供代码/伪代码或建议，我将不胜感激

最终，它需要到达终点，并切换方向，以便在屏幕上跳跃

代码示例：

函数getElement（elementName）{//这类似于getElementById（）
var element=document.getElementById（elementName）；
返回元素；
}
函数drawShape（canvasID）{//创建形状
var canvas=getElement（canvasID）；
var ctx=canvas.getContext（'2d'）；
如果（canvasID==“CANVAS1”）{
ctx.rect（25,25100100）；
ctx.fillStyle=“红色”；
ctx.fill（）；
}else if（canvasID==“CANVAS2”）{
ctx.rect（25,25100100）；
ctx.fillStyle=“蓝色”；
ctx.fill（）；
}else if（canvasID==“CANVAS3”）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.arc（100,75,50,0,2*Math.PI）；
ctx.stroke（）；
ctx.fillStyle=“绿色”；
ctx.fill（）；
}else if（canvasID==“CANVAS4”）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.arc（100,75,50,0,2*Math.PI）；
ctx.stroke（）；
ctx.fillStyle=“黄色”；
ctx.fill（）；
}
}
函数setNewPosition（objID、dx、dy）{//neew形状位置
var obj=getElement（objID）；
//边界检查（objID）；
var newleft=parseInt（obj.style.left）+dx；
var newtop=parseInt（obj.style.top）+dy；
obj.style.left=newleft.toString（）+'px'；
obj.style.top=newtop.toString（）+'px'；
}
函数形状（objID、canvasID、dx、dy、delay）{
var thisShape=这个；
this.objID=objID；
this.dx=dx；
this.dy=dy；
这是0.speedX=0；
该值为0；
thisShape.draw=函数（）{
drawShape（canvasID）；
}
thisShape.move=函数（）{
设置新位置（objID、dx、dy）；
setTimeout（thisShape.move，delay）；
}
}
函数drawObj（id）{//启动进程以直观地显示形状
document.shapeObj[id].draw（）；
}
函数moveObj（id）{//开始移动形状的过程。此时无限移动
document.shapeObj[id].move（）；
}
//一种边界检查器。这就是我被困的地方。任何事都有帮助。
/*函数边界检查（objID、canvasID、dx、dy）{
var elm=getElement（objID）；
var left=parseInt（elm.style.left）；
var top=parseInt（elm.style.top）；
如果（左>400 | |左<0）{
dx*=-1；
}
如果（顶部>400 | |顶部<0）{
dy*=-1；
}
左+=dx；
top+=dy；
}*/

//加载文档时运行函数
函数start（）{
//在此处加载DOM对象
document.shapeObj={}；
//在DOM-T中创建形状
document.shapeObj[“SHAPE1”]=新形状（“SHAPE1”、“CANVAS1”、1、1、10）；
document.shapeObj[“SHAPE2”]=新形状（“SHAPE2”，“CANVAS2”，1,1,10）；
document.shapeObj[“SHAPE3”]=新形状（“SHAPE3”、“CANVAS3”、1、1、10）；
document.shapeObj[“SHAPE4”]=新形状（“SHAPE4”、“CANVAS4”、1、1、10）；
}
形状分配
画


移动形状1
移动形状2
移动形状3
移动形状4

您忘记了更新左侧和顶部样式的值，那么它的工作原理如下：

  var left = parseInt(elm.style.left);
  var top = parseInt(elm.style.top);
  if (left > 100 || left < 0) {
    dx = 0, left = 100;
    elm.style.left = left + 'px'
  }
  if (top > 100 || top < 0) {
    dy = 0, top = 100
    elm.style.top = top + 'px'
  }

var left=parseInt（elm.style.left）；
var top=parseInt（elm.style.top）；
如果（左>100 | |左<0）{
dx=0，左=100；
elm.style.left=左+'px'
}
如果（顶部>100 | |顶部<0）{
dy=0，top=100
elm.style.top=top+px
}

函数getElement（elementName）{//这类似于getElementById（）
var element=document.getElementById（elementName）；
返回元素；
}
函数drawShape（canvasID）{//创建形状
var canvas=getElement（canvasID）；
var ctx=canvas.getContext（'2d'）；
如果（canvasID==“CANVAS1”）{
ctx.rect（25,25100100）；
ctx.fillStyle=“红色”；
ctx.fill（）；
}else if（canvasID==“CANVAS2”）{
ctx.rect（25,25100100）；
ctx.fillStyle=“蓝色”；
ctx.fill（）；
}else if（canvasID==“CANVAS3”）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.arc（100,75,50,0,2*Math.PI）；
ctx.stroke（）；
ctx.fillStyle=“绿色”；
ctx.fill（）；
}else if（canvasID==“CANVAS4”）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.arc（100,75,50,0,2*Math.PI）；
ctx.stroke（）；
ctx.fillStyle=“黄色”；
ctx.fill（）；
}
}
函数setNewPosition（objID、dx、dy）{//neew形状位置
var obj=getElement（objID）；
边界检查（objID、dx、dy）；
var newleft=parseInt（obj.style.left）+dx；
var newtop=parseInt（obj.style.top）+dy；
obj.style.left=newleft.toString（）+'px'；
obj.style.top=newtop.toString（）+'px'；
}
函数形状（objID、canvasID、dx、dy、delay）{
var thisShape=这个；
this.objID=objID；
this.dx=dx；
this.dy=dy；
这是0.speedX=0；
该值为0；
thisShape.draw=函数（）{
drawShape（canvasID）；
}
thisShape.move=函数（）{
设置新位置（objID、dx、dy）；
setTimeout（thisShape.move，delay）；
}
}
函数drawObj（id）{//启动进程以直观地显示形状
document.shapeObj[id].draw（）；
}
函数moveObj（id）{//开始移动形状的过程。此时无限移动
document.shapeObj[id].move（）；
}
//一种边界检查器。这就是我被困的地方。什么都行。
函数边界检查（objID、dx、dy）{
var elm=getElement（objID）；
var left=parseInt（elm.style.left）；
var top=parseInt（elm.style.top）；
如果（左>100 | |左<0）{