Nodejs实现多人同时在线移动鼠标的小游戏分享

前端之家收集整理的这篇文章主要介绍了Nodejs实现多人同时在线移动鼠标的小游戏分享前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近因为项目需要,所以研究了一下nodejs的websocket实现,socket.io,这是nodejs后台应用websocket广泛使用的框架。

准备工作

1.安装socket.io,使用命令npm install socket.io 2.windows系统的话,需要vc编译环境,因为安装socket.io的时候,会编译vc代码

游戏基本原理

1.服务器监听客户端的连接 2.客户端连接成功时候,绑定页面移动鼠标事件,事件里处理发送当前坐标给服务器 3.服务器保存一个全局的坐标对象,并以客户端唯一编号为键值 4.有新连接来的时候,把坐标广播给其它客户端 5.客户端断开连接的时候,服务端删除它的坐标信息,并广播给其它客户端

开始实现服务端代码

scoket.io建立服务器监听的时候,需要依赖一个http连接,用来处理升级协议用,所以也需要一个http模块,代码如下:

代码如下:

var app = http.createServer().listen(9091);

var ws = io.listen(app);

然后定义一个全局的坐标对象

代码如下:

开始监听客户端的连接,并新增广播函数(其实可用socket.io自带的广播方法io.sockets.broadcast.emit),核心代码如下:

代码如下:
',err); }) });

分析上面的代码,关键点在于

1.新的客户端连接成功,发送其它客户端的坐标信息 2.客户端更新坐标信息的时候,通知其它客户端 3.客户端断开连接,通知其它客户端 4.广播消息类型分为修改坐标与移除坐标

编写客户端html页面

由于socket.io是自定义的框架,所以客户端需要引用socket.io.js,这个js可以从socket.io模块里查找,路径一般为node_modules\socket.io\node_modules\socket.io-client\dist,里面有合并与压缩两个版本,开发的时候可以用合并版.

完整代码如下:

代码如下:
socket.io 多人同时在线互动 例子 <Meta charset="utf-8">

页面中的img/cursor.png,可以这里找到,cursor.png,这里也有很多其它的鼠标图标,前端的原理比较简单,简单的分析如下

1.连接成功时,绑定页面mousemove事件,里面处理发送新坐标消息 2.收到消息根据消息类型,处理是修改其它客户端消息,还是移除其它客户端消息 3.定义添加其它客户端cursor图标与移除cursor图标 4.处理客户端异常消息,并添加断开连接,以让服务端移除坐标信息

运行例子

1.保存服务器代码为io_multigame.js 2.保存客户端代码为io_multigame.html 3.运行服务器代码node io_multigame.js 4.打开多个io_multigame.html页面,即可看到效果

总结

写的比较随意,参考了了不起的nodejs,这是一本好书,想了解nodejs的朋友们,可以看看这本书。

猜你在找的Node.js相关文章