Kineticjs 输出滞后答案

【问题标题】：Kineticjs output lagsKineticjs 输出滞后
【发布时间】：2014-02-26 11:27:27
【问题描述】：

我正在尝试重现曲折的游戏。(http://www.sinuousgame.com/) 我创造了红色的敌人，但一段时间后它会滞后（减速）。

我的代码如下： Javascript如下：

var x = 0;
var y = 0;
var noOfEnemies = 10;
var enemyArmada = new Array();

var stage = new Kinetic.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight,
    listening: true
});
var layer = new Kinetic.Layer({
    listening: true
});

createEnemy();

function createEnemy() {
    for (var i = 0; i < noOfEnemies; i++) {
        var enemy = new Kinetic.Circle({
            x: Math.random() * 1200,
            y: Math.random() * 50,
            radius: 6,
            fill: 'red',
            stroke: 'black',
            speed: 3 + Math.random() * 5
        });
        enemyArmada.push(enemy);

    }
    setInterval(draw, 60);
}

function draw() {
    for (var i = 0; i < noOfEnemies; i++)
    {
        enemyArmada[i].setPosition({
            x: enemyArmada[i].getPosition().x + 5,
            y: enemyArmada[i].getPosition().y + 5
        });
        layer.add(enemyArmada[i]);
    }
    layer.draw();
    stage.add(layer);
}

html:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="../css/style.css"/>
    </head>
    <body>
        <!--<canvas id="canvasRegn" width="600" height="450" style="margin:100px;"></canvas>-->
        <div id="container" style="width: auto; height: auto; background:#000; margin:auto; float:left;"></div>
        <script src="../js/jquery.min.js"></script>
        <script src="../js/kinetic-v5.0.0.min.js"></script>
        <script type="text/javascript" src="../js/rain2.js"></script>
    </body>
</html>

小提琴：http://jsfiddle.net/jfGL6/3/

【问题讨论】：

标签： javascript jquery html5-canvas kineticjs

【解决方案1】：

我建议使用 Kinetic.Animation 类而不是 setInterval。

它们的移动速度较慢，因为它们的速度现在以 px/s 为单位。

http://jsfiddle.net/Kunstmord/cP9GR/1/

您只需启动动画 (anim.start();)，然后更新位置：

var anim = new Kinetic.Animation(function(frame) {
        for (var i = 0; i < noOfEnemies; i++) {
        var e=enemyArmada[i];
        e.position({
            x: e.position().x + e.speedX * frame.timeDiff / 1000,
            y: e.position().y + e.speedY * frame.timeDiff / 1000
        });
    }
      }, layer);
anim.start();

其中 frame timeDiff 是两个连续帧之间的时间差，以 ms 为单位。从长远来看，学习使用动画会对您有所帮助，因为您可以非常准确地对正在发生的事情进行计时（frame.time、frame.timeDiff）。

【讨论】：

未来我的目标是根据我正在制作的游戏将其用于碰撞检测。那还有可能吗？
是的，请参阅：kineticjs.com/docs/Kinetic.Stage.html#getIntersection 或者您可以编写自己的算法（因为您只有圆和线，所以碰撞检测不会太难）。只需在 anim() 函数中运行它。我认为 KineticJS 路线图上有更好的碰撞检测。
嘿，thanx 伙计，顺便说一句，我对你的小提琴做了一些改动.. 我有点需要所有敌人的物体以 270 度角移动......（在直线路径上）（这意味着它应该移动朝向屏幕的左下角）sinuousgame.com 像这样.. 我似乎找不到我应该在这里编辑的部分。 jsfiddle.net/cP9GR/2
尝试不要分别设置X-speed和Y-speed，生成一个随机速度(X_speed * 2 + Y_speed * 2)和一个在(270 - alpha, 270 + alpha)范围内的随机角度，然后将X_speed设置为random_velocity * Math.cos(random_angle * Math.PI / 180)，Y_speed设置为random_velocity * Math.sin(random_angle * Math.PI / 180)。这样你就可以分别控制速度和角度。另外，考虑到 Y 坐标是倒置的，因此您需要实际设置 Y_speed = -random_velocity * Math.sin(random_angle * Math.PI / 180)。
抱歉不是270度，是225度。好吧，我的逻辑很简单。等量移动 x 和 y 坐标，这样它就必须沿对角线移动。那不是更好吗？如果是这样，你可以在小提琴上编辑它吗？

【解决方案2】：

您的代码中有一些小故障：

在图层创建后立即将图层添加到舞台。
在 createEnemy 中：将每个新敌人添加到图层中：layer.add(enemy);
在平局中：不要在那里添加敌人（您要多次添加同一个敌人）
在绘图中：不要将图层添加到舞台
间隔为 1 的 setInterval 太快，处理器无法处理。最小延迟应为 16，即每秒 60 帧。

一些建议：

使用 requestAnimationFrame (RAF) 而不是 setInterval，因为 RAF 在屏幕刷新之间有效地协调绘制。
您在敌方对象中设置了一个速度，但您使用 2 的恒定速度。可能会随着敌方对象中的速度增加。

演示：http://jsfiddle.net/m1erickson/2WRwY/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>

<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

var stage = new Kinetic.Stage({
    container: 'container',
    width: 350,
    height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);

var x = 0;
var y = 0;
var noOfEnemies = 120;
var enemyArmada = new Array();

createEnemy();

function createEnemy() {
    for (var i = 0; i < noOfEnemies; i++) {
        var enemy = new Kinetic.Circle({
            x: Math.random() * 350,
            y: Math.random() * 50,
            radius: 6,
            fill: 'red',
            stroke: 'black',
            speed: 3 + Math.random() * 5
        });
        enemyArmada.push(enemy);
        layer.add(enemy);
    }
    setInterval(draw,20);
}

function draw() {
    for (var i = 0; i < noOfEnemies; i++)
    {
        enemyArmada[i].setPosition({
            x: enemyArmada[i].getPosition().x + 2,
            y: enemyArmada[i].getPosition().y + 2
        });
    }
    layer.draw();
}





    $("#myButton").click(function(){});



}); // end $(function(){});

</script>       
</head>

<body>
    <button id="myButton">Button</button>
    <div id="container"></div>
</body>
</html>

【讨论】：

嘿，谢谢。我也对您的代码进行了一些更改。我需要每个敌方物体以随机速度移动，因此我更改了设置位置坐标并将其替换为速度。现在输出有点奇怪..我希望它像那个游戏一样流畅。 jsfiddle.net/2WRwY/4
您调整后的代码并不流畅，因为您正在使用每个动画帧重新计算每个敌人的速度。而是在创建敌人时只计算一次每个敌人的速度。通过减小最大速度（比如 1 而不是 5）使动画更加流畅。这是一个更新的演示：jsfiddle.net/m1erickson/2WRwY祝你的项目好运！

【解决方案3】：

使用 requestAnimationFrame 而不是 setInterval。我还重新创建了曲折的游戏。 play。这是我的open source code

【讨论】：

很酷的人。我只是为了学习js。而且是的 requestAnimationFrame 要好得多。我同意。