-1

我们正在使用画布开发街机（大量动作和速度）浏览器 2d 游戏。

有时我们的测试玩家会报告我们存在延迟：在键位后玩家仍然移动 5-10 像素。

我已经挖掘了这个问题，你可以看到自己延迟http://jsfiddle.net/C4ev3/7/（尽可能快地尝试 keydown/up 任何键）。我的结果是从 70 到 120 毫秒。我认为这很多。（仅供参考，我们的网络延迟为 10-20 毫秒）。

任何想法如何减少这种延迟？

upd我注意到在好的硬件上这个延迟低于 30-40 毫秒。但我正在 core2duo、winxp、chrome 19 上进行测试——它不是带有 IE6 的 P4 :)

4

2 回答 2

2

嗨，您可以做的一件事是尝试使用定义的函数，而不是使用匿名函数，

http://jsfiddle.net/C4ev3/10/ - 对我来说这个报告在 50-100 MS

但是我不推荐 jQuery 用于 Canvas 应用程序，它对于你使用的很少，你应该尝试使用原生 Javascript

http://jsfiddle.net/C4ev3/11/ - 对我来说这报告了 30-70 MS

Javascript 线程 我在评论中注意到的一件事 Javascript 不是多线程的，嗯，Urm-Arr，它有点是 setInterval 是异步而不是同步，但是影响窗口是单线程 EG，如果你有一个有一些数字的类是它使用 setInteval 将使用另一个线程并且没有问题改变数学但是在任务中然后需要在页面上绘制它将进入 JS 句柄 Que 的底部，

Javascript 的某些部分位于不同的线程上，如果您的线程想要更​​改表单，那么任何更改页面的操作都必须在主线程上运行，就像任何 Windows 应用程序一样，您必须调用主线程来为您完成

但是它不像其他任何东西一样多线程，你不能在给定的 Wim（如 windows）上处理或中止，

其他异步任务包括 AJAX 可以选择异步和同步

更新以显示我对 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;

然后你可以看到我的间隔在球上。移动这在重绘结束时再次调用主 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

于 2012-06-11T14:30:56.297 回答
0

试试这个：

e.stopPropagation()

停止将事件冒泡到父元素，防止任何父处理程序收到事件通知。

e.preventDefault()

阻止浏览器执行默认操作。使用方法 isDefaultPrevented 了解是否曾调用过此方法（在该事件对象上）。

我的分钟。谷歌浏览器的结果：7ms

于 2012-06-11T14:38:15.793 回答