websocket及canvas实现五子棋对弈游戏

websocket及canvas实现五子棋对弈游戏

准备工作

游戏界面的思考

• 2d 界面还是3d界面？ 2d

• 选择 canvas （画布） 还是 svg （矢量图形）？canvas

• 考虑游戏图层：棋盘 棋子

• 考虑性能问题，我们需要制作两个canvas，其中棋盘的canvas绘制好后就不再改变。

如何绘制棋盘?

1. 确认当前棋盘需要多少个格子
2. 确认每个格子的宽度
3. 确认线的总长度
4. 开始绘制的一个起始坐标
5. 确定棋盘大小不小于线的总长度

如何绘制棋子？

1. 棋子棋盘的位置和棋盘的位置需要重合；

2. 确定棋子落下时，相对于当前画布的坐标；

3. 位置根据格子大小进行校对，保证棋子规范落子；

棋盘源码

<div class="chessOut"><!-- 棋盘画好之后不再改变 --><canvas id="chessBoard"></canvas><!-- 棋子 每次落子都会重绘canvas--><canvas id="chess"></canvas>
</div><script>// 创建一个绘制棋盘画笔const boradCtx = Context('2d');// 定义棋盘属性const grid        = 10; // 棋盘的格子数量const gridW       = 50; // 棋盘格子宽度const boardMargin = 30;  //棋盘外边距const boardLine   = grid * gridW; // 画线的长度chessBoard.width  = boardLine+ boardMargin;   // 棋盘宽度 （略大于线长 有边距）chessBoard.height = boardLine+ boardMargin; // 棋盘高度const beginBoard  = {x: boardMargin/2,y: boardMargin/2}; // 起始坐标 //开始绘制棋盘function drawBoard(){boradCtx.beginPath(); //开始作画for( var i =0;i<= grid;i++){// 画横线veTo(beginBoard.x, beginBoard.y + i * gridW); boradCtx.lineTo(beginBoard.x + boardLine, beginBoard.y + i * gridW); // 画竖线veTo(beginBoard.x + i * gridW, beginBoard.y);boradCtx.lineTo(beginBoard.x + i * gridW, beginBoard.y + boardLine); }    boradCtx.stroke()}drawBoard()// 创建一个棋子的画笔const chessCtx = Context('2d');// 定义棋子相关的属性chess.width  = boardLine;  // 棋子棋盘宽度 chess.height = boardLine;  // 棋子棋盘高度p  = boardMargin / 2 +'px';  // 棋子棋盘位置chess.style.left = boardMargin / 2 +'px';// 鼠标点击 开始作画chess.addEventListener('click',ev=>{console.log(ev.offsetX, ev.offsetY)drawChess(ev.offsetX,ev.offsetY,'#fff')},false)// 绘制棋子function drawChess(x,y,color){chessCtx.beginPath();chessCtx.fillStyle = color;// 校准 x y 轴位置// 画圆 arc 接收五个参数  x ，y ，半径，角度，顺时针画圆/逆时针画圆chessCtx.arc(checkPoint(x), checkPoint(y