先来说说react，我之前觉得react学得比较费劲的一门语言，光入门我可能入了至少5次才真正得知道了自己写的代码是什么，具体可以有什么功能作用，而且大家都说react很难，这样在学习react的时候，就会心里暗示自己react很难，这样学习起来肯定会很费劲。学习react，把react官方的教程看了不下10次，才算吃通，因为每次看的时候都会给自己心里暗示，说react也太难了，我指定学不会，然后就看的时候都是没有太多思考，只是看他文档的描述，也没有去认真的钻研，直到最后下定决心好好拿下，认真看了，也上手练习，就感觉自己能摸清点门道了。然后就是做小demo，做了一个todolist，然后就是做五子棋，用react实现五子棋我做了两遍，但是这两遍做的实现方法还都不一样。
接下来步入正题：
先看效果图
五子棋.gif
实现五子棋先需要指定一个网格，我需要做的是20x20的网格，所以先定义一个数组
arr: Array(20).fill(null),
然后先让他横循环20次，在纵循环20次。
<div className='main'>
{
this.state.arr.map((item, index) => {
return <div className='main-cell' key={index}>
{
this.state.arr.map((ele, indexs) => {
return <div className='main-cell-single' key={indexs}></div>
})
}
</div>
})
}
</div>
然后把每次点击过的点存在一个数组中，并且判断点击的点是黑棋还是白棋，然后渲染到页面中。
handleClick(index, indexs) {
let state = this.state.isClickArr.findIndex((n) => n.idx == index && n.idxs == indexs)
if (state != -1) {
return
}
this.setState({
data: this.state.data + 1,
idx: index,
idxs: indexs,
isClick: this.state.data % 2 === 0 ? 1 : 2,
isClickArr: this.state.isClickArr.concat([{
data: this.state.data + 1,
idx: index,
idxs: indexs,
isClick: this.state.data % 2 === 0 ? 1 : 2
}])
},
}
<div className='main'>
{
this.state.arr.map((item, index) => {
return <div className='main-cell' key={index}>
{
this.state.arr.map((ele, indexs) => {
return <div className='main-cell-single' key={indexs}>
{
this.state.isClickArr.map((items, indexss) => {
return <div key={indexss} className='main-cell-click' onClick={() => self.handleClick(index, indexs)}>
{
items.isClick == 1 && items.idx == index && items.idxs == indexs
? <div className='main-cell-black'></div>
: items.isClick == 2 && items.idx == index && items.idxs == indexs ? <div className='main-cell-white'></div>
: ''
}
</div>
})
}
</div>
})
}
</div>
})
}
</div>
然后判断输赢
handleClick(index, indexs) {
let state = this.state.isClickArr.findIndex((n) => n.idx == index && n.idxs == indexs)
if (state != -1) {
return
}
this.setState({
data: this.state.data + 1,
idx: index,
idxs: indexs,
isClick: this.state.data % 2 === 0 ? 1 : 2,
isClickArr: this.state.isClickArr.concat([{
data: this.state.data + 1,
idx: index,
idxs: indexs,
isClick: this.state.data % 2 === 0 ? 1 : 2
}])
}, () => {
let letArr = this.state.twoArray.map((ele, index1) => {
let arr = Array(20).fill([])
let arrr=arr.map((item,row) => {
arr[this.state.idx] = this.state.isClickArr.filter((eles, index2) => {
return index1 == eles.idxs && eles.idx == row
})
let arrData = arr[this.state.idx].length > 0 ? arr[this.state.idx][0] : ''
return arrData
})
let arrs = Array(20).fill([])
arrs[indexs][index] = arrr
return arrs[indexs][index]
})
// (纵坐标，横坐标)[indexs][index]确定一个点的位置
console.log(letArr) // 按第一行、第二行...第二十行 纵坐标
console.log(index, 'index') // 横坐标
console.log(indexs, 'indexs') // 纵坐标
//列计数
let columnCount = 0;
// 向上下棋
for (let i = indexs + 1; i < 15; i++) {
if (letArr[i][index].isClick == this.state.isClick) {
columnCount++;
} else {
break;
}
}
// 向下下棋
for (let i = indexs - 1; i >= 0; i--) {
if (letArr[i][index].isClick == this.state.isClick) {
columnCount++;
} else {
break;
}
}
if (columnCount >= 4) {
message.success(this.state.isClick == 1 ? '黑棋胜' : '白棋胜');
columnCount = 0
return;
}
//行计数
let lineCount = 0;
// 向左下棋
for (let i = index + 1; i < 15; i++) {
if (letArr[indexs][i].isClick == this.state.isClick) {
lineCount++;
} else {
break;
}
}
// 向右下棋
for (let i = index - 1; i >= 0; i--) {
if (letArr[indexs][i].isClick == this.state.isClick) {
lineCount++;
} else {
break;
}
}
if (lineCount >= 4) {
message.success(this.state.isClick == 1 ? '黑棋胜' : '白棋胜');
lineCount = 0
return;
}
//斜行计数-左斜 \
let obliqueLeftCount = 0;
// 向左上下棋↖
for (let i = index + 1, j = indexs + 1; i < 15 && j < 15; i++,j++) {
if (letArr[i][j].isClick == this.state.isClick) {
obliqueLeftCount++;
} else {
break;
}
}
// 向左下下棋↘
for (let i = index - 1, j = indexs - 1; i >= 0 && j >= 0; i--,j--) {
if (letArr[j][i].isClick == this.state.isClick) {
obliqueLeftCount++;
} else {
break;
}
}
if (obliqueLeftCount >= 4) {
message.success(this.state.isClick == 1 ? '黑棋胜' : '白棋胜');
obliqueLeftCount = 0
return;
}
//斜行计数-右斜 /
let obliqueRightCount = 0;
// 向右上下棋↗
for (let i = indexs + 1, j = index - 1; i < 15 && j >= 0; i++,j--) {
if (letArr[i][j].isClick == this.state.isClick) {
obliqueRightCount++;
} else {
break;
}
}
// 向左右下下棋↙
for (let i = indexs- 1, j = index + 1; i >= 0 && j < 15; i--,j++) {
if (letArr[i][j].isClick == this.state.isClick) {
obliqueRightCount++;
} else {
break;
}
}
if (obliqueRightCount >= 4) {
message.success(this.state.isClick == 1 ? '黑棋胜' : '白棋胜');
obliqueRightCount = 0
return;
}
})
}
特别要注意，在react中如果需要第二个数据依赖第一个数据，它就需要用到回调函数，在this.setState后面使用。
这是本人为了练习react才做的小demo，可能会有bug，大家不要见怪
大概就是这么多，大家可以在自己本地跑一下试试，源码地址https://gitee.com/changduo33/react-five.git
