Javascript 形状不会从帆布墙上反弹。永远向下/向右

除了setDirection（）函数和在setNewPosition（）函数中调用该函数的变量外，所有代码似乎都工作正常。我对如何解决这一问题的想法一无所知

HTML

//加载文档时运行函数
函数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

还有JavaScript。问题函数是文件中的最后一个

function getElement(elementName) { //T

    var element = document.getElementById(elementName);
    return element;
}


function drawShape(canvasID){  //creates the shapes

    var canvas = getElement(canvasID);    
    var ctx= canvas.getContext('2d');   
    if (canvasID == "CANVAS1"){        
        ctx.rect(25, 25, 100, 100);
        ctx.fillStyle = "red";
        ctx.fill();
    }else if (canvasID == "CANVAS2"){ 
        ctx.rect(25, 25, 100, 100);
       ctx.fillStyle = "blue";
        ctx.fill();
    }else if(canvasID == "CANVAS3"){    
        ctx.clearRect(0,0,canvas.width, canvas.height);
        ctx.beginPath();
        ctx. arc(100,75,50,0,2*Math.PI);
        ctx.stroke();
        ctx.fillStyle = "green";
        ctx.fill();
    }else if(canvasID == "CANVAS4"){  
        ctx.beginPath();
        ctx. arc(100,75,50,0,2*Math.PI);
        ctx.stroke();
        ctx.fillStyle = "yellow";
        ctx.fill();
    }

}

function shape(objID, canvasID, dx, dy, delay){  //used to draw and move shapes
       var thisShape = this;

       thisShape.draw = function(){
            drawShape(canvasID);
        }
        thisShape.move = function(){
            setNewPosition(objID, dx, dy);
            setTimeout(thisShape.move, delay);

        }
}

function drawObj(id) {  //draws the shape
                document.shapeObj[id].draw();
            }


function setNewPosition(objID, dx, dy){

    var obj = getElement(objID);
    //var direction = setDirection(objID);          this is a trouble spot.     Goes with function that isnt working
    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';   

}

function moveObj(id){ //moves the shape
    document.shapeObj[id].move();
}   


//This is the problem area. If this part(and the var direction that references is in setNewPosition()
//is not included, it will animate but go toward the bottom corner forever.     I don't know how to
//incorporate the boundaries without breaking the program.
function setDirection(objID, dx, dy){


    var elm = document.getElementById(obj);
    var left = parseInt(elm.style.left);
    var top = parseInt(elm.style.top);

     if(left >= 400 || left <= 0){
        dx *= -1 ;
    }


    if(top >= 400 || top <= 0){
        dy *= -1 ;
    }

        left += dx;
        top += dy;

}      

函数getElement（elementName）{//T 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（）； }如果（canvasID==“CANVAS2”）{ ctx.rect（25,25100100）； ctx.fillStyle=“蓝色”； ctx.fill（）； }如果（canvasID==“CANVAS3”）{ ctx.clearRect（0,0，canvas.width，canvas.height）； ctx.beginPath（）； ctx.arc（100,75,50,0,2*Math.PI）； ctx.stroke（）； ctx.fillStyle=“绿色”； ctx.fill（）； }如果（canvasID==“CANVAS4”）{ ctx.beginPath（）； ctx.arc（100,75,50,0,2*Math.PI）； ctx.stroke（）； ctx.fillStyle=“黄色”； ctx.fill（）； } } 函数形状（objID、canvasID、dx、dy、delay）{//用于绘制和移动形状 var thisShape=这个； thisShape.draw=函数（）{ drawShape（canvasID）； } thisShape.move=函数（）{ 设置新位置（objID、dx、dy）； setTimeout（thisShape.move，delay）； } } 函数drawObj（id）{//绘制形状 document.shapeObj[id].draw（）； } 功能设置新位置（objID、dx、dy）{ var obj=getElement（objID）； //var direction=setDirection（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'； } 函数moveObj（id）{//移动形状 document.shapeObj[id].move（）； } //这就是问题所在。如果此部分（以及引用的var方向在setNewPosition（）中） //不包括在内，它将有动画效果，但会永远朝下角移动。我不知道怎么做 //在不破坏程序的情况下合并边界。 功能设置方向（objID、dx、dy）{ var elm=document.getElementById（obj）； var left=parseInt（elm.style.left）； var top=parseInt（elm.style.top）；

---

如果（left>=400 | | left=400 | | top您的

dx

和

dx

是通过值传递的，而不是通过引用。当您在

setDirection

中将它们乘以-1时，这对

setNewPosition

或

shape

中的值没有任何影响。您正陷入困境，因为

setDirection

只对t>有足够的帮助o防止您的形状完全超出范围

---

如果创建一个方向对象，

{dx:somevalue，dy:anothervalue}

，并传递该对象，而不是

dx

和

dx

，则在边界反射方向时所做的更改将保持不变。

是否尝试过调试？

function getElement(elementName) { //T

    var element = document.getElementById(elementName);
    return element;
}


function drawShape(canvasID){  //creates the shapes

    var canvas = getElement(canvasID);    
    var ctx= canvas.getContext('2d');   
    if (canvasID == "CANVAS1"){        
        ctx.rect(25, 25, 100, 100);
        ctx.fillStyle = "red";
        ctx.fill();
    }else if (canvasID == "CANVAS2"){ 
        ctx.rect(25, 25, 100, 100);
       ctx.fillStyle = "blue";
        ctx.fill();
    }else if(canvasID == "CANVAS3"){    
        ctx.clearRect(0,0,canvas.width, canvas.height);
        ctx.beginPath();
        ctx. arc(100,75,50,0,2*Math.PI);
        ctx.stroke();
        ctx.fillStyle = "green";
        ctx.fill();
    }else if(canvasID == "CANVAS4"){  
        ctx.beginPath();
        ctx. arc(100,75,50,0,2*Math.PI);
        ctx.stroke();
        ctx.fillStyle = "yellow";
        ctx.fill();
    }

}

function shape(objID, canvasID, dx, dy, delay){  //used to draw and move shapes
       var thisShape = this;

       thisShape.draw = function(){
            drawShape(canvasID);
        }
        thisShape.move = function(){
            setNewPosition(objID, dx, dy);
            setTimeout(thisShape.move, delay);

        }
}

function drawObj(id) {  //draws the shape
                document.shapeObj[id].draw();
            }


function setNewPosition(objID, dx, dy){

    var obj = getElement(objID);
    //var direction = setDirection(objID);          this is a trouble spot.     Goes with function that isnt working
    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';   

}

function moveObj(id){ //moves the shape
    document.shapeObj[id].move();
}   


//This is the problem area. If this part(and the var direction that references is in setNewPosition()
//is not included, it will animate but go toward the bottom corner forever.     I don't know how to
//incorporate the boundaries without breaking the program.
function setDirection(objID, dx, dy){


    var elm = document.getElementById(obj);
    var left = parseInt(elm.style.left);
    var top = parseInt(elm.style.top);

     if(left >= 400 || left <= 0){
        dx *= -1 ;
    }


    if(top >= 400 || top <= 0){
        dy *= -1 ;
    }

        left += dx;
        top += dy;

}