Здравствуйте. Написал небольшую игру что бы попрактиковаться на react.Суть игры- нажать кнопку START GAME и побыстрее нажать кнопкой мыши на все кубики синего цвета которые исчезают после нажатия. В конце выскочить alert окно со временем и количеством нажатых кубиков. Но есть баги:
1 После загрузки можно нажать на синие кубики и они будут исчезать, без нажатия START GAME.(так даже можно выиграть игру с нулевым счетчиком времени).
2 Если пару раз подряд нажать на START GAME счетчик ускоряется , и после выигрыша если нажать на кнопку то время продолжается.
3 Как сделать кнопку REFRESH что б перезапустить игру после выигрыша и не перезагружать всю страницу.
Буду очень благодарен если кто-то поможет с багами или поможет советом как сделать игру лучше) Спасибо и всем хороших выходных!)
https://quintis1212.github.io/react-game/build/ind... - сама игра
https://github.com/Quintis1212/react-game/tree/mas... - репозиторий
Игра состоит из трех компонентов App <= MainInfo <= Game
import React from 'react';
import './App.css';
import MainInfo from './GameContent/MainInfo';
function App() {
return (
<div className="App">
<MainInfo />
10101010101000101010101000
</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
}
shouldComponentUpdate(){
return this.state.initGame;
}
logToConsole = (e)=> {
if (e.target.className === 'Element') {
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')
this.timerID=setInterval(() => { this.timerUpdated() }, 1000);
}
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+'points');
clearInterval(this.timerID)
this.setState({initGame: false})
}
}
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} />
</div>
)
}
}
export default MainInfo;
import React,{Component} from 'react';
class Game extends Component {
shouldComponentUpdate(){
return false
}
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)}} >
{item}
</div>
)
}
}
export default Game;
Простой
