用react写一个井字棋,看了官网的文档,自己写一个函数式的写法,比较简陋和粗糙,如有错误请在评论区指出
整体样式结构:(样式代码就不放了)
html:
return (
<Fragment>
<Textdom />
<div className={style.box}>
<div id='1' onClick={deploy} className={style.tic}></div>
<div id='2' onClick={deploy} className={style.tic}></div>
<div id='3' onClick={deploy} className={style.tic}></div>
<div id='4' onClick={deploy} className={style.tic}></div>
<div id='5' onClick={deploy} className={style.tic}></div>
<div id='6' onClick={deploy} className={style.tic}></div>
<div id='7' onClick={deploy} className={style.tic}></div>
<div id='8' onClick={deploy} className={style.tic}></div>
<div id='9' onClick={deploy} className={style.tic}></div>
</div>
</Fragment>
)
react.js:
function TicTac() {
const [num, setNum] = useState(0); // 切换棋子的控制器
const [chess, setChess] = useState('x'); // 当前棋子
const [one, setone] = useState(''); // 棋盘一
const [two, settwo] = useState(''); // 棋盘二
const [three, setthree] = useState(''); // 棋盘三
const [fore, setfore] = useState(''); // 棋盘四
const [five, setfive] = useState(''); // 棋盘五
const [six, setsix] = useState(''); // 棋盘六
const [seven, setseven] = useState(''); // 棋盘七
const [eight, seteight] = useState(''); // 棋盘八
const [nine, setnine] = useState(''); // 棋盘九
const [king, setKing] = useState(false); // 是否胜出 || 胜出者
const [ping, setPing] = useState(true); // 是否平局
useEffect(() => { // 根据奇数或者偶数来控制棋子
if (num % 2 === 0) {
setChess(chess => 'x')
} else {
setChess(chess => 'o')
}
}, [num])
useEffect(() => { // 响应式钩子
// 作用一 将棋盘数组进行编组传递给deds函数处理
// 作业二 实时判断是否是平局
deds([[one, two, three], [fore, five, six], [seven, eight, nine],
[one, fore, seven], [two, five, eight], [three, six, nine],
[one, five, nine], [three, five, seven]])
let arr = [one, two, three, fore, five, six, seven, eight, nine];
let s = ''
for (let k in arr) {
if (arr[k]) {
s++;
if (s == arr.length && king == false) {
setPing(false);
}
}
}
}, [one, two, three, fore, five, six, seven, eight, nine])
const deploy = (e) => { // 点击事件 根据id向棋盘内填充棋子
if (!e.target.innerHTML && !king) {
setNum(num => num + 1);
e.target.innerHTML = chess;
switch (e.target.id) {
case '1':
setone(chess);
break;
case '2':
settwo(chess);
break;
case '3':
setthree(chess);
break;
case '4':
setfore(chess);
break;
case '5':
setfive(chess);
break;
case '6':
setsix(chess);
break;
case '7':
setseven(chess);
break;
case '8':
seteight(chess);
break;
case '9':
setnine(chess);
break;
}
}
}
const deds = (arr) => { // 接收数组循环对比找出胜利者
let yes = 0;
let hhh = '';
for (let k in arr) {
for (let i = 0; i <= 3; i++) {
if (arr[k][0] && arr[k][i] === arr[k][0]) {
yes++;
if (yes == 3) {
hhh = arr[k][0]
setKing(arr[k][0])
break;
}
} else {
yes = 0;
}
}
}
}
const Textdom = () => { 渲染组件
if (king) {
return <p className={style.title}>胜利者为{king}</p>
} else if (ping === false) {
return <p className={style.title}>平局</p>
} else if (king === false) {
return <p className={style.title}>当前执棋者为:{chess}</p>
}
}
写法比较粗糙,但是逻辑还是清晰的,我的主要思路就是对1~9的棋盘进行编组,然后进行循环对比
下面是整体代码:
import React, { Fragment, useEffect, useReducer, useRef, useState } from 'react';
import style from '../src/public_css/TicTac.module.css';
function TicTac() {
const [num, setNum] = useState(0);
const [chess, setChess] = useState('x'); // 当前棋子
const [one, setone] = useState(''); // 棋盘一
const [two, settwo] = useState(''); // 棋盘二
const [three, setthree] = useState(''); // 棋盘三
const [fore, setfore] = useState(''); // 棋盘四
const [five, setfive] = useState(''); // 棋盘五
const [six, setsix] = useState(''); // 棋盘六
const [seven, setseven] = useState(''); // 棋盘七
const [eight, seteight] = useState(''); // 棋盘八
const [nine, setnine] = useState(''); // 棋盘九
const [king, setKing] = useState(false); // 是否胜出 || 胜出者
const [ping, setPing] = useState(true); // 是否平局
useEffect(() => {
if (num % 2 === 0) {
setChess(chess => 'x')
} else {
setChess(chess => 'o')
}
}, [num])
useEffect(() => {
deds([[one, two, three], [fore, five, six], [seven, eight, nine],
[one, fore, seven], [two, five, eight], [three, six, nine],
[one, five, nine], [three, five, seven]])
let arr = [one, two, three, fore, five, six, seven, eight, nine];
let s = ''
for (let k in arr) {
if (arr[k]) {
s++;
if (s == arr.length && king == false) {
setPing(false);
}
}
}
}, [one, two, three, fore, five, six, seven, eight, nine])
const deploy = (e) => {
if (!e.target.innerHTML && !king) {
setNum(num => num + 1);
e.target.innerHTML = chess;
switch (e.target.id) {
case '1':
setone(chess);
break;
case '2':
settwo(chess);
break;
case '3':
setthree(chess);
break;
case '4':
setfore(chess);
break;
case '5':
setfive(chess);
break;
case '6':
setsix(chess);
break;
case '7':
setseven(chess);
break;
case '8':
seteight(chess);
break;
case '9':
setnine(chess);
break;
}
}
}
const deds = (arr) => { // 接收数组循环对比找出胜利者
let yes = 0;
let hhh = '';
for (let k in arr) {
for (let i = 0; i <= 3; i++) {
if (arr[k][0] && arr[k][i] === arr[k][0]) {
yes++;
if (yes == 3) {
hhh = arr[k][0]
setKing(arr[k][0])
break;
}
} else {
yes = 0;
}
}
}
}
const Textdom = () => {
if (king) {
return <p className={style.title}>胜利者为{king}</p>
} else if (ping === false) {
return <p className={style.title}>平局</p>
} else if (king === false) {
return <p className={style.title}>当前执棋者为:{chess}</p>
}
}
return (
<Fragment>
<Textdom />
<div className={style.box}>
<div id='1' onClick={deploy} className={style.tic}></div>
<div id='2' onClick={deploy} className={style.tic}></div>
<div id='3' onClick={deploy} className={style.tic}></div>
<div id='4' onClick={deploy} className={style.tic}></div>
<div id='5' onClick={deploy} className={style.tic}></div>
<div id='6' onClick={deploy} className={style.tic}></div>
<div id='7' onClick={deploy} className={style.tic}></div>
<div id='8' onClick={deploy} className={style.tic}></div>
<div id='9' onClick={deploy} className={style.tic}></div>
</div>
</Fragment>
)
}
export default TicTac;
喜欢的点个赞,或者收藏,然后新年快乐,工作顺利,升职,加薪!!!