Question

我正在玩我的代码。我有一个移动的矩形。我在坐标X和Y上添加了条件，如（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条件....但它们的工作方式不一样......有什么建议吗？任何帮助表示赞赏....

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，因此你的矩形向右移动3并向下移动4。

如果要反转矩形方向，只需将其directionX或directionY乘以-1即可。

rect.directionX *= -1;

rect.directionY *= -1;

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

关键是将你的矩形（或数组）速度与其方向分开。

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

祝你的项目好运！

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

镜像移动的矩形组（你如何改变移动的方向）

2 个答案: