矩形组的镜像移动(如何更改移动方向)

Question

我只是在玩弄我的代码。我有一个移动的矩形。我在坐标X和Y上添加了if条件。like (x和y上的posx和posy positon )：

if (!go_down) {
    if (posx < 250 && go_right) {
        posx += 3;
    } else if (posx < 30) {
        go_right = true;
        go_down = true;
    } else if (!go_right) {
        posx -= 3;
    } else {
        go_right = false;
        go_down = true;
    }
} else {
    //if(posy <= 30)
    posy += 5;
    go_down = false;
}

正如你所看到的，我的矩形过去常常下沉。好吧，我决定创建一个对象数组，并尝试用它们实现我的IF条件...但是他们不工作的same......Any建议？感谢任何帮助..。

window.onload = function () {

    function Shape(x, y, w, h, fill) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.fill = fill;
    }

    // get canvas element.
    var elem = document.getElementById('paper');
    context = elem.getContext('2d');
    //var container = {x:100, y:100, width:1200, height: 800};
    context.fillStyle = "black";
    context.fillRect(0, 0, elem.width, elem.height);
    context.fillStyle = "white";
    context.fillRect(250, 450, 40, 40);

    // check if context exist
    if (elem.getContext) {

        var array = [];
        array.push(new Shape(20, 0, 50, 50, "red"));
        array.push(new Shape(20, 60, 50, 50, "red"));
        array.push(new Shape(20, 120, 50, 50, "red"));
        array.push(new Shape(80, 0, 50, 50, "red"));
        array.push(new Shape(80, 60, 50, 50, "red"));
        array.push(new Shape(80, 120, 50, 50, "red"));
        array.push(new Shape(140, 0, 50, 50, "red"));
        array.push(new Shape(140, 60, 50, 50, "red"));
        array.push(new Shape(140, 120, 50, 50, "red"));
        //context = elem.getContext('2d');
    }

    //function draw (){
    // context.fillStyle = 'red'; 
    //context.fillRect(container.x, container.y, container.width, container,height);
    //}
    var go_right = true;
    var go_down = false;
    setInterval(function () {

        /// clear canvas for each frame
        context.fillStyle = 'black';
        context.fillRect(0, 0, elem.width, elem.height);

        context.fillStyle = "white";
        context.fillRect(250, 450, 40, 40);

        /// iterate object array and move all objects
        for (var i = 0, oRec; oRec = array[i]; i++) {
            oRec.x++; /// update each object's position

            context.fillStyle = oRec.fill;
            context.fillRect(oRec.x, oRec.y, oRec.w, oRec.h);

            if (!go_down) {
                if (oRec.x < 250 && go_right) {
                    oRec.x += 3;
                } else if (oRec.x < 30) {
                    go_right = true;
                    go_down = true;
                } else if (!go_right) {
                    oRec.x -= 3;
                } else {
                    go_right = false;
                    go_down = true;
                }
            } else {

                oRec.y += 5;
                go_down = false;
            }
        }
    }, 40);

Answer 1

在画布上移动对象的传统方法是：

• 定义它的当前位置(x，y)。
• 定义它的速度，这是它在每个动画过程中移动的程度。
• 定义它的方向，即它是向左还是向右移动，还是向上或向下移动。

所以你的rect对象可能是这样定义的：

var rect={
    x:10,
    y:10,
    velocityX:3,
    velocityY:4,
    directionX:1,
    directionY:1
};

因此，在动画帧中，您可以像这样移动矩形：

rect.x += velocityX * directionX;

rect.y += velocityY * directionY;

由于directionX和directionY最初是1，所以您的rect向右移动3，向下移动4。

当你想反转你的rect的方向时，你只需要将它的directionX或directionY乘以-1即可。

rect.directionX *= -1;

rect.directionY *= -1;

现在你的矩形向左移动了3，向上移动了4。

关键是把你的矩形(或矩形数组)的速度和它的方向分开。

如果你想让一个由directionY组成的数组向同一方向移动，只需迭代数组并将它们的所有directionX和/或rects更改为相同的即可。

祝你的项目好运！

Answer 2

var array = []；

                  array.push(new Shape(20, 0, 50, 50, "red"));
                  array.push(new Shape(20, 60, 50, 50, "red"));
                  array.push(new Shape(20, 120, 50, 50, "red"));
                  array.push(new Shape(80, 0, 50, 50, "red"));
                  array.push(new Shape(80, 60, 50, 50, "red"));
                  array.push(new Shape(80, 120, 50, 50, "red"));
                  array.push(new Shape(140, 0, 50, 50, "red"));
                  array.push(new Shape(140, 60, 50, 50, "red"));
                  array.push(new Shape(140, 120, 50, 50, "red"));
                  //context = elem.getContext('2d');
                  }

                  //function draw (){
                   // context.fillStyle = 'red'; 
                    //context.fillRect(container.x, container.y, container.width, container,height);
                     //}


                var go_right = true;
                 var go_down = false;
                setInterval( function(){


                /// clear canvas for each frame

                 context.fillStyle = 'black';
          context.fillRect(0, 0, elem.width, elem.height);

             context.fillStyle = "white";