HTML多人联机游戏,前端实现双人联机版俄罗斯方块小游戏2（实现双人联机)

基于websocket实现双人联机俄罗斯方块游戏，逻辑思路整理如下

思路整理

1.游戏开始，双方都收到start消息，同时调用start方法

2.start方法中，调用game.init方法，同时发送init消息给server,server收到后会转发给另一个游戏玩家

3.另一个游戏玩家在remote.js中接收init,会驱动对方去调用start方法(next消息同init消息)

整体代码

local.js

remote.js

wsServer.js

script.js

思路整理

1.游戏开始，双方都收到start消息，同时调用start方法

socket.on('start', function () {

document.getElementById('waiting').inneHTML = '';

start();

});

2.start方法中，调用game.init方法，同时发送init消息给server,server收到后会转发给另一个游戏玩家

game.init(doms, type, dir);

socket.emit('init', {

type: type,

dir: dir

});

bindKeyEvent();

var t = generateType();

var d = generateDir();

game.performNext(t, d);

socket.emit('next', {

type: t,

dir: d

})

//wsServer.js中 server收到消息

socket.on('init', function (data) {

// 接收消息后，将其匹配给另一个socket

if (socket.clientCount % 2 == 0) {

socketMap[socket.clientCount - 1].emit('init', data);

} else {

socketMap[socket.clientCount + 1].emit('init', data);

}

});

3.另一个游戏玩家在remote.js中接收init,会驱动对方去调用start方法(next消息同init消息)

var bindEvents = function () {

socket.on('init', function (data) {

// 调用start，接收init消息和传递的参数，实现两个用户相连接(在对方区域中调用了start)

start(data.type, data.dir);

});

socket.on('next', function (data) {

// 驱动对方游戏区域也调用performNext函数

game.performNext(data.type, data.dir);

});

}

整体代码

local.js

var Local = function (socket) {

// 游戏对象

var game;

// 时间间隔 200毫秒

var INTERVAL = 500;

// 定时器

var timer = null;

// 绑定键盘事件

// 时间计数器

var timeConut = 0;

var time = 0;

var bindKeyEvent = function () {

document.onkeydown = function (e) {

if (e.keyCode == 38) {

// 向上

game.rotate();

socket.emit("rotate");

} else if (e.keyCode == 39) {

// 向右

game.right();

socket.emit("right");

} else if (e.keyC