微信小程序学习用demo：五子棋，基于canvas

柿霖不是林

预览图片： [HTML] 纯文本查看 复制代码 var Stone = require('Stone'); var judger = require('FiveStoneJudger'); /** * 五子棋的主控制类 */ export default class FiveStone { /** * 初始化棋盘 * @param page 当前页面页面 * @param chessBoardSize 当前棋盘每行和列最多能下多少个子子 * @param chessboardSizePercent 棋盘的宽度相当于屏幕宽度的百分比(0= this.chessBoardSize || stepPos.y < 0 || stepPos.y >= this.chessBoardSize) { return null; } return stepPos; } /** * 通过事件获取下子在棋盘的绝对位置 */ getStepPosition(e) { var curTarget = e.currentTarget; var stepPos = this.getStepLocation(e); if (stepPos == null) { return null; } var absPos = stepPos.clone(); //后面的那个1像素怎么出来的我也不知道，反正减了之后位置看起来正很多 absPos.x = absPos.x * this.cellSizePX + curTarget.offsetLeft - this.halfCellSizePX - 1; absPos.y = absPos.y * this.cellSizePX + curTarget.offsetTop - this.halfCellSizePX - 1; this.chessBoard[stepPos.x][stepPos.y].pos = absPos.clone(); return absPos; } /** * 下棋，设置的是基于棋盘的坐标 * @return 返回true就是下子成功，否则为失败 */ step(x, y) { if (this.canStepAt(x, y)) { this.chessBoard[x][y].stoneType = this.nowStone(); const nowStone = this.nowStone(); this.stone = nowStone == Stone.black ? Stone.white:Stone.black; this.onStepStone(nowStone, x, y); if (!(this.history instanceof Array)) { this.history = []; } //插入到历史 this.history.push({ 'x':x, 'y':y, 'stoneType':nowStone }); this.judge(nowStone, x, y); return true; } return false; } /** * 悔棋 */ undo() { if (!(this.history instanceof Array) || this.history.length <= 0) { return; } const lastStoneIndex = this.history.length - 1; const lastStone = this.history[lastStoneIndex]; this.stone = lastStone.stoneType; this.history.splice(lastStoneIndex, 1); this.chessBoard[lastStone.x][lastStone.y].stoneType = Stone.none; this.allowStep(); } /** * 判断该棋子是否能够下 */ canStepAt(x, y) { if (x < 0 || x >= this.chessBoardSize || y < 0 || y >= this.chessBoardSize || this.chessBoard[x][y].stoneType != Stone.none) { return false; } return this._canStep; } /** * 当触发了下子的事件的时候 */ onStepStone(nowStone, x, y) { if (this.onStepStoneCallbacks instanceof Array) { for (var i in this.onStepStoneCallbacks) { const cb = this.onStepStoneCallbacks[i]; if (typeof(cb) === 'function') { cb.call(this, nowStone, x, y); } } } } /** * 添加下子的监听器 * @return 如果返回0则代表插入失败，成功返回索引 */ addOnStepStoneCallback(func) { if (!(this.onStepStoneCallbacks instanceof Array)) { this.onStepStoneCallbacks = []; } if (typeof(func) == 'function') { //push以后会返回数组的长度，所以减一之后就会是对应的索引 return this.onStepStoneCallbacks.push(func) - 1; } return 0; } /** * 通过索引删除下子的监听器 */ removeOnStepStoneCallback(index) { if (this.onStepStoneCallbacks instanceof Array) { if (this.onStepStoneCallbacks.length > index) { this.onStepStoneCallbacks.splice(index, 1); } } } /** * 重新开局 */ restart() { this.stone = Stone.black; for (var r in this.chessBoard) { for (var c in this.chessBoard[r]) { this.chessBoard[r][c].stoneType = Stone.none; } } //清空历史 this.history = []; this.allowStep(); } /** * 阻止下子 */ preventStep() { this._canStep = false; } /** * 允许下子 */ allowStep() { this._canStep = true; } /** * 获取当前是下的黑子还是白子 */ nowStone() { return this.stone; } /** * 返回当前是否允许下子 */ canStep() { return this._canStep; } /** * 进行裁判(下子成功之后触发) * @param stepStone 当前下子的类型 * @param x 下子基于棋盘的x坐标 * @param y 下子基于棋盘的y坐标 */ judge(stepStone, x, y) { if (typeof(this._judger) == 'function') { this._judger.call(this, stepStone, x, y, this._winCallback); } } /** * 设置裁判回调 */ setJudger(func) { if (typeof(func) == 'function') { this._judger = func; } } /** * 设置胜利之后的回调 */ setWinCallback(func) { if (typeof(func) == 'function') { this._winCallback = func; } } } 游客，如果您要查看本帖隐藏内容请回复

来学习

下车费vgbhnjmk

学习学习

so niceeeeeeeeeeeeeeeeeeeeeeeeeee

666666666666666666666666666666

过来找找答案

ffffffffffffffffffffff

真厉害

学习一下