Здравствуйте. Написал небольшую игру что бы попрактиковаться на react.Суть игры- нажать кнопку START GAME и побыстрее нажать кнопкой мыши на все кубики синего цвета которые исчезают после нажатия. В конце выскочить alert окно со временем и количеством нажатых кубиков после чего нужно еще раз нажать на START GAME и игра повторяется. Но игра работает не правильно после нескольких партий , потому что параметр score в функции finishGameHandler принимает число которое не соответствует количеству синих кубиков, и получается так что нажаты все синие кубики но из за переменной не можно закончить игру
https://quintis1212.github.io/react-game/build/ind... - ссылка на игру
Игра состоит из трех компонентов App <= MainInfo <= Game
import React from 'react';
import './App.css';
import MainInfo from './GameContent/MainInfo';
function App() {
return (
<div className="App">
<MainInfo />
</div>
);
}
export default App;
import React, {Component} from 'react';
import Game from './GameTable/Game';
class MainInfo extends Component {
state = {
count:0,
timer:0,
initGame: false,
updateGameTable: false
}
shouldComponentUpdate(){
return this.state.initGame;
}
logToConsole = (e)=> {
if (e.target.className === 'Element' && this.state.initGame) {
this.setState((state)=>{
return {count: state.count + 1}
});
e.target.className = 'Element-empty';
console.log(e.target.className)
}
}
timerUpdated(){ this.setState((state)=>{
return {timer: state.timer + 1}
}); }
initGameHandler =()=>{
this.setState({initGame: true})
console.log('refreshHandler')
clearInterval(this.timerID)
this.timerID=setInterval(() => { this.timerUpdated() }, 1000);
this.setState(()=>{
return {timer:0 , count:0,updateGameTable: false}
});
}
finishGameHandler = (score)=>{
console.log(score)
if(this.state.count === score-1) {
alert('-----GAME OVER-----'+
'YOUR TIME: '+this.state.timer+' seconds'+
' YOUR COUNT: '+(this.state.count+1)+' points');
clearInterval(this.timerID)
this.setState({initGame: true,updateGameTable: true})
}
}
render(){
return(
<div>
<p>Timer : <strong>{this.state.timer} seconds </strong></p>
<p>Counter :<strong>{this.state.count}</strong></p>
<button onClick={this.initGameHandler}>START GAME</button>
<Game click={this.logToConsole} updateData={this.finishGameHandler} updatehandler={this.state.updateGameTable}/>
</div>
)
}
}
export default MainInfo;
import React,{Component} from 'react';
class Game extends Component {
shouldComponentUpdate(nextProps){
return this.props.updatehandler;
}
render() {
let item;
let count = 0;
let arr = [];
for (let i = 0; i < 70; i++) {
arr.push(Math.floor(Math.random() * 10));
}
item = arr.map((el,i,arr) => {
count++
return el < 2 ? arr[i-1] < 4?<div key={count} className='Element-empty'></div>:<div onClick={(e)=>{this.props.click(e)}} key={count} className='Element'></div> : <div key={count} className='Element-empty'></div>
})
console.log(item.filter(el => el.props.className == 'Element'))
let score = item.filter(el => el.props.className === 'Element')
let scoreLenhgth=score.length
return(
<div onClick={() => { this.props.updateData(scoreLenhgth)}} updatehandler={this.props.updateHandler} >
{item}
</div>
)
}
}
export default Game;
Простой
