캔버스, KineticJs, 정사각형이 튀어 나와서 탭을 벗어날 때 가장자리를 벗어나서 튀어 오릅니다.

Question

나는 약 1 개월 동안 캔버스와 키네틱스에 새롭다. 내 영어는 가난하다.

내 문제 : 정사각형이 캔버스 가장자리 바깥으로 튀어 오릅니다.

탭을 변경하거나 탐색기를 최소화 할 때 사각형이 가장자리를 벗어납니다. 화상 예 : http://clip2net.com/s/2aLYf I 5 초와 같은 탭 변경

후 사각형 모서리를 무시하고 제가 에 애니메이션을 리턴하는 경우, 사각형의 한계 안에서 복귀하기 시작한다. 가장자리가 무시되므로 애니메이션을 보지 못하거나 애니메이션 탭이 활성화되지 않습니다.

메신저가 다시 탭을 볼 때 사각형이 돌아옵니다.

내 코드는 사각형 메뉴의 아래이고,이 사이트 메신저 작업입니다 아래

function init_squares(){ 
var stage = new Kinetic.Stage({ 
    container: "square_animation", 
    width: 150, 
    height: 150 
}); 

var stage_width = 150; 
var stage_height = 150; 

var layer = new Kinetic.Layer(); 
var num_squares = 12; 

var squares = []; 

    //creates the squares 
for(var i=0; i < num_squares; i++){ 
      var this_width = get_width(); 
    squares[i] = new Kinetic.Rect({ 
        x: stage_width/2 , 
        y: stage_height/2, 
        width: this_width, 
        height: this_width, 
       fill: get_color(), 
      vy: get_random_speed(), //custom values for the use of velocity 
      vx: get_random_speed(), //custom values for the use of velocity 
      alpha: .7 
    }); 
} 

initialize_squares(); //initialize the squares 
    function initialize_squares(){ 
    var n = squares.length; 
    for(var i=0; i < n; i++){ 
     layer.add(squares[i]); 
    } 
    stage.add(layer); 
} 

//animation frame 
stage.onFrame(function(frame) { 

    var n = squares.length; 
    for(var i=0; i < n; i++){ 
     var attr = squares[i].getAttrs(); 
     var new_x = squares[i].getX() + (attr.vx * frame.timeDiff/1000); 
     var new_y = squares[i].getY() + (attr.vy * frame.timeDiff/1000); 
     var x = squares[i].getX(); 
     var y = squares[i].getY(); 

     //check right border 
     if((x + attr.width) > stage_width){ 
      if(attr.vx > 0) 
       attr.vx *= -1; 
     } 
     //check left border 
     if(x <= 0){ 
      if(attr.vx < 0) 
       attr.vx *= -1; 
     } 

     //check top border 
     if(y <= 0){ 
      if(attr.vy < 0) 
       attr.vy *= -1; 
     } 

     //check bottom border 
     if((y + attr.width) > stage_height){ 
      if(attr.vy > 0) 
       attr.vy *= -1; 
     } 

     squares[i].setY(new_y); 
     squares[i].setX(new_x); 
     squares[i].setAttrs({vx: attr.vx, vy: attr.vy}); 
    } 
    layer.draw(); 
}); 
stage.start(); 

function get_random_speed(){ 
    if((Math.floor(Math.random() * 2) + 1) % 2 == 0) 
     return (Math.floor(Math.random() * 30) + 40) * -1; 
    else 
     return Math.floor(Math.random() * 30) + 40; 
} 

function get_color(){ 
    var colors = ['#c8c8c8','#b7b7b7','#ababab','#999999','#d2d2d2','#818181','#8f8f8f']; 
    var n = colors.length; 
    return colors[Math.floor(Math.random() * n)]; 
} 

function get_width(){ 
    var widths = [20,22,24,28,26]; 
    var n = widths.length; 
    return widths[Math.floor(Math.random() * n)]; 
} 
    } 

입니다. http://uniformestoro.com/

내가 문제가 위치를 계산하고 각 프레임에 충돌 확인 생각, 코드 얼핏 후 HELP

Answer 1

를 당신을 순전히 감사하십시오. 따라서 탭을 보지 않으면 프레임이 렌더링되지 않으므로 다시 보았을 때 객체가 상자 외부로 그려집니다 (frame.timeDiff가 상당히 커지므로 움직이기 때문에 많이 움직입니다). 그들이 방금 가장자리와 충돌 한 경우 방향을 이동합니다. 우선 그들이 얼마나 많은 시간을 그들이 먼저 쳐야하는지 계산해 보라고 제안합니다. 만약 그들이 그것을 쳤다면, 가장자리에서 멀어지는 움직임을 위해 남아있는 시간을 사용하십시오. (이것은 극단적 인 fps가 떨어지면 같은 방식으로 코드가 다르게 동작합니다!)