请教javascript制作动画的可行性

Question

项目是一个网页游戏, 前端使用的是jquery, jqueryui...
目前的战斗是文字描述, 客户要求将战斗画面修改为动画方式的...就类似于回合制游戏那样的效果就ok..由于公司整体对flash不熟悉, 所以, 想通过javascript操作多帧图片的方式来实现动画的播放..请有经验的前辈分析下这个思路是否可行, 难点是什么, 需要注意的问题有哪些..非常感谢...

Answer 1

绝对可以你再csdn上搜索哈 以前有个牛人 用js做了个网页的游戏的还非常复杂

Answer 2

用CSS作图
用JS做动画
-----------------
可以是可以
但还是建议考虑周详再下决定吧

Answer 3

讨论js游戏的贴子：
http://bbs.51js.com/viewthread.php?tid=18944&extra=page%3D1&page=1

Answer 4

去试玩一下JS版的植物大战僵尸吧。
http://pvz.lonelystar.org/

Answer 5

游戏不适合用js框架来完成。建议自己写，而且只是一般的文字性rpg游戏也不需要引擎

Answer 6

我觉得如果完全能用JS做游戏的话，肯定会有各种问题的，甚至这种想不到的问题出现，不然也不会有那么多公司用FLASH+后台语言来开发了。

Answer 7

建议还是flash来做吧
如果用js做，一般玩这个游戏的人机器资源占用率非常高。

Answer 8

主要看用户的水平和要求。要求高的话，最好用FLASH做。不熟可以学，或引进人才。如果以不熟为原因，非要使用不合适的技术，结果不堪设想。如果用户是好糊弄的便罢了，很多用户都没有能够很好和开发方配合的有水平有经验的人员，所以开始都提不出清楚的要求，但在看到你的产品后会逐步要求规格达到一定标准，如果最终要求提升到用JS实现和维护的难度都要高出FLASH，而且还不愿降低将就的话，那就不得不采用FLASH，前面这些就白作功了。另外就是安全性上，JS显然比FLASH差得多，很容易被注入修改，影响公平性，而一个游戏失去公平保证的话，就等于被判死刑了。

Answer 9

http://topic.csdn.net/u/20110120/14/6dd5499b-6b49-4d6b-a0fd-3070b2c5343c.html?6098
开源的，参考吧。

Answer 10

js + css 还是可以做的setTimeout  切换图片 就是动画了

Answer 11

"老吾老以及人之老"是什么意思? 这个一直没搞懂...我做了测试, 如16楼所说, 是setTimeout做的.
但是, js引擎貌似对时间不是非常非常敏感, 我测试时每帧间隔为20毫秒, chrome每两次会有1秒的时间差, firefox上下偏差最大会达到5秒左右, ie就更不用说了, 看数据貌似ie6的js引擎时间精度达不到毫秒...
由于上面的原因, 出来的动画会有严重的闪烁, 即便再chrome下, 平稳的1秒偏差肉眼看到的闪烁也是非常严重的.....
下面是测试产生数据(其实就是递归setTimeout, 实际执行时间与预期不一致)
首先是chrome的时间戳(毫秒/ms) 实际每帧间隔(毫秒/ms)
1297675020061 0
1297675020082 21
1297675020102 20
1297675020123 21
1297675020143 20
1297675020164 21
1297675020184 20
1297675020205 21
1297675020225 20
1297675020246 21
1297675020266 20
1297675020287 21
1297675020307 20
1297675020328 21
1297675020348 20
1297675020369 21
1297675020389 20
1297675020410 21
1297675020430 20下面是firefox的
时间戳(毫秒/ms) 实际每帧间隔(毫秒/ms)
1297675632019 0
1297675632035 16
1297675632051 16
1297675632067 16
1297675632085 18
1297675632104 19
1297675632123 19
1297675632144 21
1297675632167 23
1297675632189 22
1297675632212 23
1297675632233 21
1297675632253 20
1297675632273 20
1297675632294 21
1297675632315 21
1297675632336 21
1297675632356 20
1297675632376 20IE的, 帧间隔基本都是10ms倍数时间戳(毫秒/ms) 实际每帧间隔(毫秒/ms) 
1297675663896 0 
1297675663916 20 
1297675663936 20 
1297675663956 20 
1297675663976 20 
1297675663996 20 
1297675664016 20 
1297675664036 20 
1297675664056 20 
1297675664076 20 
1297675664096 20 
1297675664116 20 
1297675664137 21 
1297675664177 40 
1297675664217 40 
1297675664237 20 
1297675664257 20 
1297675664287 30 
1297675664307 20 

Answer 12

一个老字都把我伤了，你还一下搞出三个老字来刺激某啊。意思你真不知道？尊老爱幼的传统美德（不能算中华民族专有吧，举世皆如是，傻瓜们总这么说成好像是独有的，明显是让各国认为咱们跟H国一样乏善可陈而拿萝卜当人参）。你说的时间，还真是我想说没说的，想说用GIF更好些，不仅方便，也能避免这样的不确定因素。
当然，图片由于用户不同的网络传输速度会导致加载的速度也不同，这就有个小技巧，利用图片的onload事件。
而setTimeout方法也还有一些可以优化的地方，比如可以利用图片预读取和CSS sprites等技术，减少切换图片时的读取所耗时间。不过，一秒十几帧的速度，用JS切换，性能总是差点，还是GIF，不仅代码省事，在这个问题上也省事不用去操心了。开始也说了，如果图像效果要求高（比如还可能会想要一些特效什么的——现在没个光影特效都不算真入流。公司产品和个人玩是两个级别要求），还是用FLASH比较好。所以从项目管理角度来说，应该首先建立界面演示，和用户达成一致意见再决定如何具体做。而这个演示和一致意见，当然是越低越好，以利于你们的开发实施（从个人角度我宁愿费点劲做个尽可能好的，不过从团队的角度来说，只能找个平衡点了），这个能达到什么效果，取决于沟通能力和其它很多因素了（很多，没法说）。从你开始的问题看，原来都是文字的，那么变成动画的似乎可以不必要求太高——拿剑，出剑，两幅图切换一下，一个动作就完事了（人需要扑上去吗，不用嘛，劈空波啊，唰唰唰，这就用到光影特效了，弄个透明GIF在倒霉鬼身上爆一爆就好了，他的状态再改成前躬或后仰式，场面就交待完了）。总之，能简化就简化，意思到位就好了。要拔高还是找FLASH。

Answer 13

老吾老，以及人之老；幼吾幼，以及人之幼. 天下可运于掌故，人不独亲其亲、不独子其子，使老有所终、壮有所用、幼有所长、矜寡孤独废疾者皆有所养。忽忽, 终于弄明白了...原来第一个老/幼是动词..上面我给出的数据, 是测试demo产生的, demo不涉及网络以及实际生产环境其他js业务的影响, 并且也使用了css sprites, 就一张图片, 提前设置为背景了已经, 然而setTimeout的精度还是不能达到要求.
所以, 公司目前开始研究flash了..动画的模型很早就在做了, 反正我不懂, 看着挺复杂挺炫的....5555其实, 我倒是想老, 可惜没那么多经验...

Answer 14

setTimeout一定要等绑定上的句柄执行完，才会执行下一个。也就是说，他的时间间隔是不一样的。如果要间隔差不多，要用
setInterval

Answer 15

修改了setInterval, 还是一样的效果.....

Answer 16

javascript操作多帧图片的方式来实现动画的播放是可以的。
不过太占资源了。