生活游戏未按预期发展

问题描述

我正在尝试用React实现生命游戏，并且该程序已经可以运行，但是我认为应用游戏规则时会犯一些错误，因为我以this example开始游戏，但是我的代码结束了经过几次迭代后，尽管示例进行了很多更改，但开发的时间更长。

这是我的代码：

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Grid from './Grid';

class Matrix extends React.Component {
  constructor (props) {
    super(props);

    this.state = {
      cycle: 0,rows: 120,columns: 260,livingBase: 0.01,matrix: null,killWith: 2,setAliveWith: 4,continue: true
    };    
  }

  getRandomMatrix = () => {
    let randomMatrix=[]
    let randomrow = [];
    let randomNumber = null;

    for (let i=0; i<this.state.columns; i++) {
      randomrow = []
      for (let j=0; j<this.state.rows; j++) {
        // randomNumber = Math.random();
        // randomrow.push(randomNumber < this.state.livingBase? true: false);
        randomrow.push(false);
      }
      randomMatrix.push(randomrow);
    }
    
    randomMatrix[130][60] = true;
    randomMatrix[130][61] = true;
    randomMatrix[131][59] = true;
    randomMatrix[131][60] = true;
    randomMatrix[132][60] = true;
    randomMatrix[133][60] = true;

    this.setState({matrix: randomMatrix})
  }

  getNextMatrix = () => {
    let newMatrix = this.state.matrix.slice();

    const getCurrentCellLivingNeighbours = (n,m) => {
      let currenCellLivingNeighburs = 0;
      
      const getNeighbour = (l,k) => {
        let tryCell = false;

        try {
          tryCell = this.state.matrix[l][k];
          return tryCell
        } catch {
          return false
        } 
      }

      if (getNeighbour(n-1,m-1)) {
        currenCellLivingNeighburs++;
      }
      if (getNeighbour(n-1,m)) {
        currenCellLivingNeighburs++;
      }
      if (getNeighbour(n-1,m+1)) {
        currenCellLivingNeighburs++;
      }
      if (getNeighbour(n,m-1)) {
        currenCellLivingNeighburs++;
      }
      if (getNeighbour(n,m+1)) {
        currenCellLivingNeighburs++;
      }
      if (getNeighbour(n+1,m-1)) {
        currenCellLivingNeighburs++;
      }
      if (getNeighbour(n+1,m)) {
        currenCellLivingNeighburs++;
      }
      if (getNeighbour(n+1,m+1)) {
        currenCellLivingNeighburs++;
      }

    return currenCellLivingNeighburs;
    }

    for (let j=0; j<this.state.matrix.length; j++) {
      for (let i=0; i<this.state.matrix[0].length; i++) {
        let currentCell = this.state.matrix[j][i];
        let livingNeigbours = getCurrentCellLivingNeighbours(j,i)
        
        if (currentCell) {
          if (livingNeigbours<2 || livingNeigbours>3) {
            newMatrix[j][i] = false;
          }
        } else {
          if (livingNeigbours === 3) {
            newMatrix[j][i] = true;
          }
        }
      }
    }
    this.setState({matrix: newMatrix})
  }

  handleResetClick = () => {
    this.getRandomMatrix();
  }

  catchLivingBaseChange = (e) => {
    this.setState({livingBase: parseInt(e.target.value)/100})
  }

  handleStartClick = () => {
    setInterval( () => {
      this.getNextMatrix();
    },1);
  }

  render () {
    return (
      <div>
        <AppBar position="static">
          <Toolbar>
            <div style={{display: 'flex'}}>
              <div>
                <Typography variant="h6" >
                  The Game Of Life
                </Typography>
              </div>
              <div style={{paddingLeft: 15}}>
                <TextField id="livingBase" label="Porcentaje de Inicio" defaultValue="1" onChange={this.catchLivingBaseChange.bind(this)} />
                <Button color="black" variant='contained' onClick={this.handleResetClick.bind(this)} >Reset</Button>
                <Button color="black" variant='contained' onClick={this.handleStartClick.bind(this)} >Start</Button>
              </div>
            </div>
          </Toolbar>
        </AppBar>
        {this.state.matrix? <Grid matrix={this.state.matrix} />: <h1>Push reset to init matrix...</h1>}
      </div>
    )
  }
}

export default Matrix;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）