Question

我正在尝试构建一个3x3的可点击方块网格的寻宝游戏。单击时，显示的值可以是“树”或“宝物。只有一个”宝物”。

我目前正在努力的部分是分配我的正方形，数组的一个随机元素。我已经成功地将9个项目的原始数组更改为"tree" s和一个"treasure"的随机数组。但是，如何将那些在每次调用shuffle函数时都会被洗净的数组元素分配给网格中的随机正方形？

我尝试map遍历trees和我的单个treasure数组，但未能找到随机将这些值分配给的方法，因为我希望游戏大部分时间在其他位置拥有宝藏。

我在下面粘贴了完整的代码以供参考。

Board.js

import React, { Component } from 'react';
import Square from './Square'


class Board extends Component {
    constructor(props){
        super(props)
        this.state = {
            spaces: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            boxOne: "?",
            boxTwo: "?",
            boxThree: "?",
            boxFour: "?",
            boxFive: "?",
            boxSix: "?",
            boxSeven: "?",
            boxEight: "?",
            boxNine: "?"
        }
    }
shuffle = (arr) => {
    for(let i = arr.length - 1; i > 0; i--) {
      const randomNum = Math.floor(Math.random() * (i + 1))
      [arr[i], arr[randomNum] = arr[randomNum], arr[i]]
    }
    let newArr = []
    arr.map(x => {
      if (x === 7) {
        newArr.push("Treasure")
      } else {
        newArr.push("Tree")
      }
    })
    this.setState({spaces: newArr})
}

  render() {
    return (
        <div className = "container">
            <div className = "board">
                <Square clickEvent={this.shuffle} boxOne={this.state.boxOne}
                boxTwo={this.state.boxTwo}
                boxThree={this.state.boxThree}
                boxFour={this.state.boxFour}
                boxFive={this.state.boxFive}
                boxSix={this.state.boxSix}
                boxSeven={this.state.boxSeven}
                boxEight={this.state.boxEight}
                boxNine={this.state.boxNine}
                newSpaces={this.state.spaces}
                />
            </div>
        </div>
    );
  }
}

export default Board;

Square.js

import React, { Component } from 'react';

class Square extends Component {
    render() {
        return(
            <div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxOne}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxTwo}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxThree}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxFour}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxFive}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxSix}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxSeven}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxEight}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxNine}</div>
            </div>
        )
    }
}

export default Square

Answer 1

如果我对您的理解正确，那么我将以简单的方式做到这一点...

为所有正方形分配“树”。
将“宝藏”分配给索引Math.floor(Math.random() * 9)。

此方法很简单，也很有效：）

您不必担心会乱洗正方形，因为您只是随机选择其中一个作为宝藏。

将数组元素分配给状态值

1 个答案: