Javascript 如何为人生游戏生成一个随机的起始位置?

Javascript 如何为人生游戏生成一个随机的起始位置?,javascript,reactjs,Javascript,Reactjs,错误: SyntaxError: pathToFiles/Board.jsx: Unexpected token, expected , (32:20) while parsing file: pathToFiles/Board.jsx 代码: SyntaxError: pathToFiles/Board.jsx: Unexpected token, expected , (32:20) while parsing file: pathToFiles/Board.jsx Board.jsx

错误:

SyntaxError: pathToFiles/Board.jsx: Unexpected token, expected , (32:20) while parsing file: pathToFiles/Board.jsx
代码:

SyntaxError: pathToFiles/Board.jsx: Unexpected token, expected , (32:20) while parsing file: pathToFiles/Board.jsx
Board.jsx

generateRandomBoard() { 
        for (var i = 0; i < this.state.cells.length ; i++) { 
           var currentAlive;
           if(Math.random() < 0.5) {
               currentAlive = false;
           } 
           else {
               currentAlive = true;
           }
           this.setState({
               cells[i].alive : currentAlive 
           })
        }
    },
generateRandomBoard(){
对于(var i=0;i

问题:

SyntaxError: pathToFiles/Board.jsx: Unexpected token, expected , (32:20) while parsing file: pathToFiles/Board.jsx
如何生成ife游戏的随机起始位置

我尝试了上面的代码,但没有成功

益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智


完整代码:

SyntaxError: pathToFiles/Board.jsx: Unexpected token, expected , (32:20) while parsing file: pathToFiles/Board.jsx
游戏

var Game = createReactClass({

    getInitialState() {
        return {
            start: false
        }                    
    },

    handleStartClick() {
        this.setState({
            start: true
        })
    },

    handleStopClick() {
        this.setState({
            start: false
        })
    },

    render() {
        return (
            <div>
                <h1>React.js Game of Life</h1>
                <div className="buttons">
                    <button className="btn btn-danger" onClick={this.handleStopClick}>Stop</button>
                    <button className="btn btn-success" onClick={this.handleStartClick}>Start</button>
                </div>
                <Board start={this.state.start}/>
            </div>
        )
    }

});
var Game=createReactClass({
getInitialState(){
返回{
开始:错误
}                    
},
handleStartClick(){
这是我的国家({
开始:对
})
},
handleStopClick(){
这是我的国家({
开始:错误
})
},
render(){
返回(
React.js生活游戏
停止
开始
)
}
});
董事会

var Board = createReactClass({

getInitialState() {
    var array = [];
    for (var i = 0; i < 400; i++) {
        array.push(<Cell key={i} id={i} cells={array} />);
    }

    return {
        cells: array ,
        started: false,
        generations: 0
    };            

    this.generateRandomBoard();
},

 generateRandomBoard() {
    for (var i = 0; i < this.state.cells.length ; i++) {
       var currentAlive;
       if(Math.random() < 0.5) {
           currentAlive = false;
       }
       else {
           currentAlive = true;
       }

      cells[i].setState({
         alive: currentAlive
      })
    }
},

componentWillReceiveProps(nextProps) {

    var evolution;

    if(nextProps.start && this.state.started == false) {

      let evolution = setInterval(() => {
        this.state.cells.forEach( cell => cell.life() );
        this.state.cells.forEach( cell => cell.nextLife() );
        this.setState({
            generations: this.state.generations + 1
        });
      }, 500);

      this.setState({
        started: true,
        evolution
      });
    }

    else {
      clearInterval(this.state.evolution);
      this.setState({
        started: false
      })
      if (nextProps.delete) {
          this.state.cells.forEach( cell => cell.setState({alive: false}));
          this.state.cells.forEach( cell => cell.setState({nextAlive: false}));
          nextProps.stopClear();
          this.setState({
            generations: 0
          });
      }
    }

},

render() {

    var that = this;

    return (
        <div>
            <div className="board">
                {
                    this.state.cells.map(function(item, i) {
                        return <Cell key={i} id={i} cells={that.state.cells} start={that.props.start}/>
                    })
                } 
            </div>
            <div className="generations">Generations: {this.state.generations}</div>
        </div>
    );
}
var Board=createReactClass({
getInitialState(){
var数组=[];
对于(变量i=0;i<400;i++){
array.push();
}
返回{
单元格:数组,
开始:错,
世代:0
};            
这个.generateRandomBoard();
},
发电机配电盘(){
for(var i=0;i{
this.state.cells.forEach(cell=>cell.life());
this.state.cells.forEach(cell=>cell.nextLife());
这是我的国家({
世代:this.state.generations+1
});
}, 500);
这是我的国家({
开始:是的,
进化
});
}
否则{
clearInterval(这个状态,进化);
这是我的国家({
开始:错误
})
如果(nextrops.delete){
this.state.cells.forEach(cell=>cell.setState({alive:false}));
this.state.cells.forEach(cell=>cell.setState({nextAlive:false}));
nextProps.stopClear();
这是我的国家({
世代:0
});
}
}
},
render(){
var=这个;
返回(
{
this.state.cells.map(函数(项,i){
返回
})
} 
世代:{this.state.Generations}
);
}
}))

单元格

var Cell = createReactClass ({

getInitialState() {
    return {
        alive: false,
        nextAlive: false,
    }                      
},

isAlive(r, c){

    var size = Math.sqrt(this.props.cells.length)

    if (r == -1) {
        r = size - 1
    }
    if (r == size) {
        r = 0
    }
    if (c == -1) {
        c = size - 1
    }
    if (c == size) {
        c = 0
    }
    var id = r * size + c
    return this.props.cells[id].state.alive

},

life() {

    var neighbours = 0
    var size = Math.sqrt(this.props.cells.length)
    var row = Math.floor( this.props.id / size )
    var col = this.props.id - row * size 

    if (this.isAlive(row - 1, col)) {
        neighbours++
    }
    if (this.isAlive(row - 1, col + 1)) {
        neighbours++
    }
    if (this.isAlive(row - 1, col - 1)) {
        neighbours++
    }
    if (this.isAlive(row, col + 1)) {
        neighbours++
    }
    if (this.isAlive(row, col - 1)) {
        neighbours++
    }
    if (this.isAlive(row + 1, col)) {
        neighbours ++
    } 
    if (this.isAlive(row + 1, col + 1)) {
        neighbours ++
    }   
    if (this.isAlive(row + 1, col - 1))  {
        neighbours ++   
    }

    this.state.nextState = false 

    if (this.state.alive){
      if( neighbours < 2) {
          this.setState ({
             nextAlive: false 
          })
      }
      if (neighbours > 3) {
          this.setState ({
             nextAlive: false 
          })    
      }
      if (neighbours == 3 || neighbours == 2) {
          this.setState ({
             nextAlive: true 
          })
      }
    }
    else{
      if (neighbours == 3) {
          this.setState ({
             nextAlive: true 
          })   
      }
    }
},

nextLife () {
    this.setState({
        alive: this.state.nextAlive
    })     
},

componentDidMount() {
    this.props.cells[this.props.id] = this;
},

toggleLife() {
    this.setState({
        alive: !this.state.alive
    })
},

render() {
    return (
       <div className={this.state.alive ? "cell alive" : "cell"} onClick={this.toggleLife}></div>
    );
} 
var Cell=createReactClass({
getInitialState(){
返回{
活着:错,
nextAlive:false,
}                      
},
国际会计准则专家组(r,c){
var size=Math.sqrt(this.props.cells.length)
如果(r==-1){
r=尺寸-1
}
如果(r==大小){
r=0
}
如果(c==-1){
c=尺寸-1
}
如果(c==大小){
c=0
}
变量id=r*大小+c
返回此.props.cells[id].state.alive
},
生活(){
var=0
var size=Math.sqrt(this.props.cells.length)
var row=Math.floor(this.props.id/size)
var col=this.props.id-行*大小
如果(此.isAlive(第1行,第2列)){
邻居++
}
if(this.isAlive(行-1,列+1)){
邻居++
}
如果(此.isAlive(第1行,第1列)){
邻居++
}
如果(此.isAlive(行、列+1)){
邻居++
}
如果(此.isAlive(行,列-1)){
邻居++
}
如果(此.isAlive(行+1,列)){
邻居++
} 
如果(此.isAlive(行+1,列+1)){
邻居++
}   
if(this.isAlive(行+1,列-1)){
邻居++
}
this.state.nextState=false
if(this.state.alive){
if(邻域<2){
这是我的国家({
nextAlive:false
})
}
如果(邻居>3){
这是我的国家({
nextAlive:false
})    
}
如果(邻居==3 | |邻居==2){
这是我的国家({
nextAlive:对
})
}
}
否则{
如果(邻居==3){
这是我的国家({
nextAlive:对
})   
}
}
},
下一个生命(){
这是我的国家({
活着的:this.state.nextAlive
})     
},
componentDidMount(){
this.props.cells[this.props.id]=this;
},
toggleLife(){
这是我的国家({
活着:!this.state.alive
})
},
render(){
返回(
);
} 

}))

看起来您在
Board
组件的函数
generateRandomBoard()
中有语法错误:

generateRandomBoard() {
  for (var i = 0; i < this.state.cells.length ; i++) {
    var currentAlive;
    if(Math.random() < 0.5) {
      currentAlive = false;
    }
    else {
       currentAlive = true;
    }

    // Buggy code from here ...
    //  this.setState({
    //      cells[i].alive : currentAlive
    //  })
    // ... to here

    // correct code from here ...
    cells[i].setState({
       alive: currentAlive
    })
    // ... to here
  }
}
然而,
(32:20)
可能意味着第32行第20列


也许你目前的环境不是最理想的。我个人将Webpack(用于服务器端编译)与源代码映射一起使用(这样它可以告诉我错误的位置):第一次配置需要几个小时,但一旦工作起来就非常方便了…

为什么不同时使用
this.state.cells[I].alive:currentAlive
?是
单元格
可能在该范围内。总之,我一眼就看不出电路板代码有任何错误,错误输出是什么,或者在代码之后电路板是什么样子?@Matthi