微信小程序----五子棋

const Gobang = class { constructor(page,opts){ var obj = opts || {}; this.page = page; this.type = obj.type || 10; this.width = obj.width || 300; this.height = obj.height || 300; this.margin = obj.margin || 20; this.lineColor = obj.lineColor || '#555555'; this.canvasId = obj.canvasId || 'tui-canvas'; this.init(); } init(){ // 变量 this.ABSCISSA_ARRAY = [];//横坐标数组 this.ORDINATE_ARRAY = [];//纵坐标数组 this.START_GAME = false;//是否开始游戏 this.everyPoint = [];//全部坐标点 this.everyLen = (this.width - this.margin * 2) / this.type;//每个格子的宽高 this.r = this.everyLen / 3;//每个棋子的半径 this.myPoint = [];//存放第一个棋手的棋子 this.AIPoint = [];//存放第二个棋手的棋子 this.boolMy = true;//第一个棋手先手 this.boolAI = false;//第二个棋手后手 this.rowsNum = this.type + 1;//棋盘格数 this.CHESS_LEN = 5;//连珠胜利数 this.ctx = wx.createCanvasContext(this.canvasId, this); // 计算棋盘各点坐标 this.calculateCoordinates(); // 绘制棋盘 this.drawChessboard(); // 绑定事件 this.bindEvent(); } calculateCoordinates() { // 每个格子的宽高 var everyLen = this.everyLen; // 双循环计算每个坐标的横纵坐标 for (var i = 0; i <= this.type; i++) { var arrX = [], arrY = [], arrZ = []; for (var j = 0; j <= this.type; j++) { arrX.push({ y: this.margin + i * everyLen, x: this.margin + j * everyLen, pointX: j, pointY: i }); arrZ.push({ y: this.margin + i * everyLen, x: this.margin + j * everyLen }); arrY.push({ x: this.margin + i * everyLen, y: this.margin + j * everyLen }) } // 保存横线坐标和竖线坐标 this.ABSCISSA_ARRAY.push(arrX); this.everyPoint.push(arrZ); this.ORDINATE_ARRAY.push(arrY); } } drawLine(arr){//绘制棋盘线 arr.forEach(current => { this.ctx.setFillStyle(this.lineColor); this.ctx.beginPath(); this.ctx.lineWidth = 1; this.ctx.moveTo(current[0].x, current[0].y); for (var i = 1; i < current.length; i++) { this.ctx.lineTo(current[i].x, current[i].y); } this.ctx.stroke(); this.ctx.closePath(); this.ctx.draw(true); }); } drawChessboard(){ // 清空canvas this.ctx.clearRect(0, 0, this.width, this.height); // 绘制横向线 this.drawLine(this.everyPoint); // 绘制竖向线 this.drawLine(this.ORDINATE_ARRAY); } // 获取当前点击位置的坐标 getPosition(e){ return { x: e.touches[0].x, y: e.touches[0].y }; } // 将当前坐标和棋盘坐标数组对比，找到精确坐标 checkPoint(arr,po){ for (var i = 0; i < this.ABSCISSA_ARRAY.length; i++){ for (var j = 0; j < this.ABSCISSA_ARRAY[i].length; j++){ if (Math.abs(this.ABSCISSA_ARRAY[i][j].x - po.x) < this.everyLen / 2 && Math.abs(this.ABSCISSA_ARRAY[i][j].y - po.y) < this.everyLen/2){ // 将棋盘精确坐标保存到当前持棋方数组 arr.push(this.ABSCISSA_ARRAY[i][j]); // 同时删除棋盘坐标数组的该值，表示当前位置已经存在棋子 this.ABSCISSA_ARRAY[i].splice(j,1); break; } } } } // 绘制当前坐标棋子 drawCle(opts,color){ this.ctx.setFillStyle(color); this.ctx.beginPath(); this.ctx.arc(opts.x, opts.y, this.r, 0, Math.PI * 2, true); this.ctx.closePath(); this.ctx.fill(); this.ctx.draw(true); } drawLastPoint(type){ // 判断是黑方持棋还是白方持棋，进行绘制棋子 if(type == 'AI'){ this.AIPoint.forEach((current, index) => { this.drawCle(current, '#000000'); }); }else{ this.myPoint.forEach((current, index) => { this.drawCle(current, '#ffffff'); }); } } checkTransverse(arr,po){//横向检查 var len = arr.length - 1; var count = 1; // 东 for(var i = 1; i < this.CHESS_LEN ; i++){ for (var j = 0; j < len; j++){ if(arr[j].pointX == po.pointX - i && arr[j].pointY == po.pointY){ count++; } } } if (count == this.CHESS_LEN) { return true;} // 西 for (var i = 1; i < this.CHESS_LEN; i++) { for (var j = 0; j < len; j++) { if (arr[j].pointX == po.pointX + i && arr[j].pointY == po.pointY) { count++; } } } if (count == this.CHESS_LEN) { return true; } } checkPortrait(arr,po){//纵向检查 var len = arr.length - 1; var count = 1; // 南 for (var i = 1; i < this.CHESS_LEN; i++) { for (var j = 0; j < len; j++) { if (arr[j].pointX == po.pointX && arr[j].pointY == po.pointY - i) { count++; } } } if (count == this.CHESS_LEN) { return true; } // 北 for (var i = 1; i < this.CHESS_LEN; i++) { for (var j = 0; j < len; j++) { if (arr[j].pointX == po.pointX && arr[j].pointY == po.pointY + i) { count++; } } } if (count == this.CHESS_LEN) { return true; } } checkNortheast(arr,po){//45度 var len = arr.length - 1; var count = 1; // 西南 for (var i = 1; i < this.CHESS_LEN; i++) { for (var j = 0; j < len; j++) { if (arr[j].pointX == po.pointX - i && arr[j].pointY == po.pointY - i) { count++; } } } if (count == this.CHESS_LEN) { return true; } // 东北 for (var i = 1; i < this.CHESS_LEN; i++) { for (var j = 0; j < len; j++) { if (arr[j].pointX == po.pointX + i && arr[j].pointY == po.pointY + i) { count++; } } } if (count == this.CHESS_LEN) { return true; } } checkNorthwest(arr,po){//135度 var len = arr.length - 1; var count = 1; // 西北 for (var i = 1; i < this.CHESS_LEN; i++) { for (var j = 0; j < len; j++) { if (arr[j].pointX == po.pointX - i && arr[j].pointY == po.pointY + i) { count++; } } } if (count == this.CHESS_LEN) { return true; } // 东南 for (var i = 1; i < this.CHESS_LEN; i++) { for (var j = 0; j < len; j++) { if (arr[j].pointX == po.pointX + i && arr[j].pointY == po.pointY - i) { count++; } } } if (count == this.CHESS_LEN) { return true; } } checkWinner(arr){ var currentPo = arr[arr.length - 1]; var win1 = this.checkTransverse(arr, currentPo); var win2 = this.checkPortrait(arr, currentPo); var win3 = this.checkNortheast(arr, currentPo); var win4 = this.checkNorthwest(arr, currentPo); if (win1 || win2 || win3 || win4){ return true; }else{ return false; } } resetChessBoard(){ this.page.setData({ isHide: false }); this.init(); } drawAll(){ this.boolAI = !this.boolAI; this.boolMy = !this.boolMy; this.drawLastPoint('PO'); this.drawLastPoint('AI'); } bindEvent(){ var self = this; // 悔棋 this.page.changeUndo = function(e){ if (self.START_GAME){ var lastM = self.myPoint.length - 1; var LastA = self.AIPoint.length - 1; self.drawChessboard(); if (self.boolAI && !self.boolMy && lastM >= 0){ self.ABSCISSA_ARRAY[self.myPoint[lastM].pointY].push(self.myPoint[lastM]); self.myPoint.splice(lastM, 1); } else if (!self.boolAI && self.boolMy && LastA >= 0){ self.ABSCISSA_ARRAY[self.AIPoint[LastA].pointY].push(self.AIPoint[LastA]);