码迷,mamicode.com
首页 > Web开发 > 详细

websocket实现简化版球球大作战

时间:2017-09-21 23:19:20      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:网页   websocket   地图   画布   生成   小项目   屏幕   函数   ejs   

websocket是一种全新的网络协议(虽然就我接触编程的时间点来说不算新了),在服务器端和客户端频繁通信时,相较与ajax轻便很多,球球大作战这个小项目如果在网页上实现,必然使用websocket而非ajax。

由于是个小游戏,所以,我也没用上什么框架或者数据库,服务器端用nodejs构建,客户端就用js写。

接下来写写项目中遇到的一些需求难题以及解决方案。(姑且将我写出错误的地方叫做难题吧)

1.如何将所有用户的小球都展现在每一个客户端的画面上?

    每一个用户参与游戏后,都用构造函数生成一个小球对象,将这个对象传至服务器,并将其保存在服务器端的数组member中,注意,此时屏幕上什么也没有。服务器保存了这个对象后,把数组分发给每一个客户端,客户端使用‘造球函数’枚举每一个对象,将它们展现在屏幕上。

2.如何实现玩家的小球固定在画面中心?

    将玩家信息保存在客户端中,并通过坐标系的统一变换使玩家控制的小球固定在画面中心,球球游戏中,有很大一部分玩家是不可见的,需要玩家在地图中行走才能看见,因此,要将画布的‘overflow’属性设置为‘hidden’。

3.如何使得客户端和服务器的玩家信息保持一致?

    客户端周期函数,每隔0.1秒向服务器发送玩家的位置和大小,服务器端收到消息后向每个客户端发送全部玩家的相应信息,相当于页面每隔0.1秒刷新一次。

 

代码在这:GitHub,还没写完,但是上面所说的效果都在里面了。

websocket实现简化版球球大作战

标签:网页   websocket   地图   画布   生成   小项目   屏幕   函数   ejs   

原文地址:http://www.cnblogs.com/puffmoff/p/7571661.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!