0

伙计们，我对 canvas 和 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 回答