Question

除了setDirection（）函数和在setNewPosition（）函数中调用函数的变量之外，所有代码似乎都工作正常。我对如何解决这个问题感到茫然。

HTML

<html>
    <head>
    <script type="text/javascript" src="jstest2.js"></script>
    <script type="text/javascript">
        // run function when document is loaded
            function start() {
                //load DOM objects here
                document.shapeObj = {};

                    //Creating the shapes in the DOM -T
                    document.shapeObj["SHAPE1"] = new shape("SHAPE1", "CANVAS1", 1, 1, 10);
                    document.shapeObj["SHAPE2"] = new shape("SHAPE2", "CANVAS2", 1, 1, 10);
                    document.shapeObj["SHAPE3"] = new shape("SHAPE3", "CANVAS3", 1, 1, 10);
                    document.shapeObj["SHAPE4"] = new shape("SHAPE4", "CANVAS4", 1, 1, 10);

        }

    </script> 
    </head>
    <title> Shape Assignment</title>

    <body onload="start()">


        <!-- These are the button div id's that call the drawObj Function - T -->
        <div id = "buttons">
            Draw
            <input value= "Draw Shape 1" type ="button" onclick="drawObj('SHAPE1')">
            <input value= "Draw Shape 2" type ="button" onclick="drawObj('SHAPE2')">
            <input value= "Draw Shape 3" type ="button" onclick="drawObj('SHAPE3')">
            <input value= "Draw Shape 4" type ="button" onclick="drawObj('SHAPE4')">
            <br>
              <button onclick="moveObj('SHAPE1')">Move Shape 1</button>
            <button onclick="moveObj('SHAPE2')">Move Shape 2</button>
            <button onclick="moveObj('SHAPE3')">Move Shape 3</button>
            <button onclick="moveObj('SHAPE4')">Move Shape 4</button>
            </div>



                <div id="SHAPE1" style="position: absolute; top: 40px; left: 30px;">
            <canvas id="CANVAS1" width="400" height="400"></canvas>
            </div>
        <div id="SHAPE2" style="position: absolute; top: 160px; left: 320px;">
            <canvas id="CANVAS2" width="400" height="400"></canvas>
            </div>
        <div id="SHAPE3" style="position: absolute; top: 30px; left: 380px;">
            <canvas id="CANVAS3" width="400" height="400"></canvas>
            </div>
        <div id="SHAPE4" style="position: absolute; top: 350px; left: 20px;">
            <canvas id="CANVAS4" width="400" height="400"></canvas>
            </div>

</body>
</html>

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

}

如果有人能提供帮助，我们非常感谢。我仍然需要输入方向按钮和停止按钮，但此刻我被困在这里。提前致谢！

Answer 1

您的dx和dx按值传递，而不是按参考传递。在setDirection中将它们乘以-1会对setNewPosition或shape中的值没有影响。你被困在一个角落里，因为setDirection只能帮助你防止你的形状完全超出界限。

如果你创建一个方向对象{dx: somevalue, dy: anothervalue}，并传递该对象而不是dx和dx，那么当您在边界处反映方向时，您的更改将会坚持。< / p>

形状不会从Canvas Walls反弹。永远向下/向右走

1 个答案: