我正在尝试重新创建蜿蜒的游戏。( 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>
fiddle :http://jsfiddle.net/jfGL6/3/
最佳答案
我建议使用 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 是两个连续帧之间的时间差，以毫秒为单位。 从长远来看，学习使用动画会对您有所帮助，因为您可以非常准确地计算正在发生的事情的时间(frame.time、frame.timeDiff)。
关于javascript - Kineticjs 输出滞后，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21519537/