Javascript 生命的游戏悄然失败，我错过了什么？
情况：Javascript 生命的游戏悄然失败，我错过了什么？,javascript,reactjs,Javascript,Reactjs,情况： var Game = createReactClass ({ getInitialState() { return { start: false } }, handleStartClick() { this.setState({ start: true })
var Game = createReactClass ({
getInitialState() {
return {
start: false
}
},
handleStartClick() {
this.setState({
start: true
})
},
handleClearClick() {
this.setState({
start: false
})
},
render() {
return (
<div>
<h1>React.js Game of Life</h1>
<div className="buttons">
<button className="btn btn-danger" onClick={this.handleClearClick}>Clear</button>
<button className="btn btn-success" onClick={this.handleStartClick}>Start</button>
</div>
<Board start={this.state.start}/>
</div>
);
}
})
var Board = createReactClass ({
getInitialState() {
return {
array: []
}
},
render() {
var rows = [];
for (var y = 1; y <= 40; y++) {
var cells = [];
for (var x = 1; x <= 40; x++) {
cells.push(<Cell start= {this.props.start} array={this.state.array} key={x + x*y} id = {x + x*y} />);
}
rows.push(<tr key={y}>{cells}</tr>);
}
return <table><tbody>{rows}</tbody></table>;
}
})
var Cell = createReactClass ({
getInitialState() {
return {
selected : false,
dying: false
}
},
isAlive(e) {
return e.state.selected
},
componentDidMount() {
this.props.array[this.props.id] = this;
var life;
var evolution;
if(this.props.start) {
life = setInterval(function(){
this.life;
}, 500);
evolution = setInterval(function(){
this.setState({
selected: !this.state.dying
});
}, 1000);
}
else {
clearInterval(life);
clearInterval(evolution);
}
},
life() {
var array = this.props.array;
var neighbours = 0;
if (this.isAlive(array[this.props.id+1])) {
neighbours++;
}
if (this.isAlive(array[this.props.id-1])) {
neighbours ++;
}
if (this.isAlive(array[this.props.id-39])) {
neighbours ++;
}
if (this.isAlive(array[this.props.id-40])) {
neighbours ++;
}
if (this.isAlive(array[this.props.id-41])) {
neighbours ++;
}
if (this.isAlive(array[this.props.id+41])) {
neighbours ++;
}
if (this.isAlive(array[this.props.id+40])) {
neighbours ++;
}
if (this.isAlive(array[this.props.id+39])) {
neighbours ++;
}
if (this.state.selected) {
if (neighbours == 3 || neighbours == 2) {
this.setState({
dying: false
})
}
else if (neighbours < 2) {
this.setState({
dying: true
})
}
else if (neighbours > 3) {
this.setState({
dying: true
})
}
}
else {
if( neighbours == 3) {
this.setState({
dying : false
})
}
}
},
handleClick() {
this.setState({
selected: !this.state.selected
})
},
render() {
return <td onClick = {this.handleClick} className={this.state.selected ? "cell selected" : "cell"}></td>;
}
})
ReactDOM.render(<Game />, document.getElementById('gameOfLife'));
- “任何少于两个活邻居的活细胞都会死亡，就像是由死亡引起的一样 由于人口不足
- 任何一个有两个或三个活邻居的活细胞都会生活在下一个 一代人
- 任何有三个以上相邻活细胞的活细胞都会死亡，就好像是死于
人口过剩 - 任何有三个活邻居的死细胞都会变成活细胞， 好像通过复制。”
代码：
var Game = createReactClass ({
getInitialState() {
return {
start: false
}
},
handleStartClick() {
this.setState({
start: true
})
},
handleClearClick() {
this.setState({
start: false
})
},
render() {
return (
<div>
<h1>React.js Game of Life</h1>
<div className="buttons">
<button className="btn btn-danger" onClick={this.handleClearClick}>Clear</button>
<button className="btn btn-success" onClick={this.handleStartClick}>Start</button>
</div>
<Board start={this.state.start}/>
</div>
);
}
})
var Board = createReactClass ({
getInitialState() {
return {
array: []
}
},
render() {
var rows = [];
for (var y = 1; y <= 40; y++) {
var cells = [];
for (var x = 1; x <= 40; x++) {
cells.push(<Cell start= {this.props.start} array={this.state.array} key={x + x*y} id = {x + x*y} />);
}
rows.push(<tr key={y}>{cells}</tr>);
}
return <table><tbody>{rows}</tbody></table>;
}
})
var Cell = createReactClass ({
getInitialState() {
return {
selected : false,
dying: false
}
},
isAlive(e) {
return e.state.selected
},
componentDidMount() {
this.props.array[this.props.id] = this;
var life;
var evolution;
if(this.props.start) {
life = setInterval(function(){
this.life;
}, 500);
evolution = setInterval(function(){
this.setState({
selected: !this.state.dying
});
}, 1000);
}
else {
clearInterval(life);
clearInterval(evolution);
}
},
life() {
var array = this.props.array;
var neighbours = 0;
if (this.isAlive(array[this.props.id+1])) {
neighbours++;
}
if (this.isAlive(array[this.props.id-1])) {
neighbours ++;
}
if (this.isAlive(array[this.props.id-39])) {
neighbours ++;
}
if (this.isAlive(array[this.props.id-40])) {
neighbours ++;
}
if (this.isAlive(array[this.props.id-41])) {
neighbours ++;
}
if (this.isAlive(array[this.props.id+41])) {
neighbours ++;
}
if (this.isAlive(array[this.props.id+40])) {
neighbours ++;
}
if (this.isAlive(array[this.props.id+39])) {
neighbours ++;
}
if (this.state.selected) {
if (neighbours == 3 || neighbours == 2) {
this.setState({
dying: false
})
}
else if (neighbours < 2) {
this.setState({
dying: true
})
}
else if (neighbours > 3) {
this.setState({
dying: true
})
}
}
else {
if( neighbours == 3) {
this.setState({
dying : false
})
}
}
},
handleClick() {
this.setState({
selected: !this.state.selected
})
},
render() {
return <td onClick = {this.handleClick} className={this.state.selected ? "cell selected" : "cell"}></td>;
}
})
ReactDOM.render(<Game />, document.getElementById('gameOfLife'));
var Game=createReactClass({
getInitialState（）{
返回{
开始：错误
}
},
handleStartClick（）{
这是我的国家({
开始：对
})
},
handleClearClick（）{
这是我的国家({
开始：错误
})
},
render（）{
返回(
React.js生活游戏
清楚的
开始
);
}
})
var板=createReactClass({
getInitialState（）{
返回{
数组：[]
}
},
render（）{
var行=[]；
for（var y=1；y仅在组件最初安装时触发。当start
标志从false
切换到true
时，不会再次触发以启动间隔
你应该改为使用，因为每次道具改变时都会触发
注意：我不保证这会使游戏正常运行，只是时间间隔会开始运行，以便您可以继续调试您的工作。您将此组件附加到哪里？ReactDOM.render（…）
？@adam beck忘了将其添加到我的SO问题中。Thx！我要做的是开始删除内容，直到找到问题。例如，从渲染（）中删除
游戏的功能，看看屏幕上是否有显示。@adam beck，正如我的问题所指出的，一切都显示出来了。只是点没有演变。Michael的回答应该可以解决设置间隔
没有触发的问题。你还需要以不同的方式处理这个问题，因为设置超时
回调它将指向全局对象。您的推理是正确的。现在调用了我的setInterval，我得到：无法读取未定义的属性“死亡”…hmmm更改为ComponentDidUpdate会使一切正常工作，但唯一发生的事情是整个网格充满了活细胞…是的，Kaivosukeltaja
在另一条评论链中提到，这个
在设置超时
回调中不起作用。Hmmm，修复了这个问题，现在我可以放置点，但不管发生什么，它们都会消失……Hmmmcomponentdiddupdate
是个坏主意，因为每次组件更新时，包括调用setState
时，都会触发您将触发大量额外间隔。