前端实现俄罗斯方块小游戏1（在单人版基础上，实现基于websocket的双人版游戏)

更改单机版页面结构，实现用户进入后，单数用户显示需要等待另一个玩家，双数的客户进入后，可以开始游戏~

HTML中加入div

    
对方的游戏区域：
    

    

    

      
已用时：0s
      
已得分：0分
      

    
    
    down

    left

    right

    rotate

    fall

    fixed

    performNext

    check

    checkClear

    checkGameOver

    setTime

    addScore

    gameOver

    addBotLine

  

remote.js中绑定按钮事件

var Remote = function (socket) {
    var game;
    var bindEvents = function () {
        document.getElementById('left').onclick = function () {
            game.left();
        }
        document.getElementById('down').onclick = function () {
            game.down();
        }
        document.getElementById('right').onclick = function () {
            game.right();
        }
        document.getElementById('rotate').onclick = function () {
            game.rotate();
        }
        document.getElementById('fall').onclick = function () {
            game.fall();
        }
        document.getElementById('fixed').onclick = function () {
            game.fixed();
        }
        document.getElementById('performNext').onclick = function () {
            game.performNext(2, 2);
        }
        document.getElementById('checkGameOver').onclick = function () {
            game.checkGameOver();
        }
        document.getElementById('setTime').onclick = function () {
            game.setTime(20);
        }
        document.getElementById('addScore').onclick = function () {
            game.addScore(10);
        }
        document.getElementById('gameOver').onclick = function () {
            game.gameOver(true);
        }
        document.getElementById('addBotLine').onclick = function () {
            game.addBotLine([
                [0, 1, 0, 1, 0, 1, 0, 1, 0, 1]
            ]);
        }
    }
    var start = function (type, dir) {
        var doms = {
            gameDiv: document.getElementById('remote_game'),
            nextDiv: document.getElementById('remote_next'),
            timeDiv: document.getElementById('remote_time'),
            scoreDiv: document.getElementById('remote_score'),
            resultDiv: document.getElementById('remote_gameover')
        }
        game = new Game();
        game.init(doms, type, dir);
    }
    //   导出
    this.start = start;
    this.bindEvents = bindEvents;
}

创建wsServer.js文件

var app = require('HTTP').createServer();
var io = require('socket.io')(app);

var PORT = 3000;
// 客户端计数
var clientCount = 0;
// 保存客户端socket
var socketMap = {}；
app.listen(PORT);
io.on('connection', function (socket) {
    // 用户连接进来后先进行客户加1
    clientCount++;
    socket.clientNum = clientCount;
    socketMap[clientCount] = socket;
    // 是单数个进来的用户需要等待
    if (clientCount % 2 == 1) {
        // 发送wait消息
        socket.emit('wait', 'waiting for another person');
    } else {
        socket.emit('start');
        socketMap[(clientCount - 1)].emit('start');
    }
    socket.on('disconnect', function () {});
});
console.log('websocket listening on port' + PORT);

script.js中传入socket对象

var socket = io('ws://localhost:3000');
// 创建local对象并调用,传入socket对象
var local = new Local(socket);
var remote = new Remote(socket);

socket.on('waiting', function (str) {
    document.getElementById('waiting').innerHTML = str;
});