Зеркальное перемещение группы прямоугольников (как вы меняете направление движения)

Question

Я играл с моим кодом. У меня был один движущийся прямоугольник. Я добавил, если условие координат X и Y. (как PosX и Пози 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

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

Answer 2

Традиционный способ перемещения объектов на холсте заключается в следующем:

• Определить свое текущее положение (х, у).
• Определите его скорость, насколько она движется во время каждого кадра анимации.
• Отдельно определите его направление, то есть его перемещение влево или вправо и вверх или вниз.

Таким образом, ваш Прямоугольник объект (ы) может быть определен следующим образом:

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.

Если вы хотите отменить направление своего прямоугольника, вы просто умножьте его направление X или направление Y на -1.

rect.directionX *= -1; 

rect.directionY *= -1; 

Теперь ваши Rect перемещается влево на 3 и вверх по 4.

Ключ отделить прямоугольник (или массив прямоугольникам) скорость от его направления.

Если вы хотите, чтобы массив прямых для всех перемещался в одном направлении, просто переместите массив и измените все их направлениеX и/или направлениеY на одно и то же.

Удачи вам в вашем проекте!