Question

我有人，我相对于画布和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/

非常感谢你提供帮助

Answer 1

快速查看代码后，我认为问题在于计算位置，然后检查每个帧的碰撞。因此，当您不查看选项卡时，不会渲染任何帧，因此，当您再次查看它时，您的对象将在框外绘制（因为frame.timeDiff同时变大，所以它们移动很多）然后开始如果他们刚刚与边缘相撞，他们会移动它们的方向。我建议你首先计算他们需要多长时间才能击中边缘，如果他们击中它，然后使用剩余时间远离边缘移动。（当你有极端的fps掉落时，这也解决了问题，这会导致代码以相同的方式表现不同！）

当我离开标签时，画布，KineticJs，正方形弹跳离开边缘

1 个答案: