欧美极品高清xxxxhd,国产日产欧美最新,无码AV国产东京热AV无码,国产精品人与动性XXX,国产传媒亚洲综合一区二区,四库影院永久国产精品,毛片免费免费高清视频,福利所导航夜趣136

標題: 小程序（游戲）----五子棋（棋盤，重置，對弈） [打印本頁]

作者: G丶Aony 時間: 2020-10-31 06:32
標題: 小程序（游戲）----五子棋（棋盤，重置，對弈）
分析

采用微信小程序的canvas制作五子棋；
確定棋盤大小及格數；
繪制棋盤----通過棋盤寬高和格數計算間距，同時保存坐標點；
黑方和白方下子----定義一個布爾變量代表各自的身份；
重置棋盤----重新開始；
通過判斷當前棋手，悔棋時進行改變。

繪制棋盤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.x, current.y);    }    this.ctx.stroke();    this.ctx.closePath();    this.ctx.draw(true); });  }  drawChessboard(){ // 每個格子的寬高 var everyLen = this.everyLen; // 標記坐標的個數 var count = 0; // 從縱向保存坐標 var arrY = []; // 雙循環計算每個坐標的橫縱坐標 for(var i = 0;i <= this.type; i++){    var arr = [],arr0 = [];    for(var j = 0;j <= this.type; j++){       count++;       arr.push({       y: this.margin + i * everyLen,       x: this.margin + j * everyLen,       pointX: j,       pointY: i,       index: count       });       arr0.push({       x: this.margin + i * everyLen,       y: this.margin + j * everyLen       })    }    // 清空canvas    this.ctx.clearRect(0, 0, this.width, this.height);    // 保存橫線坐標和豎線坐標    this.everyPoint.push(arr);    arrY.push(arr0); } // 繪制橫向線 this.drawLine(this.everyPoint); // 繪制豎向線 this.drawLine(arrY);  }

繪制當前點擊坐標的棋子// 獲取當前點擊位置的坐標  getPosition(e){ return {    x: e.touches[0].x,    y: e.touches[0].y };  }  // 將當前坐標和棋盤坐標數組對比，找到精確坐標  checkPoint(arr,po){ for (var i = 0; i < this.everyPoint.length; i++){    for (var j = 0; j < this.everyPoint.length; j++){       if (Math.abs(this.everyPoint[j].x - po.x) < this.everyLen/2 && Math.abs(this.everyPoint[j].y - po.y) < this.everyLen/2){       // 將棋盤精確坐標保存到當前持棋方數組       arr.push(this.everyPoint[j]);       // 同時刪除棋盤坐標數組的該值，表示當前位置已經存在棋子       this.everyPoint.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');    }); } }  this.page.changeTouchStart = function (e) {    // 判斷游戲是否開始    if (self.START_GAME){       // 獲取當前坐標       var newPo = self.getPosition(e);       // 獲取棋盤精確坐標       if (!self.boolAI && self.boolMy) {       self.checkPoint(self.myPoint, newPo);       } else if (self.boolAI && !self.boolMy) {       self.checkPoint(self.AIPoint, newPo);       }    } } this.page.changeTouchEnd = function (e) {    if (self.START_GAME) {       // 繪制棋子       if (!self.boolAI && self.boolMy) {       self.boolAI = !self.boolAI;       self.boolMy = !self.boolMy;       self.drawLastPoint('PO');       // 判斷白棋是否五子勝利       if (self.myPoint.length >= 5 && self.checkWinner(self.myPoint)){          wx.showToast({title: '白棋勝利！'});          self.START_GAME = false;       }       } else if (self.boolAI && !self.boolMy) {       self.boolAI = !self.boolAI;       self.boolMy = !self.boolMy;       self.drawLastPoint('AI');       // 判斷黑棋是否五子勝利       if(self.AIPoint.length >= 5 && self.checkWinner(self.AIPoint)){          wx.showToast({ title: '黑棋勝利！' });          self.START_GAME = false;       }       }    } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

五子棋勝利方判斷

五子棋勝利就是橫向、縱向、45度斜線方向、135度斜線方向連成五個顏色相同的棋子，為了更加清楚的表示，我將四個方向的判斷做四個函數處理。

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; }  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

重置棋盤resetChessBoard(){  this.page.setData({ isHide: false });  this.init();}this.page.changeReset = function(e){ self.resetChessBoard();}

1
2
3
4
5
6
7

注意

繪制棋盤前必須清空canvas，方便最后的重新開始和重置棋盤；
對當前棋子的坐標四個方向的判斷，采用的原始坐標而不是計算后的繪制坐標；
在判斷持棋人時，各自采用一個值，方便添加悔棋功能。

只是實現了簡單的對下五子棋功能，后續添加悔棋、記分、記時等功能！同時向判斷勝利的函數可以合并為一進行優化！

歡迎光臨 (http://www.raoushi.com/bbs/)