Question

我正在尝试重建蜿蜒的游戏。（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/

Answer 1

您的代码中有一些小问题：

在创建图层后立即将图层添加到舞台。
在createEnemy中：将每个新敌人添加到图层：layer.add（enemy）;
在平局中：不要在那里添加敌人（你多次添加同一个敌人）
在绘图中：不要将图层添加到舞台
setInterval，间隔为1，对于处理器来说太快了。最小延迟应为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>

Answer 2

我建议使用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）。

Answer 3

使用requestAnimationFrame而不是setInterval。我也重新创造了蜿蜒的游戏。 play。这是我的open source code

Kineticjs输出滞后

3 个答案: