Skip to content

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

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

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