小游戏 php nodejs,JavaScript_Nodejs实现多人同时在线移动鼠标的小游戏分享，最近因为项目需要，所以研究 - phpStudy...

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 http = require('http'),

io = require('socket.io');

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

var ws = io.listen(app);

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

var postions = {};

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

ws.on('connection', function(client){

// 广播函数

var broadcast = function(msg, cl){

for(var k in ws.sockets.sockets){

if(ws.sockets.sockets.hasOwnProperty(k)){

if(ws.sockets.sockets[k] && ws.sockets.sockets[k].id != cl.id){

ws.sockets.sockets[k].emit('position.change', msg);

}

}

}

};

console.log('\033[92m有新的连接来:\033[39m', postions);

// 客户端连接成功之后，就发送其它客户端的坐标信息

client.emit('position.change', postions);

// 接收客户端发送消息

client.on('position.change', function(msg){

// 目前客户端的消息就只有坐标消息

postions[client.id] = msg;

// 把消息广播给其它所有的客户端

broadcast({

type: 'position',

postion: msg,

id: client.id

}, client);

});

// 接收客户端关闭连接消息

client.on('close', function(){

console.log('close!');

// 删除客户端，并通知其它客户端

delete postions[client.id];

// 把消息广播给其它所有的客户端

broadcast({

type: 'disconnect',

id: client.id

}, client);

});

// 断开连接

client.on('disconnect', function(){

console.log('disconnect!');

// 删除客户端，并通知其它客户端

delete postions[client.id];

// 把消息广播给其它所有的客户端

broadcast({

type: 'disconnect',

id: client.id

}, client);

})

// 定义客户端异常处理

client.on('error', function(err){

console.log('error->', 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 多人同时在线互动 例子

var ws = io.connect('http://localhost:9091/');

var isfirst;

ws.on('connect', function(){

console.log(ws);

// 开始绑定mousemove事件

document.onmousemove = function(ev){

if(ws.socket.transport.isOpen){

ws.emit('position.change', { x: ev.clientX, y: ev.clientY });

}

}

})

ws.on('position.change', function(data){

// 开始同时在线的别的客户端

if(!isfirst){

isfirst = true;

// 第一条消息是收到别个所有客户端的坐标

for(var i in data){

move(i, data[i]);

}

}else{

// 否则，要不就是别个断开连接的消息，或者别个更新坐标的消息

if('position' == data.type){

move(data.id, data.postion);

}else{

remove(data.id);

}

}

})

ws.on('error', function(){

console.log('error:', ws);

ws.disconnect();

})

function move(id, pos){

var ele = document.querySelector('#cursor_' + id);

if(!ele){

// 不存在，则创建

ele = document.createElement('img');

ele.id = 'cursor_' + id;

ele.src = 'img/cursor.png';

ele.style.position = 'absolute';

document.body.appendChild(ele);

}

ele.style.left = pos.x + 'px';

ele.style.top = pos.y + 'px';

}

function remove(id){

var ele = document.querySelector('#cursor_' + id);

ele.parentNode.removeChild(ele);

}

页面中的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的朋友们，可以看看这本书。相关阅读:

win7系统运行会声会影提示错误代码1317的解决方法

更新Win10系统出错 提示"临时需要0.00MB空间才能完成安装"的原因以及解决办法

关于JS变量和作用域详解

Android使用Sensor感应器实现线程中刷新UI创建android测力计的功能

如何让Win10文件夹始终显示功能区有哪些方法

js获取窗口相对于屏幕左边和上边的位置坐标

简单理解Java的抽象类

c#实现pdf的另存为功能

让IE下支持Html5的placeholder属性的插件

详解C语言sscanf()函数、vsscanf()函数、vscanf()函数

PHP关于htmlspecialchars、strip_tags、addslashes的解释

ThinkPHP模板Switch标签用法示例

Android Activity中onStart()和onResume()的区别分析

使用GSON库转换Java对象为JSON对象的进阶实例详解