websocket实现简化版球球大作战

Posted 2020-10-07

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

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

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

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

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

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

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

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

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

 

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