如何爲生命遊戲生成隨機起始位置？

Question

ERROR：

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

CODE：

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 
      }) 
     } 
    }, 

---

問題：

如何爲ife遊戲生成隨機起始位置？

我想上面的代碼，但沒有奏效。

Lorem存有Lorem存有Lorem存有Lorem存有Lorem存有Lorem存有Lorem存有Lorem存有

---

全碼：

遊戲

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 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 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> 
    ); 
} 

}）;

Answer 1

它看起來像你的函數有一個語法錯誤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 
    } 
} 

貝婁是主板完全正確的代碼：

var Board = React.createClass({ 

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

     return { 
      cells: array 
     }; 
    }, 

    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 
      }) 
     } 
    }, 

    render() { 

     var that = this; 

     return (
      <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> 
     ); 
    } 

}); 

你報告的錯誤是不是很清楚：

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

還有(32:20)可能意味着行32列20

也許你目前的環境並不理想。我個人使用的WebPack（服務器端編譯）與源地圖（這樣告訴我，我的錯誤的位置）：這是幾個小時來配置的第一次，但它是非常方便的，一旦它的工作原理...