继上次实现android版人人五子棋后，发现分享给别人很麻烦，还需安装。所以想试试小程序，今天思考一番，用时3小时，实现此小程序。 特写此文章，分享给有用的同学，欢迎关注，点赞，评论。
话不多说，先看效果图
胜利效果图.png
悔棋效果图.jpeg
思路分析，几点问题
1.需要采用小程序canvas来绘制棋盘和棋子。
2.捕捉canvas的触摸事件，来保存触摸点到黑棋或者白棋数组，然后重新绘制canvas。
3.胜利算法判断，判断四个方向即（横向，纵向，左下，右下）是否满足五子连珠。
4.重新开始功能，需要清空所有棋子数组，然后绘制棋盘。
5.悔棋一步功能，remove上一步黑子数组或者白子数组的最后一个，然后绘制棋盘。
话不多说，直接撸代码
1.wxml文件
<!--pages/wuziqi/index.wxml-->
<view class="wuziqi-container" >
<canvas canvas-id='customCanvas' class="customCanvas" style="width:{{viewWidth}}px;height:{{viewWidth}}px" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></canvas>
<view class="buttom-view" >
<text style="color:white" >{{textShow}}</text>
</view>
<view class="buttom-action-view">
<view class="action-view-left" bindtap='reStart'>
<text style="color:white" >重新开始</text>
</view>
<view class="action-view-right" bindtap='backStep'>
<text style="color:white" >悔棋一步</text>
</view>
</view>
</view>
可以看到，一个canvas来绘制棋盘，一个提示文字，两个操作按钮。
2.wxss文件
/* pages/wuziqi/index.wxss */
.customCanvas{
background-color: #9797f5;
margin-top: 20px;
opacity: 0.8;
}
.buttom-view{
width:110px;
height:30px;
background-color: rgba(255, 0, 0, 0.4);
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.buttom-action-view{
width: 100%;
height:35px;
margin-top: 30px;
display: flex;
flex-direction: row;
}
.action-view-left{
display: flex;
flex:1;
background-color: black;
margin-right: 10px;
margin-left: 20px;
justify-content: center;
align-items: center;
opacity: 0.7;
border-radius: 2px;
}
.action-view-right{
display: flex;
flex:1;
background-color: black;
margin-right: 20px;
margin-left: 10px;
justify-content: center;
align-items: center;
opacity: 0.7;
border-radius: 2px;
}
.wuziqi-container{
width:100%;
height:100%;
position:fixed;
display: flex;
align-items: center;
flex-direction: column;
background-size:100% 100%;
-moz-background-size:100% 100%;
background-image:url("data:image/png;base64,/9j/4KKKKBhRRRTQmFFFFMkMmlyaSikxM//9k=");
}
背景图生成的base64码太长，所以去掉，大家可自行设置
3.初始化页面数据
/**
* 页面的初始数据
*/
data: {
// 棋盘的默认宽度
viewWidth:300,
// 每个格子的长度
geLength:10,
// 棋盘线条数
geNum:13,
// 棋子占棋盘的比例
ratio:0.75,
// 白子数组
whiteArray: [],
// 黑子数组
blackArray: [],
// 是否是白字下
isWhite:true,
// 提示文字
textShow:'白子下',
// 游戏是否结束
isGameOver:false,
// 五子连珠
MAX_PIECE_NUM:5
},
4.页面初始化时，重新设置棋盘宽高，以及每个格子的宽度
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this;
wx.getSystemInfo({
//获取系统信息成功，将系统窗口的宽高赋给页面的宽高
success: function (res) {
that.setData({
viewWidth:res.windowWidth-40,
geLength: (res.windowWidth - 40)/that.data.geNum
});
}
})
},
5.初始化棋盘和棋子
// 初始化数据
init:function(){
var ctx = wx.createCanvasContext('customCanvas');
// 绘制棋盘
this.drawBoard(ctx);
// 绘制棋子
this.drawPieces(ctx);
// 绘制
ctx.draw();
//检测是否胜利
this.checkGameIsOver();
},
6.绘制棋盘
// 绘制棋盘
drawBoard: function (ctx){
ctx.setLineWidth(1);
ctx.setStrokeStyle("#000000");
for(let i=0;i<this.data.geNum;i++){
ctx.moveTo((0.5 + i) * this.data.geLength,(0.5)*this.data.geLength);
ctx.lineTo((0.5 + i) * this.data.geLength, this.data.viewWidth-(0.5) * this.data.geLength);
ctx.moveTo((0.5) * this.data.geLength, (0.5 + i) * this.data.geLength);
ctx.lineTo(this.data.viewWidth-(0.5) * this.data.geLength, (0.5 + i ) * this.data.geLength);
ctx.stroke();
}
},
考虑到边线也要下棋，故隔半个格子即（0.5*geLength）开始绘制。
7.绘制棋子
// 绘制棋子
drawPieces: function (ctx){
const blackPiece = '../../images/stone_b1.png';
const whitePiece = '../../images/stone_w2.png';
for(let i=0;i<this.data.whiteArray.length;i++){
let point = this.data.whiteArray[i];
ctx.drawImage(whitePiece, (point.x + (1 - this.data.ratio)/2) * this.data.geLength, (point.y + (1 - this.data.ratio)/2) * this.data.geLength, this.data.geLength * this.data.ratio, this.data.geLength * this.data.ratio);
}
for (let i = 0; i < this.data.blackArray.length; i++) {
let point = this.data.blackArray[i];
ctx.drawImage(blackPiece, (point.x + (1 - this.data.ratio)/2) * this.data.geLength, (point.y + (1 - this.data.ratio)/2) * this.data.geLength, this.data.geLength * this.data.ratio, this.data.geLength * this.data.ratio);
}
},
按触摸时保存的棋子数组，进行绘制。设置棋子宽度为格子的3/4，故如（0，0）点，绘制起点应该是（1-3/4）/2，因为要居中，所以应是1/8处。
8.触摸棋盘
touchEnd:function(e){
if(this.data.isGameOver){
return false;
}
const mPoint = this.getValidPoint(e.changedTouches[0]);
if (this.isHasPoint(mPoint, this.data.whiteArray) || this.isHasPoint(mPoint, this.data.blackArray)){
return false;
}
if (this.data.isWhite){
this.data.whiteArray.push(mPoint);
}else{
this.data.blackArray.push(mPoint);
}
this.setShowTextViewString();
this.init();
},
首先判断游戏是否结束，如果结束，则触摸无效；
然后通过this. getValidPoint()方法格式话触摸点，得到的点，进行数组重复判断，如果白棋或者黑子数组有该点，则触摸无效；
判断当前是否是白子下，如果是，将此点保存在白子数组；否则保存在黑子数组，然后去更改提示文字和是否是白子下；
最后一步，重新绘制棋盘和棋子canvas；
9.格式化触摸点
// 格式化触摸点
getValidPoint:function(point){
let x = Math.floor(point.x / this.data.geLength);
let y = Math.floor(point.y / this.data.geLength);
return {
x:x,
y:y
}
},
拿到触摸点，除以格子长度，进行向下取整，保存结果。
10.判断是否包含某个点
// 判断是否包含某个点
isHasPoint:function(point,mArray){
return JSON.stringify(mArray).indexOf(JSON.stringify(point)) != -1;
},
11.设置显示的文字和更改是否是白子下
// 设置显示文字
setShowTextViewString:function(){
this.data.isWhite = !this.data.isWhite;
this.setData({
textShow: this.data.isWhite ? '白子下' : '黑子下'
});
},
12.检查游戏是否胜利
// 检查游戏是否胜利
checkGameIsOver:function(){
const blackWin = this.isWiner(this.data.blackArray);
const whiteWin = this.isWiner(this.data.whiteArray);
if(blackWin){
this.data.isGameOver = true;
this.setData({
textShow: '黑棋胜利！'
});
wx.showToast({
title: '黑棋胜利',
});
}else if(whiteWin){
this.data.isGameOver = true;
this.setData({
textShow: '白棋胜利！'
});
wx.showToast({
title: '白棋胜利',
});
}else{
this.data.isGameOver = false;
}
},
13.检测是否胜利的算法
// 检测是否胜利的算法
isWiner:function(pieceArray){
for(let i=0;i<pieceArray.length;i++){
let x = pieceArray[i].x;
let y = pieceArray[i].y;
if (this.check(x, y, pieceArray, 0) || this.check(x, y, pieceArray, 1) || this.check(x, y, pieceArray, 2) || this.check(x, y, pieceArray, 3)){
return true;
}
}
return false;
},
14.检查四个方向
// 检查四个方向
check:function(x,y,points,type){
let point1;
let point2;
let count = 1;
for (let i = 1; i < this.data.MAX_PIECE_NUM; i++) {
switch (type) {
case 0:
point1 = {x:x - i, y:y};
break;
case 1:
point1 = {x:x, y:y - i};
break;
case 2:
point1 = {x:x - i, y:y + i};
break;
case 3:
point1 = {x:x + i, y:y + i};
break;
}
if (this.isHasPoint(point1,points)) {
count++;
} else {
break;
}
}
for (let i = 1; i < this.data.MAX_PIECE_NUM; i++) {
switch (type) {
case 0:
point2 = {x:x + i, y:y};
break;
case 1:
point2 = {x:x, y:y + i};
break;
case 2:
point2 = {x:x + i, y:y - i};
break;
case 3:
point2 = {x:x - i, y:y - i};
break;
}
if (this.isHasPoint(point2, points)) {
count++;
} else {
break;
}
}
if (count == this.data.MAX_PIECE_NUM) {
return true;
}
return false;
},
拿到一个点，进行一个方向四次连续循环比较，看是数组中是否都包含，然后进行反方向比较，看两个方向加起来是否满足连续五子，如果是则五子连珠，游戏结束。
15.重新开始
// 重新开始
reStart:function(){
this.data.whiteArray.splice(0, this.data.whiteArray.length);
this.data.blackArray.splice(0, this.data.blackArray.length);
this.init();
this.setData({
textShow: this.data.isWhite ? '白子下' : '黑子下'
});
},
清空所有数组，重新绘制棋盘。
16.悔棋一步
// 悔棋一步
backStep:function(){
if (this.data.whiteArray.length > 0 || this.data.blackArray.length>0){
if(this.data.isWhite){
this.data.blackArray.pop();
}else{
this.data.whiteArray.pop();
}
this.setShowTextViewString();
this.init();
}else{
wx.showToast({
title: '不能再悔棋啦！',
})
}
},
首先判断黑棋数组和白棋数组是否为空，为空则不能再悔棋；否则判断上一次是白子下还是黑子下，移除数组最后一位，重新绘制棋盘和初始化提示文字。
结束语
终于写完了，写代码3小时，写文章两小时，走过路过，欢迎点赞，留言批评指正。
网友评论