Форум

cyber · #21 (**permalink**) 11.12.2012, 18:53

Дзен-трансгуманист, спасибо, буду разбираться

cyber · #22 (**permalink**) 11.12.2012, 19:55

вот пока то что у меня есть http://learn.javascript.ru/play/8nu3s

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <canvas width="500" height="500"></canvas>
    <script>

      var canva = document.body.children[0];
      
      var ctx = canva.getContext("2d");
      
      var ball = {
      
      //  x:20, 
       // y:280,
       x:50,
       y:40,
        R:20,
        
        Draw: function (x, y) {
          
          ctx.clearRect(this.x - this.R, this.y - this.R, this.R *2,this.R *2);
           
          ctx.beginPath();
          ctx.fillStyle = "red";
          ctx.arc(x,y, this.R,0, (Math.PI / 180)* 360, false);
          ctx.fill();
         
          this.y = y;
          this.x = x;
        }
      
        
      };
      
      var block = {
      
   
        width:150,
        height:30,
        
        Draw: function (x, y) {
           
          ctx.beginPath();
           ctx.fillStyle = "green";
          ctx.fillRect(x,y,this.width, this.height);
          this.y = y;
          this.x = x;
         
        }
      
        
      };
     
      block.Draw(150,100);
      
      var valX = -10 , valY = -10;
      var Bl_bottom = block.y + block.height + ball.R ;
      var Bl_right = block.x + block.width  + ball.R ;

  var stop = false;
      !function action(){

         if(ball.x < 0 + ball.R || ball.x > canva.width - ball.R){

           valX = -valX;
           
        
        };

        if(ball.y < 0 + ball.R || ball.y > canva.height - ball.R){

          valY = -valY;
   

        }

        
       var x = ball.x + valX;
        var y = ball.y + valY;

   
  if((y <= Bl_bottom && y >= block.y - ball.R) && (x >= block.x - ball.R  && x <= Bl_right)){
  
    var pos = getPosit();

       

    if(pos == "angle") {
  
      // проверка на столкновение с одним из 4х углов
      if(distance(x,y,block.x, block.y + block.height) <= ball.R || 
        distance(x,y,block.x, block.y ) <= ball.R
        || distance(x,y,block.x + block.width, block.y + block.height) <= ball.R||
        distance(x,y,block.x+ block.width, block.y) <= ball.R){
      
       
         valY = - valY;
         valX = - valX;
          return;
      }
  


    }

    if(pos == "x") {

       valX = - valX;
    }
     
     if(pos == "y") {

       valY = - valY;
     }
     
    // return;
        };
         
      

        ball.Draw(x,y);
      
        
        
      
      
       setTimeout(action,1000/60);
      }();
      
function getPosit() {

var x,y;

    if(ball.x <= block.x){

      x = "left";
    }

   else if(ball.x >= block.x + block.width){

     x = "right";
   }


   else x = "on";



if(ball.y >= block.y + block.height){

  y = "bottom";
}

else if(ball.y <= block.y){

  y = "top";
}
else y = "on";


if((x == "right" || x == "left") && (y == "on")) {

  return "x";
}

else if((y == "bottom" || y == "top") && x == "on"){
 
return "y";
}

else return "angle";

}



function distance(x1,y1,x2,y2){

return Math.sqrt(Math.pow(x2-x1,2) + Math.pow(y2-y1,2));

};




    </script>

  </body>
</html>

сделал остановку когда новые координаты шарика будут равны углу или внутри угла.

cyber · #23 (**permalink**) 11.12.2012, 20:59

Дзен-трансгуманист, я понимаю что это уже наглость, но не могу разобраться в твоем коде, какой метод отвечает за рисование шариков которые рисуются на векторе?

Дзен-трансгуманист · #24 (**permalink**) 11.12.2012, 21:48

cyber,
drawPath в области видимости TracerView, строчки 489-500 (потом рисуются линии). Это типа как приватная функция, только вместо контекста this я передаю экземпляр класса явно в аргументе object.

Дзен-трансгуманист · #25 (**permalink**) 11.12.2012, 22:01

Я сейчас понял, что трейсер возвращает только путь в виде набора точек, но не возвращает новый вектор движения после всех столкновений. Без этого, конечно, шарик самостоятельно никуда не полетит.

И наверное я неправильно поступил, что мастер-объектом движения сделал вектор [x,y]. Так теряется некоторая точность преобразований, причем, чем больше столкновений за один ход - тем больше потери точности. Надо было хранить и обрабатывать его как [длина,азимут].

Не знаю, дойдут ли у меня руки править это, но, честно говоря, не очень-то хочется, поскольку не люблю поддерживать код, написанный второпях буквально за один день. Такие вещи надо продумывать и делать основательно, а не на коленке.

cyber · #26 (**permalink**) 11.12.2012, 22:05

Дзен-трансгуманист,хм, не совсем понял как ты расчитываешь расстояние от угла до центра шарика?

cyber · #27 (**permalink**) 11.12.2012, 22:12

Дзен-трансгуманист,да вообщем я понимаю как все работает, но у меня проблемы с реализацией из за пробелов в школьной геометрии ~~пофигизм выходит боком~~ , если тот пример ты для меня лепил, то спасибо, но все таки не нужно, я в общем разобрался с колизиями и отражением, но только не могу правильно найти расстояние на которое нужно сместить шарик по вектору движения так что бы он не оказался внутри блока.
Допустим по формуле

Math.sqrt(Math.pow(x2-x1,2) + Math.pow(y2-y1,2));

я определил что на шаге n+1 шарик будет внутри блока, то нужно установить такие координаты при которых шарик не пересечет угол.
Вроде просто, а не фига не получается .

Дзен-трансгуманист · #28 (**permalink**) 11.12.2012, 22:13

Сообщение от cyber

как ты расчитываешь расстояние от угла до центра шарика?

Функция vertexCollision. Я даже не уверен, что она полностью правильная.

Там решается квадратное уравнение чтобы найти точки пересечения прямой и окружности. А нормаль столкновения это не что иное как вектор, проложенный от угла к центру шарика в сам момент столкновения.

Дзен-трансгуманист · #29 (**permalink**) 11.12.2012, 22:14

Сообщение от cyber

из за пробелов в школьной геометрии

Я вообще троечник был. Думаешь мне легко?

cyber · #30 (**permalink**) 11.12.2012, 22:19

Сообщение от Дзен-трансгуманист

Я вообще троечник был. Думаешь мне легко?

Неа)
Значить не я один вместо повторение учу что то новое из школьной программы)))
П.с я тоже троечником был)

Форум

Справочник

Discord чат

Курсы javascript