代码:github.com/timqian/Online_Snake_Battle
从前,我用html5 制作了一个叫做“贪吃蛇大战”的小游戏(你可以在这里试玩)。上个月,在翻看 node.js 教程的过程中发现了 socket.io 这个模块。socket.io可以实现网页与服务器间的实时通信(参考socket.io官网)。于是我就想着把“贪吃蛇大战”,做成“网络贪吃蛇大战”,让玩家只要打开网站,就可以与对手厮杀。
玩法简介
打开网页,滑动屏幕(PC按WASD键)控制蛇的方向,与网络上的对手争夺食物,相互咬断对方的身体(咬下来的身体成了食物)。
程序设计思路
客户端(html javascript)
用户打开网页,当对手到场时,开始游戏。根据服务端为snake设定的方向,为snake对象的dir属性赋予相应的值(1,2,3,4分别代表上下左右)。 浏览器捕获用户滑动屏幕事件,识别滑动方向之后通过socket.io 传递给服务器。 js根据两条蛇的前进方向,以一定的周期更新画面
服务端(node.js socket.io)
服务器将接连访问网站的两个用户分到同一个room。并根据到达顺序指定身份。 接到某一客户端方向改变信息之后,将该信息广播到客户端。 在客户端根据蛇两条蛇的方向更新画面。
面向对象思想的使用
由于有多条蛇参与,因此使用了javascript的生成函数和prototype方法,先定义了Snake对象的生成函数。这样,就可以利用 new Snake() 的方式来定义新的蛇,有代码复用,和程序模块化两点好处。
存在的问题
画面是按照固定时间隔刷新的(在本地刷新),服务器与客户端的通信内容只涉及到snake的方向改变。这样的好处是减少了信息传递,加快传输速度。但是问题在于:由于网络条件的不同,snake方向改变的信息到达两个客户端的时间可能会不同。这样就导致了两个客户端上的状况不一样。这个缺陷使得游戏没办法玩(除非把蛇的运动速度设定的很慢)。。。
解决方案
画面的刷新由服务端控制。。。如果你有兴趣的话,欢迎fock我的代码,改进这个游戏。
3 个解决方案
#1
非常好
#2
#3
#1
非常好