一组矩形的镜像移动(您如何改变移动方向)

Question

我正在玩我的代码。我有一个移动的矩形。我添加了坐标x和y的条件。喜欢（x和y上的posx和posy potiton）：

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

您可以看到我的矩形曾经掉下来。好吧，我决定创建了一系列对象，并试图与它们实现我的条件。...但是它们的起作用不一样……有什么建议吗？任何帮助都赞赏....

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;

由于方向和方向最初是1，您的矩形向右移动3及向下移动4。

当您想扭转矩形的方向时，您只需将其方向或方向乘以-1。

rect.directionX *= -1;
rect.directionY *= -1;

现在，您的矩形向左移动3及向上移动4。

关键是要将您的rect（或矩形数组）与其方向分开。

如果您想要一系列的矩形来沿相同方向移动，只是迭代数组并将所有方向X和/或方向更改为相同。

>

祝您好运！

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