Question

我正在尝试实现记忆游戏。我几乎完成了，但是有两个部分需要帮助。 1.我不知道如何以4x4方式显示我的16张卡片。（可能有点小，但是我是菜鸟） 2.我需要一个新的游戏按钮，用于重置卡片。

我还没有真正尝试过任何东西，我想在实施此修补程序的同时获得帮助并了解它。

  handleClick(name,index){
    if(this.state.openedFrameworks.length === 2){
      setTimeout(() => {
        this.check()
      },750)
    }else {
      let framework = {
        name,
        index
      }
      let finalizedFrameworks = this.state.finalizedFrameworks
      let frameworks = this.state.openedFrameworks
      finalizedFrameworks[index].close = false
      frameworks.push(framework)
      this.setState({
        openedFrameworks: frameworks,
        finalizedFrameworks: finalizedFrameworks
      })
      if(this.state.openedFrameworks.length === 2){
        setTimeout(() => {
          this.check()
        },750)
      }
    }
  } 
  check(){
    let finalizedFrameworks = this.state.finalizedFrameworks
    if((this.state.openedFrameworks[0].name === this.state.openedFrameworks[1].name) && (this.state.openedFrameworks[0].index !== this.state.openedFrameworks[1].index)){
      finalizedFrameworks[this.state.openedFrameworks[0].index].complete = true
      finalizedFrameworks[this.state.openedFrameworks[1].index].complete = true
    }else {
      finalizedFrameworks[this.state.openedFrameworks[0].index].close = true
      finalizedFrameworks[this.state.openedFrameworks[1].index].close = true
    }
    this.setState({
      finalizedFrameworks,
      openedFrameworks: []
    })
  }
  start(){
    let finalizedFrameworks = [];
    this.state.duplicatedFrameworks = this.state.frameworks.concat(this.state.frameworks)
    this.state.randomizedFrameworks = this.shuffle(this.state.duplicatedFrameworks)
    this.state.randomizedFrameworks.map((name,index) => {
      finalizedFrameworks.push({
        name,
        close: true,
        complete: false,
        fail: false
      })
    })
    this.state.finalizedFrameworks = finalizedFrameworks
  }
  shuffle(array){
    let currentIndex = array.length, temporaryValue, randomIndex;
    while (0 !== currentIndex) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }
    return array
  }
  render(){

    return (
      <React.Fragment>
      <div className="game">
          {
            this.state.finalizedFrameworks.map((framework, index) => {           
              return <Card framework={framework.name} click={() => {this.handleClick(framework.name,index)}} close={framework.close} complete={framework.complete}/>
            })
          }
      </div>

      <button onClick={}>
            NEW GAME
      </button>
      </React.Fragment>

    )
  }

我希望以下几点：

卡片采用4x4格式。
“新游戏”按钮可重置卡片。

非常感谢！

Answer 1

要重新启动，我认为您只需要将setState设置为原始启动状态。假设您的start（）函数负责生成初始状态

  start(){
    let finalizedFrameworks = [];

    this.state.duplicatedFrameworks = this.state.frameworks.concat(this.state.frameworks)
    this.state.randomizedFrameworks = this.shuffle(this.state.duplicatedFrameworks)
    this.state.randomizedFrameworks.map((name,index) => {
      finalizedFrameworks.push({
        name,
        close: true,
        complete: false,
        fail: false
      })
    })


    // this.state.finalizedFrameworks = finalizedFrameworks

    // Instead of just setting the state directly, need to do setState to trigger re-render
    this.setState({finalizedFrameworks})
  }

然后，您的NEW GAME按钮只需调用start（）函数即可重新启动

render(){
    return (
      <React.Fragment>
      <div className="game">
          {
            this.state.finalizedFrameworks.map((framework, index) => {           
              return <Card framework={framework.name} click={() => {this.handleClick(framework.name,index)}} close={framework.close} complete={framework.complete}/>
            })
          }
      </div>

      <button onClick={() => this.start()}>
            NEW GAME
      </button>
      </React.Fragment>

    )
  }

记忆游戏问题（将卡片整理到4x4 +，点击游戏即可重启）

1 个答案: