Skip to content

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

添加胜利颜色

parent b1c732b2
Hide whitespace changes
Inline Side-by-side
Showing with 144 additions and 75 deletions
src/component/box.js
View file @ d3ed529c
import styled from 'styled-components';
import WinImg from './winImg';
const Box = styled.div `
background: #fff;
border: 1px solid #999;
......@@ -16,7 +16,7 @@ const Box = styled.div `
function BoxMaster(props) {
const handelClick = (value) => {
// 判断游戏是否有胜利者
if (props.winer) return
if (props.winner) return
// 判断是否重复点击
if (!reClick(value)) {
// 更新整体
......@@ -48,8 +48,13 @@ function BoxMaster(props) {
return (
<Box onClick = { () => handelClick(props)} style={{background:props.color}}>
{ props.flag }
<Box onClick={ () => handelClick(props)} style={{background:props.winner && props.value === props.winner.value ?"":props.color}}>
{
props.winner && props.value === props.winner.value ? (
<WinImg flag={props.flag} />
) : (<span>{props.flag}</span>)
}
</Box>
)
}
......
src/component/winImg.css 0 → 100644
View file @ d3ed529c
.winCss {
font-size: 14px;
animation: winAnimation 2s infinite ;
-moz-animation: winAnimation 2s infinite ; /* Firefox */
-webkit-animation: winAnimation 2s infinite ; /* Safari 和 Chrome */
-o-animation: winAnimation 2s infinite ; /* Opera */
}
@keyframes winAnimation
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
75% {background: green;}
100% {background: white;}
}
@-moz-keyframes winAnimation /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
75% {background: green;}
100% {background: white;}
}
@-webkit-keyframes winAnimation /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
75% {background: green;}
100% {background: white;}
}
@-o-keyframes winAnimation /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
75% {background: green;}
100% {background: white;}
}
src/component/winImg.js 0 → 100644
View file @ d3ed529c
import React,{Component} from 'react';
import style from './winImg.css';
export default class WinImg extends Component {
constructor(props) {
super(props)
}
render(){
const {flag} = this.props
return (
<div className={style.winCss}>
<span>winner is {flag} </span>
</div>
)
}
}
src/global.css
View file @ d3ed529c
......@@ -6,4 +6,3 @@ html, body, #root {
body {
margin: 0;
}
src/models/g.js
View file @ d3ed529c
export default {
namespace: 'main',
state: {
nowflag: "X",
nowFlag: "X",
list: [{
value: 1,
flag: null,
......@@ -31,7 +31,7 @@ export default {
flag: null,
}],
actionData: [],
winer: null,
winner: null,
goBackKey: null
},
reducers: {
......@@ -39,7 +39,7 @@ export default {
const { tempFlag } = action.payload
return {
...state,
nowflag: tempFlag,
nowFlag: tempFlag,
}
},
updateSelectOne(state, action) {
......@@ -63,15 +63,15 @@ export default {
...state,
list: tempData,
actionData: tempActionData,
nowflag: tempNowFlag,
nowFlag: tempNowFlag,
goBackKey: goBackKey
}
},
updateWiner(state, action) {
const { winer } = action.payload
updateWinner(state, action) {
const { winner } = action.payload
return {
...state,
winer: winer,
winner: winner,
goBackKey: null
}
}
......@@ -137,7 +137,7 @@ export default {
},
// 回退操作
* updateRenderDataFn({
flag,
booleanFlag,
key,
actionData,
}, {
......@@ -146,12 +146,13 @@ export default {
select
}) {
const tempList = yield select(state=> state.main.list)
let tempNowFlag = yield select(state=> state.main.nowflag)
let tempNowFlag = yield select(state=> state.main.nowFlag)
let tempActionDataList = JSON.parse(JSON.stringify(actionData))
let tempData = []
let tempActionData = []
let goBackKey = null
if (!flag) {
// 如果点击的不是重玩
if (!booleanFlag) {
let index = tempActionDataList.findIndex((item, index) => {
return item.key === key
})
......@@ -177,16 +178,16 @@ export default {
})
},
// 更新获胜者
* updateWinerFn({
winer
* updateWinnerFn({
winner
}, {
call,
put,
select
}) {
yield put({
type: "updateWiner",
payload:{ winer }
type: "updateWinner",
payload:{ winner }
})
}
},
......
src/pages/index.js
View file @ d3ed529c
......@@ -10,21 +10,22 @@ import {
function Main({
dispatch,
list,
nowflag,
nowFlag,
actionData,
winer
winner
}) {
useEffect(() => {
if (winer) return // 如果有胜利者就不执行判断胜负方法
if (winner) return // 如果有胜利者就不执行判断胜负方法
let twoDArry = renderArry(list)
if (!twoDArry) return
let reData = checkWin(twoDArry)
console.log("reData",reData)
if (reData && reData.status === 'win') {
dispatch({
type: "main/updateWinerFn",
winer: reData.winer
type: "main/updateWinnerFn",
winner: reData.winner
})
}
......@@ -48,132 +49,133 @@ function Main({
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]
winner: twoDArry[0][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]
winner: twoDArry[1][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]
winner: twoDArry[2][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]
winner: twoDArry[0][0]
}
}
// 判断第二列
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]
winner: twoDArry[0][1]
}
}
// 判断第三列
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]
winner: twoDArry[0][2]
}
}
// 判断交叉左上角到右下角
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]
winner: twoDArry[0][0]
}
}
// 判断交叉右上角到左下角
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]
winner: twoDArry[0][2]
}
}
}
function handleChangeData(flag, key, actionData ) {
function handleChangeData(booleanFlag, key, actionData ) {
dispatch({
type: 'main/updateWinerFn',
winer: null
type: 'main/updateWinnerFn',
winner: null
})
dispatch({
type: 'main/updateRenderDataFn',
key: key,
actionData: actionData,
flag: flag,
booleanFlag: booleanFlag,
})
}
return (
<div >
<div className = {styles.content} >
{
list.map((item, index) => {
let colorStr = item.flag === 'X'?'blue':item.flag==='O'?'red':''
return (
<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} >
{
winer ? < p > Winer is {winer.flag} < /p> : <p> Next player: {nowflag }</p>
}
<ul>
<li>
<button onClick = {() => handleChangeData(true, false, false)} > Go to Game Start < /button>
</li>
<div>
<div className={styles.content}>
{
actionData.map((item, index) => {
list.map((item, index) => {
let colorStr = item.flag === 'X'?'blue':item.flag==='O'?'red':''
return (
<li key = {item.key} value = {item.key} >
<button className = {styles.numLi}
onClick = {() => handleChangeData(false, item.key, actionData)} > Go to move# {index+1}
< /button>
</li>
<Box
key={item.value}
value={item.value}
nowFliage={nowFlag}
dispatch={dispatch}
datasource={list}
flag={item.flag}
actionData={actionData}
winner={winner}
color={colorStr}
/>
)
})
}
</div>
<div className={styles.rightBox}>
{
winner ? <p> winner is {winner.flag} </p> : <p> Next player: {nowFlag}</p>
}
<ul>
<li>
<button onClick = {() => handleChangeData(true, false, false)} > Go to Game Start </button>
</li>
{
actionData.map((item, index) => {
return (
<li key={item.key} value={item.key}>
<button className={styles.numLi}
onClick={() => handleChangeData(false, item.key, actionData)}> Go to move# {index+1}
</button>
</li>
)
})
}
</ul>
</div>
</div>
</div>
);
}
function mapStateToProps(state) {
const {
nowflag,
nowFlag,
list,
actionData,
winer
winner
} = state.main;
return {
nowflag,
nowFlag,
list,
actionData,
winer
winner
};
}
......
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