Skip to content

D
dva-JingZi-Game
Commit b1c732b2 authored by Point 郑海洋's avatar Point 郑海洋 👾
Browse files
Options

修改payload.增加颜色.修改错误字符

parent 07bf1d22
Hide whitespace changes
Inline Side-by-side
Showing with 272 additions and 194 deletions
src/assets/global.less
View file @ b1c732b2
...@@ -2,6 +2,6 @@ ...@@ -2,6 +2,6 @@
width: 336px; width: 336px;
height: 336px; height: 336px;
margin-top: 5px; margin-top: 5px;
margin-left:5px; margin-left: 5px;
float: left; float: left;
} }
src/component/box.js
View file @ b1c732b2
import styled from 'styled-components'; import styled from 'styled-components';
const Box =styled.div ` const Box = styled.div `
background: #fff; background: #fff;
border: 1px solid #999; border: 1px solid #999;
float: left; float: left;
...@@ -13,51 +13,45 @@ const Box =styled.div ` ...@@ -13,51 +13,45 @@ const Box =styled.div `
width: 100px; width: 100px;
` `
function BoxMaster(props){ function BoxMaster(props) {
// console.log("props",props) const handelClick = (value) => {
const handelClick =(value)=>{
// console.log("value",value)
// console.log("handelClick")
// 判断游戏是否有胜利者 // 判断游戏是否有胜利者
if(props.winer) return if (props.winer) return
// 判断是否重复点击 // 判断是否重复点击
if(!reClick(value)) { if (!reClick(value)) {
// 更新整体 // 更新整体
props.dispatch({ props.dispatch({
type:'main/updateObjFn', type: 'main/updateObjFn',
id:value.value, id: value.value,
flage:value.nowFliage, flag: value.nowFliage,
datasource:props.datasource
}) })
// 保存每一步操作 // 保存每一步操作
props.dispatch({ props.dispatch({
type:'main/saveActionFn', type: 'main/saveActionFn',
num:props.num, id: value.value,
id:value.value, flag: value.nowFliage,
flage:value.nowFliage,
list:props.datasource,
actionData:props.actionData
}) })
} }
} }
// 是否重复点击 // 是否重复点击
function reClick(value) { function reClick(value) {
let tempObj= value.datasource.find((item,index)=>{return item.value === value.value}) let tempObj = value.datasource.find((item, index) => {
if(tempObj && tempObj.flage) { return item.value === value.value
})
if (tempObj && tempObj.flag) {
return true return true
}else{ } else {
return false return false
} }
} }
return ( return (
<Box onClick={()=>handelClick(props)} > <Box onClick = { () => handelClick(props)} style={{background:props.color}}>
{props.flage} { props.flag }
</Box> </Box>
) )
} }
export default BoxMaster export default BoxMaster
src/models/g.js
View file @ b1c732b2
export default { export default {
namespace: 'main', namespace: 'main',
state: { state: {
nowFlage:"X", nowflag: "X",
list: [ list: [{
{ value: 1,
value:1, flag: null,
flage:null, }, {
},{ value: 2,
value:2, flag: null,
flage:null, }, {
},{ value: 3,
value:3, flag: null,
flage:null, }, {
},{ value: 4,
value:4, flag: null,
flage:null, }, {
},{ value: 5,
value:5, flag: null,
flage:null, }, {
},{ value: 6,
value:6, flag: null,
flage:null, }, {
},{ value: 7,
value:7, flag: null,
flage:null, }, {
},{ value: 8,
value:8, flag: null,
flage:null, }, {
},{ value: 9,
value:9, flag: null,
flage:null, }],
}], actionData: [],
num:0, winer: null,
actionData:[], goBackKey: null
gameStatus:false,
winer:null
}, },
reducers: { reducers: {
updateFlage(state,action) { updateflag(state, action) {
return { const { tempFlag } = action.payload
...state, return {
nowFlage:action.flage, ...state,
gameStatus:true nowflag: tempFlag,
} }
},
updateSelectOne(state,action) {
return {
...state,
list:action.list
}
}, },
updateAction(state,action) { updateSelectOne(state, action) {
const { tempArry } = action.payload
return { return {
...state, ...state,
actionData:action.actionData, list: tempArry
num:action.num
} }
}, },
updayeRenderData(state,action) { updateAction(state, action) {
const { actionData } = action.payload
return { return {
...state, ...state,
list:action.renderList, actionData: actionData,
actionData:action.actionData, goBackKey: null
num:action.num,
gameStatus:action.gameStatus,
} }
}, },
updateWiner(state,action) { updateRenderData(state, action) {
const { tempData, tempActionData, tempNowFlag, goBackKey } = action.payload
return { return {
...state, ...state,
winer:action.winer, list: tempData,
gameStatus:false actionData: tempActionData,
nowflag: tempNowFlag,
goBackKey: goBackKey
}
},
updateWiner(state, action) {
const { winer } = action.payload
return {
...state,
winer: winer,
goBackKey: null
} }
} }
}, },
effects: { effects: {
// 更新对象 // 更新对象
*updateObjFn({id,flage,datasource},{call,put,select}) { * updateObjFn({
id,
flag,
}, {
call,
put,
select
}) {
// 更新当前点击的对象的标记 // 更新当前点击的对象的标记
let tempArry=JSON.parse(JSON.stringify(datasource)) const tempList = yield select(state=> state.main.list)
let index= tempArry.findIndex((item,index)=>{ return item.value === id}) let tempArry = JSON.parse(JSON.stringify(tempList))
tempArry[index].flage=flage let index = tempArry.findIndex((item, index) => {
return item.value === id
})
tempArry[index].flag = flag
let tempFlag = flag === "X" ? "O" : "X"
yield put({ yield put({
type:"updateSelectOne", type: "updateSelectOne",
list:tempArry payload:{ tempArry }
}) })
// 更新全局的标记 // 更新全局的标记
yield put({ yield put({
type:'updateFlage', type: 'updateflag',
flage:flage==="X"?"O":"X" payload:{ tempFlag }
}) })
}, },
// 保存每一步的操作 // 保存每一步的操作
*saveActionFn({num,id,flage,list,actionData},{call,put,select}) { * saveActionFn({
num = num+1 id,
let tempArry = JSON.parse(JSON.stringify(list)) // 深拷贝 flag,
let index = tempArry.findIndex((item,index) => { return item.value === id}) }, {
tempArry[index].flage = flage call,
put,
select
}) {
const tempList = yield select(state=> state.main.list)
let actionData = yield select(state=> state.main.actionData)
const goBackKey = yield select(state=> state.main.goBackKey)
let tempArry = JSON.parse(JSON.stringify(tempList)) // 深拷贝
let index = tempArry.findIndex((item, index) => {
return item.value === id
})
tempArry[index].flag = flag
if(goBackKey) {
actionData = actionData.slice(0, goBackKey)
}
actionData.push({ actionData.push({
key:num, key: actionData.length+1,
value:tempArry value: tempArry,
flag: flag
}) })
// console.log("actionData",actionData) // console.log("actionData",actionData)
yield put({ yield put({
type:'updateAction', type: 'updateAction',
num:num, payload:{ actionData }
actionData:actionData
}) })
}, },
// 回退操作 // 回退操作
*updateRenderDataFn({flage,key,actionData,list},{call,put,select}) { * updateRenderDataFn({
let tempList=JSON.parse(JSON.stringify(actionData)) flag,
key,
actionData,
}, {
call,
put,
select
}) {
const tempList = yield select(state=> state.main.list)
let tempNowFlag = yield select(state=> state.main.nowflag)
let tempActionDataList = JSON.parse(JSON.stringify(actionData))
let tempData = [] let tempData = []
let tempActionData=[] let tempActionData = []
let num = 0 let goBackKey = null
let gameStatus = true if (!flag) {
if(!flage) { let index = tempActionDataList.findIndex((item, index) => {
let index = tempList.findIndex((item,index)=>{return item.key === key}) return item.key === key
tempData = tempList.find((item,index)=>{return item.key === key}).value })
tempActionData = tempList.slice(0,index+1) tempData = tempActionDataList.find((item, index) => {
num = index+1 return item.key === key
}else{ }).value
tempData = list.map((item,index)=>{ // tempActionData = tempActionDataList.slice(0, index + 1)
let temp={} tempActionData = tempActionDataList
tempNowFlag = tempActionDataList[index].flag === 'X' ? 'O' : 'X'
goBackKey = key
} else {
tempData = tempList.map((item, index) => {
let temp = {}
temp.value = item.value temp.value = item.value
temp.flage = null temp.flag = null
return temp return temp
}) })
num = 0 tempNowFlag = 'X'
gameStatus = false
} }
yield put({ yield put({
type:'updayeRenderData', type: 'updateRenderData',
renderList:tempData, payload:{ tempData, tempActionData,tempNowFlag, goBackKey }
actionData:tempActionData,
num:num,
gameStatus:gameStatus,
}) })
}, },
// 更新获胜者 // 更新获胜者
*updateWinerFn({winer},{call,put,select}) { * updateWinerFn({
winer
}, {
call,
put,
select
}) {
yield put({ yield put({
type:"updateWiner", type: "updateWiner",
winer:winer payload:{ winer }
}) })
} }
}, },
......
src/pages/index.js
View file @ b1c732b2
import styles from './index.less'; import styles from './index.less';
import { useEffect } from 'react'; import {
useEffect
} from 'react';
import Box from '@/component/box'; import Box from '@/component/box';
import { connect } from 'dva'; import {
connect
} from 'dva';
function Main({ dispatch, list,nowFlage,num,actionData,gameStatus,winer }) { function Main({
dispatch,
list,
nowflag,
actionData,
winer
}) {
useEffect(()=>{ useEffect(() => {
if(!gameStatus) return if (winer) return // 如果有胜利者就不执行判断胜负方法
let twoDArry = renderArry(list) let twoDArry = renderArry(list)
if(!twoDArry) return if (!twoDArry) return
let reData = checkWin(twoDArry) let reData = checkWin(twoDArry)
if(reData && reData.status==='win') { if (reData && reData.status === 'win') {
dispatch({ dispatch({
type:"main/updateWinerFn", type: "main/updateWinerFn",
winer:reData.winer winer: reData.winer
}) })
} }
...@@ -22,120 +32,147 @@ function Main({ dispatch, list,nowFlage,num,actionData,gameStatus,winer }) { ...@@ -22,120 +32,147 @@ function Main({ dispatch, list,nowFlage,num,actionData,gameStatus,winer }) {
// 组装二维数组 // 组装二维数组
function renderArry(dataList) { function renderArry(dataList) {
var tempArry=[] var tempArry = []
let len = dataList.length let len = dataList.length
let n = 3; //假设每行显示3个 let n = 3; //假设每行显示3个
let lineNum = len % 3 === 0 ? len / 3 : Math.floor( (len / 3) + 1 ); let lineNum = len % 3 === 0 ? len / 3 : Math.floor((len / 3) + 1);
for(let i=0;i<lineNum;i++) { for (let i = 0; i < lineNum; i++) {
let temp = dataList.slice(i*n, i*n+n); let temp = dataList.slice(i * n, i * n + n);
tempArry.push(temp); tempArry.push(temp);
} }
return tempArry return tempArry
} }
// 判断输赢 // 判断输赢
function checkWin(twoDArry) { function checkWin(twoDArry) {
// 判断第一行 // 判断第一行
if(twoDArry[0][0].flage !=null && twoDArry[0][1].flage !=null && twoDArry[0][2].flage !=null && twoDArry[0][0].flage === twoDArry[0][1].flage && twoDArry[0][1].flage === twoDArry[0][2].flage) { if (twoDArry[0][0].flag != null && twoDArry[0][1].flag != null && twoDArry[0][2].flag != null && twoDArry[0][0].flag === twoDArry[0][1].flag && twoDArry[0][1].flag === twoDArry[0][2].flag) {
return {status:'win',winer:twoDArry[0][0]} return {
status: 'win',
winer: twoDArry[0][0]
} }
}
// 判断第二行 // 判断第二行
if(twoDArry[1][0].flage !=null && twoDArry[1][1].flage !=null && twoDArry[1][2].flage !=null && twoDArry[1][0].flage === twoDArry[1][1].flage && twoDArry[1][1].flage === twoDArry[1][2].flage) { if (twoDArry[1][0].flag != null && twoDArry[1][1].flag != null && twoDArry[1][2].flag != null && twoDArry[1][0].flag === twoDArry[1][1].flag && twoDArry[1][1].flag === twoDArry[1][2].flag) {
return {status:'win',winer:twoDArry[1][0]} return {
status: 'win',
winer: twoDArry[1][0]
} }
}
// 判断第三行 // 判断第三行
if(twoDArry[2][0].flage !=null && twoDArry[2][1].flage !=null && twoDArry[2][2].flage !=null && twoDArry[2][0].flage === twoDArry[2][1].flage && twoDArry[2][1].flage === twoDArry[2][2].flage) { if (twoDArry[2][0].flag != null && twoDArry[2][1].flag != null && twoDArry[2][2].flag != null && twoDArry[2][0].flag === twoDArry[2][1].flag && twoDArry[2][1].flag === twoDArry[2][2].flag) {
return {status:'win',winer:twoDArry[2][0]} return {
status: 'win',
winer: twoDArry[2][0]
} }
}
// 判断第一列 // 判断第一列
if(twoDArry[0][0].flage !=null && twoDArry[1][0].flage !=null && twoDArry[2][0].flage !=null && twoDArry[0][0].flage === twoDArry[1][0].flage && twoDArry[1][0].flage === twoDArry[2][0].flage) { if (twoDArry[0][0].flag != null && twoDArry[1][0].flag != null && twoDArry[2][0].flag != null && twoDArry[0][0].flag === twoDArry[1][0].flag && twoDArry[1][0].flag === twoDArry[2][0].flag) {
return {status:'win',winer:twoDArry[0][0]} return {
status: 'win',
winer: twoDArry[0][0]
} }
}
// 判断第二列 // 判断第二列
if(twoDArry[0][1].flage !=null && twoDArry[1][1].flage !=null && twoDArry[2][1].flage !=null && twoDArry[0][1].flage === twoDArry[1][1].flage && twoDArry[1][1].flage === twoDArry[2][1].flage) { if (twoDArry[0][1].flag != null && twoDArry[1][1].flag != null && twoDArry[2][1].flag != null && twoDArry[0][1].flag === twoDArry[1][1].flag && twoDArry[1][1].flag === twoDArry[2][1].flag) {
return {status:'win',winer:twoDArry[0][1]} return {
status: 'win',
winer: twoDArry[0][1]
} }
}
// 判断第三列 // 判断第三列
if(twoDArry[0][2].flage !=null && twoDArry[1][2].flage !=null && twoDArry[2][2].flage !=null && twoDArry[0][2].flage === twoDArry[1][2].flage && twoDArry[1][2].flage === twoDArry[2][2].flage) { if (twoDArry[0][2].flag != null && twoDArry[1][2].flag != null && twoDArry[2][2].flag != null && twoDArry[0][2].flag === twoDArry[1][2].flag && twoDArry[1][2].flag === twoDArry[2][2].flag) {
return {status:'win',winer:twoDArry[0][2]} return {
status: 'win',
winer: twoDArry[0][2]
} }
}
// 判断交叉左上角到右下角 // 判断交叉左上角到右下角
if(twoDArry[0][0].flage !=null && twoDArry[1][1].flage !=null && twoDArry[2][2].flage !=null && twoDArry[0][0].flage === twoDArry[1][1].flage && twoDArry[1][1].flage === twoDArry[2][2].flage) { if (twoDArry[0][0].flag != null && twoDArry[1][1].flag != null && twoDArry[2][2].flag != null && twoDArry[0][0].flag === twoDArry[1][1].flag && twoDArry[1][1].flag === twoDArry[2][2].flag) {
return {status:'win',winer:twoDArry[0][0]} return {
status: 'win',
winer: twoDArry[0][0]
} }
}
// 判断交叉右上角到左下角 // 判断交叉右上角到左下角
if(twoDArry[0][2].flage !=null && twoDArry[1][1].flage !=null && twoDArry[2][0].flage !=null && twoDArry[0][2].flage === twoDArry[1][1].flage && twoDArry[1][1].flage === twoDArry[2][0].flage) { if (twoDArry[0][2].flag != null && twoDArry[1][1].flag != null && twoDArry[2][0].flag != null && twoDArry[0][2].flag === twoDArry[1][1].flag && twoDArry[1][1].flag === twoDArry[2][0].flag) {
return {status:'win',winer:twoDArry[0][2]} return {
status: 'win',
winer: twoDArry[0][2]
} }
}
} }
function handleChangeData(flage,key,actionData,list) { function handleChangeData(flag, key, actionData ) {
dispatch({ dispatch({
type:'main/updateWinerFn', type: 'main/updateWinerFn',
winer:null winer: null
}) })
dispatch({ dispatch({
type:'main/updateRenderDataFn', type: 'main/updateRenderDataFn',
key:key, key: key,
actionData:actionData, actionData: actionData,
flage:flage, flag: flag,
list:list
}) })
} }
return ( return (
<div> <div >
<div className={styles.content}> <div className = {styles.content} >
{ {
list.map((item,index)=>{ list.map((item, index) => {
let colorStr = item.flag === 'X'?'blue':item.flag==='O'?'red':''
return ( return (
<Box <Box key = {item.value}
key={item.value} value = {item.value}
value={item.value} nowFliage = {nowflag}
nowFliage={nowFlage} dispatch = {dispatch}
dispatch={dispatch} datasource = {list}
datasource={list} flag = {item.flag}
flage={item.flage} actionData = {actionData}
num={num} winer = {winer}
actionData={actionData} color = {colorStr}
winer={winer}
/> />
) )
}) })
} }
</div> </div>
<div className={styles.rightBox}> <div className = {styles.rightBox} >
<p>Next player: {nowFlage} </p> {
{ winer ? < p > Winer is {winer.flag} < /p> : <p> Next player: {nowflag }</p>
winer ? <p>Winer is {winer.flage}</p> : "" }
}
<ul> <ul>
<li> <li>
<button onClick={()=>handleChangeData(true,false,false,list)}> Go to Game Start</button> <button onClick = {() => handleChangeData(true, false, false)} > Go to Game Start < /button>
</li> </li>
{ {
actionData.map((item,index)=>{ actionData.map((item, index) => {
return ( return (
<li key={item.key} value={item.key} > <li key = {item.key} value = {item.key} >
<button className={styles.numLi} onClick={()=>handleChangeData(false,item.key,actionData,list)}> Go to move #{item.key}</button> <button className = {styles.numLi}
onClick = {() => handleChangeData(false, item.key, actionData)} > Go to move# {index+1}
< /button>
</li> </li>
) )
}) })
} }
</ul> </ul>
</div>
</div> </div>
</div>
); );
} }
function mapStateToProps(state) { function mapStateToProps(state) {
const { nowFlage,list,num,actionData,gameStatus,winer } = state.main; const {
nowflag,
list,
actionData,
winer
} = state.main;
return { return {
nowFlage, nowflag,
list, list,
num,
actionData, actionData,
gameStatus,
winer winer
}; };
} }
......
src/pages/index.less
View file @ b1c732b2
@import '~@/assets/global.less'; @import '~@/assets/global.less';
.rightBox { .rightBox {
width: 400px; width: 400px;
height: auto; height: auto;
float: left; float: left;
li { li {
list-style: none; list-style: none;
} }
.numLi { .numLi {
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment