这个demo很简单:
50个小人(10*5的方阵), 从场地(800*600)左边走到右边 然后折回, 循环反复.
截图如下:
[img]http://fins.iteye.com/upload/picture/pic/78386/8c2ed9e9-a342-332b-9524-de984c03782e.gif[/img]
这只是一个简单的动画, 代码中实现了 animation sprite timer game-mainloop
等几个核心的模块(还很粗糙).
如果要扩展成一个游戏引擎, 还要做比较多的工作.
希望这个小demo 可以给那些希望用html5 来实现动画和游戏的朋友一些帮助.
========================
[color=red]更新内容
对代码进行了重构 现在可以用Dom来实现人物(Sprite)的动画了.
实际测试后, 在当前场景下 性能确实更高.[/color]
[size=large]如果不能下载附件,可以去这下载[/size]:
[url]http://u.115.com/file/f7b24dd5ad[/url]
========================
查看方法:
用支持html5 canvas的浏览器打开 bench.html文件,
[color=red]想测试用dom模拟的动画, 可以打开 bench_dom.html (支持IE6)[/color]
然后点击 start按钮即可.
注意: 这个测试比较耗费CPU资源, 因为主循环间隔设置的是2毫秒.
===================================================
同时还请大家帮个忙,
帮忙测试一下 这个动画 在你们的机器和浏览器上 的每秒帧数 (左上角变动的数字)
并把结果反馈给我谢谢了.
反馈信息越详细越好,最好包括:
机器CPU主频/核数 操作系统 浏览器版本,
是否开启GPU加速(如果开启的话 那么机器的显卡是什么)
谢谢大家了.
先说一下我的:
CPU : 奔腾 Dual-core, 1.86G
内存 : 2G
OS : win xp sp3
结果:
chrome 10 FPS: 105左右
firefox 3.6 FPS: 18左右
50个小人(10*5的方阵), 从场地(800*600)左边走到右边 然后折回, 循环反复.
截图如下:
[img]http://fins.iteye.com/upload/picture/pic/78386/8c2ed9e9-a342-332b-9524-de984c03782e.gif[/img]
这只是一个简单的动画, 代码中实现了 animation sprite timer game-mainloop
等几个核心的模块(还很粗糙).
如果要扩展成一个游戏引擎, 还要做比较多的工作.
希望这个小demo 可以给那些希望用html5 来实现动画和游戏的朋友一些帮助.
========================
[color=red]更新内容
对代码进行了重构 现在可以用Dom来实现人物(Sprite)的动画了.
实际测试后, 在当前场景下 性能确实更高.[/color]
[size=large]如果不能下载附件,可以去这下载[/size]:
[url]http://u.115.com/file/f7b24dd5ad[/url]
========================
查看方法:
用支持html5 canvas的浏览器打开 bench.html文件,
[color=red]想测试用dom模拟的动画, 可以打开 bench_dom.html (支持IE6)[/color]
然后点击 start按钮即可.
注意: 这个测试比较耗费CPU资源, 因为主循环间隔设置的是2毫秒.
===================================================
同时还请大家帮个忙,
帮忙测试一下 这个动画 在你们的机器和浏览器上 的每秒帧数 (左上角变动的数字)
并把结果反馈给我谢谢了.
反馈信息越详细越好,最好包括:
机器CPU主频/核数 操作系统 浏览器版本,
是否开启GPU加速(如果开启的话 那么机器的显卡是什么)
谢谢大家了.
先说一下我的:
CPU : 奔腾 Dual-core, 1.86G
内存 : 2G
OS : win xp sp3
结果:
chrome 10 FPS: 105左右
firefox 3.6 FPS: 18左右