@Quintis

Кто может помочь с методами жизненного цикла react?

Здравствуйте. Написал небольшую игру что бы попрактиковаться на 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;
  • Вопрос задан
  • 147 просмотров
Решения вопроса 1
чтобы сразу нельзя было жать сделай просто иф, есть переменная false и пока она фалсе функция которая обратабывает клик на синий блок не запускается, как только ты нажал старт переменная true и доступна функция нажатия на синий квадрат и кстати игра рассчитана как быстро ты сможешь найти блок в списке лучше его не показывать чтобы человек перед стартом не знал куда жать))) а в теории чтобы рандомного блоки расставляла. Таймер обнуляй при каждом нажатии на старт , чтобы каждое нажатие это было 1 запуск с нулевыми значениями.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы