本节的主要工作是给棋子添加鼠标事件，实现选中棋子、走子以及吃子等功能，同时将服务器端的基础搭建好。

棋盘初始化完成之后，棋盘背景、棋子位置都已经绘制完毕。这时候就需要给上层的Canvas添加鼠标事件的侦听：

me.piecesCanvas.addEventListener("click",me.onClick,false);

当鼠标在棋盘区域进行单击事件的时候，就会触发me.onClick函数的执行，下面就看一下me.onClick的定义

me.onClick = function(e) {
    var x = e.clientX - me.startX - me.piecesCanvas.offsetLeft;
    var y = e.clientY - me.startY - me.piecesCanvas.offsetTop;
    var lineX = x / me.xStep;
    var lineY = y / me.yStep;
    lineX = parseInt(lineX + 1.5);
    lineY = parseInt(lineY + 1.5);
    var pX = (lineX - 1) * me.xStep;
    var pY = (lineY - 1) * me.yStep;
    var dist = Math.sqrt((x - pX) * (x - pX) + (y - pY) * (y - pY));
    var r = me.getPiecesR();
    if (dist < r) {
        if (me.status == "idle") {
            var selectPoint = me.board[lineY][lineX];
            if (selectPoint == "") {
                return;
            } else {
                var selectArr = selectPoint.split("-");
                var position = selectArr[0];
                var pieceStr = selectArr[1];
                if (position == "our") {
                    me.activePiece = pieceStr;
                    me.piecesList["our"][pieceStr].active = true;
                    me.status = "active";
                    me.reDrawPieces();
                }
            }
        } else if (me.status == "active") {
            var selectPoint = me.board[lineY][lineX];

            if (selectPoint == "") {
                me.pieceMoveTo("our", me.activePiece, lineX, lineY);
                me.piecesList["our"][me.activePiece].active = false;
                me.activePiece = "";
                me.status = "idle";
                me.reDrawPieces();
            } else {
                var selectArr = selectPoint.split("-");
                var position = selectArr[0];
                var pieceStr = selectArr[1];
                if (position == "opposite") {
                    me.pieceMoveTo("our", me.activePiece, lineX, lineY);
                    me.piecesList["our"][me.activePiece].active = false;
                    me.activePiece = "";
                    me.status = "wait";
                    me.reDrawPieces();
                } else if (position == "our") {
                    me.piecesList["our"][me.activePiece].active = false;
                    me.piecesList["our"][pieceStr].active = true;
                    me.activePiece = pieceStr;
                    me.reDrawPieces();
                }
            }

        }
    }
};

这里主要将棋局分成三个状态，idle、active和wait。在idle状态，我方可以选子，一旦选定一个棋子，状态就变成active状态，被选中棋子的active属性就变成true。active状态下，继续侦听鼠标事件，当鼠标选再次单击时判断单击的位置。如果仍然选中了我方棋子，那么就更改被选中的棋子，就是换一个棋子走。如果选中了空白棋子，就走到该位置，棋局状态变为wait状态。如果选中的是对方棋子，那么吃掉对方棋子，棋局状态变成wait状态。这里注意两点：一是还没有考虑不同棋子的走子规则，马走日字象走田嘛，这个以后添加。二是wait状态之后就需要和服务器通讯了，现在也还没有实现。

另外，服务器端使用express来处理web请求，同时使用socket.io来进行websocket通讯。服务端代码大致如下：

var express = require('express')
  , routes = require('./routes');

var app = module.exports = express.createServer();
var io = require('socket.io').listen(app);
// Configuration

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'ejs');
  app.set('view options',{layout:false});
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

// Routes

app.get('/', routes.index);
var conns={};
io.sockets.on('connection',function(socket){
	//do something
});
app.listen(3000, function(){
  console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
});

最近时间太紧，以后慢慢写。