Canvas + WebSocket + Node.js构建在线象棋程序（一）

Posted on by

本节主要是使用Canvas绘制棋盘和棋子，并确定前端的基本程序结构。
由于刚刚开始学习使用html5，所以程序写的比较挫，各位看客轻拍。
首先，写象棋的基本骨架，html页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-cn" />
 <title>象棋示例</title>
 <link charset="utf-8" rel="stylesheet" href="style.css" type="text/css" />
 <script type="text/javascript" src="chess.js" charset="utf-8"></script>
</head>
<body>
<canvas id="chessCanvas" width="600" height="600">
 您的浏览器不支持canvas，推荐使用chrome！
</canvas>
<canvas id="PiecesCanvas" width="600" height="600"></canvas>
</body>
</html>

这里定义了两个Canvas,chessCanvas当棋盘使用，PiecesCanvas用来绘制棋子。棋局开始时先在chessCanvas上绘制棋盘，然后这个Canvas一直保持不变，作为棋子Canvas的背景，PiecesCanvas叠加在棋盘Canvas之上，每次棋局发生改变只需要重绘piecesCanvas即可，不需要重绘棋盘，降低了重绘代价。
使用简单的CSS来将两个Canvas叠加：

#chessCanvas {
 position: absolute;
 left: 0px;
 top: 0px;
 z-index: 0;
}
#PiecesCanvas {
 position: absolute;
 left: 0px;
 top: 0px;
 z-index: 9999;
}

然后需要在js中定义象棋需要使用的一些对象和变量

var me = {};
//棋盘Canvas
me.chessCanvas=document.getElementById(chessId);
me.cxt=me.chessCanvas.getContext("2d");

//棋盘高度
me.boardHight = me.chessCanvas.height;
//棋盘宽度
me.boardWidth = me.chessCanvas.width;

//棋子Canvas
me.piecesCanvas=document.getElementById(piecesId);
//保证棋子Canvas的高度宽度与棋盘相同
me.piecesCanvas.height = me.boardHight;
me.piecesCanvas.width = me.boardWidth;
me.piececxt=me.piecesCanvas.getContext("2d");

//设置棋子中字体
me.piececxt.font = 'bold 30px 宋体';
//棋子文字中线垂直对齐
me.piececxt.textBaseline = 'middle';
//棋子文字水平居中对齐
me.piececxt.textAlign = "center";

me.startX = 0;//棋盘从Canvas的左起始点
me.startY = 0;//棋盘从Canvas的上起始点
me.xStep = 0;//棋盘格子横向间距
me.yStep = 0;//棋盘格子垂直间距
me.piecesList = {};//棋子列表

另外，还定义了一些动作函数：

 /*
 *绘制棋盘，确定棋盘左上角起点位置以及横向纵向间距
 */
 me.drawChessBoard = function() {};

 /*
 * 绘制单个棋子
 */
 me.drawPiece = function(word, x, y, color) {};

 /*
 * 清空棋盘
 */
 me.erasePieces = function() {};

 /*
 * 初始化棋盘
 */
 me.initPieces = function() {};

 /*
 * 重绘棋局中所有活着的棋子
 */
 me.reDrawPieces = function() {};

目前还只是把棋盘和棋子绘制了出来，没有和鼠标事件关联，也没有和服务器通讯，这些后面慢慢做。
最后，放一张截图。

棋盘