本节主要是使用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() {};

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

棋盘

2 thoughts on “Canvas + WebSocket + Node.js构建在线象棋程序(一)

  1. Pingback: html5

  2. 尊敬的作者:

    你好,我有幸拜读了这个系列的三篇文章,动手按照提示来做了,我是新手,运行完东西出不来,所以冒昧的想向您寻求一份源档的。

    谢谢

    Reply

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required