0

私はキャンバスとkineticjsに比較的慣れていないので、約1か月ほど英語が下手です。申し訳ありません。

私の問題: 正方形がキャンバスの端から跳ね返ります。

タブを変更するか、エクスプローラーを最小化すると、正方形が端から離れます。画像例：http ://clip2net.com/s/2aLYf

タブを 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/

助けてくれてありがとう

4

1 に答える 1

0

コードをざっと見てみると、問題は位置を計算し、各フレームで衝突をチェックしていると思います。したがって、タブを見ていないときはフレームがレンダリングされないため、もう一度見ると、オブジェクトはボックスの外側に描画され (frame.timeDiff がその間に非常に大きくなるため、大きく移動するため)、開始します。エッジに衝突した場合の方向に移動します。最初にエッジにヒットするまでの時間を計算し、ヒットした場合は残りの時間をエッジから離れる移動に使用することをお勧めします。(これにより、極端に fps が低下し、コードが同じように異なる動作をする場合の問題も解決されます!)

于 2012-08-04T10:41:21.947 に答える