我们正在使用画布开发 arcade (很多动作和速度)浏览器2D游戏。
有时候我们的测试玩家会告诉我们有一个延迟:玩家在关键点后仍然移动了5-10个像素。
我已经挖掘了这个问题,你可以看到自己延迟http://jsfiddle.net/C4ev3/7/(尽可能快地尝试keydown / up任意键)。我的结果是70到120毫秒。我认为这很多。 (仅供参考,我们的网络延迟为10-20毫秒)。
有任何想法如何减少这种延迟?
upd 我注意到在良好的硬件上,此延迟低于30-40毫秒。但我正在测试core2duo,winxp,chrome 19 - 它不是IE6的P4:)
答案 0 :(得分:2)
您可以做的一件事是使用匿名函数尝试使用已定义的函数
http://jsfiddle.net/C4ev3/10/ - 对我来说这是在50-100 MS
报告的但是我不建议使用适用于Canvas应用程序的jQuery,它对你使用的很少很大,你应该尝试使用原生的Javascript
http://jsfiddle.net/C4ev3/11/ - 对我来说,这报告了30-70 MS
Javascript线程 我在评论中注意到的一件事Javascript不是Multi-Threaded Well Urm-Arr, 它有点是setInterval是异步不同步,但是影响窗口是一个单线程EG如果你有一个有一些数字的类是使用setInteval将使用另一个线程并且没有问题改变数学然而在任务然后需要在页面上绘制一个Draw,它将进入JS句柄Que的底部,
Javascript的某些部分位于不同的线程上,如果您的线程想要更改Form,则必须在主线程上运行更改页面的任何内容与任何Windows应用程序一样,您必须调用主线程才能执行此操作你
然而,它不是多线程的,就像你不能在给定的Wim像窗户那样处理或中止的任何其他东西,
其他ASync任务包括AJAX可以同时选择Async和Sync
更新以显示我对FPS限制的评论:
请告诉我,这是链接到一个已经构建的项目来显示示例: 所以我的游戏完全是OOP
var elem = document.getElementById('myCanvas');
var context = elem.getContext("2d");
context.fillStyle = '#888';
context.lineWidth = 4;
// Draw some rectangles.
context.fillRect(0, 0, 800, 600);
context.fillStyle = '#f00';
var ball = new Ball();
var leftPadel = new Padel(10, 60, 40, 120);
var rightPadel = new Padel(750, 520, 40, 120);
pong = new Pong();
pong.draw();
setTimeout("ball.move()", pong.redrawTime());
在我的乒乓课里面是游戏的所有主要工作方式,但这里是您需要看到的FPS位
this.fps = 30;
this.maxFPS = 60;
this.redrawTime = function(){
return (1000 / this.fps)
}
this.lastDraw = (new Date)*1 - 1;
然后你可以看到我的Interval在ball.move这会在重绘结束时再次调用主pong类我有FPS检查和限制代码
this.fps = ((now=new Date) - this.lastDraw);
if(this.fps > this.maxFPS){
this.fps = this.maxFPS;
}
this.lastDraw = (new Date)*1 - 1;
if(this.reporting = true){
console.clear();
console.log("FPS: "+this.fps.toFixed(1))
}
setTimeout("ball.move()", pong.redrawTime());
这会强制您在不排队主线程的情况下获得最佳可能的FPS
答案 1 :(得分:0)
试试这个:
<强> e.stopPropagation()强>
阻止事件冒泡到父元素,阻止任何事件 家长处理人员被告知该事件。
<强> e.preventDefault()强>
阻止浏览器执行默认操作。使用该方法 isDefaultPrevented知道是否曾调用此方法(on 那个事件对象)。
我的分钟。谷歌浏览器的结果:7毫秒