使用React.js实现的生命游戏算法演示动画

英国数学家康威发明的生命游戏 (Game of Life) 1. 使用一个2维数组来实现其规则 2. 在这个数组中，每个存储位子都能容纳一个LIFE元胞。世代(gennerations)用于标记时间的流逝。每个世代都会LIFE社会带来生与死。 3. 生死规则如下: * 定义的元胞都有8个邻居。上下左右，左上左下，右上右下八个方位。 * 如果一个元胞有一个或零个邻居，会因为孤独而死亡。3个以上的邻居会因为拥挤而死亡。 * 如果空元胞弟正好有3个邻居，会在空元胞的位子生成一个元胞。 * 生生死死世代交换。

react, html5, game

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2749
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

// From http://damiankao.github.io/life/
var Cell = React.createClass({
    displayName: 'Cell',

handleCellClicked: function handleCellClicked() {
        this.props.handleCellClicked(this.props.row, this.props.col);
    },

render: function render() {
        var dim = this.props.dim;
        return React.createElement('rect', {
            width: dim,
            height: dim,
            fill: this.props.fill,
            stroke: '#ccc',
            strokeWidth: '1',
            x: dim * this.props.col,
            y: dim * this.props.row,
            onClick: this.handleCellClicked
        });
    }
});

var Board = React.createClass({
    displayName: 'Board',

time: new Date().getTime(),
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function getInitialState() {
        var state = {
            custom: false,
            running: false,
            rows: 50,
            cols: 50,
            fps: 1000,
            generation: 0,
            //cellSize: 20,

birth1: false,
            birth2: false,
            birth3: true,
            birth4: false,
            birth5: false,
            birth6: false,
            birth7: false,
            birth8: false,

survival1: false,
            survival2: true,
            survival3: true,
            survival4: false,
            survival5: false,
            survival6: false,
            survival7: false,
            survival8: false
        };

for (var row = 0; row < state.rows; row++) {
            for (var col = 0; col < state.cols; col++) {
                state[[row, col]] = Math.round(Math.random());
            }
        };

return state;
    },

render: function render() {
        var width = window.innerWidth;
        var height = window.innerHeight;
        var boardWidth;
        var boardHeight;

var svgStyle = {
            width: boardWidth,
            height: boardHeight
        };

var cellLength = Math.min(boardWidth, boardHeight) / Math.min(this.state.rows, this.state.cols);

return React.createElement(
            'div', {
                id: 'game',
                className: 'gol'
            },
            React.createElement(
                'div', {
                    id: 'control',
                    className: 'col control'
                },
                React.createElement(
                    'h1',
                    null,
                    'Game of Life (react.js)'
                ),
                React.createElement(
                    'h3',
                    null,
                    ' Generation: ',
                    this.state.generation,
                    ' '
                ),
                React.createElement('br', null),
                React.createElement(
                    'h3',
                    null,
                    ' Settings '
                ),
                React.createElement(
                    'p',
                    null,
                    'Number of Rows: ',
                    React.createElement('input', {
                        id: 'rows',
                        type: 'range',
                        min: '1',
                        max: '100',
                        valueLink: this.linkState('rows')
                    }),
                    ' ',
                    this.state.rows
                ),
                React.createElement(
                    'p',
                    null,
                    'Number of Columns: ',
                    React.createElement('input', {
                        id: 'cols',
                        type: 'range',
                        min: '1',
                        max: '100',
                        valueLink: this.linkState('cols')
                    }),
                    ' ',
                    this.state.cols
                ),
                React.createElement('br', null),
                React.createElement(
                    'h3',
                    null,
                    'Control'
                ),
                React.createElement(
                    'button', {
                        id: 'blank',
                        className: 'warning',
                        onClick: this.blank
                    },
                    'clear'
                ),
                React.createElement(
                    'button', {
                        id: 'randomize',
                        className: 'info',
                        onClick: this.randomize
                    },
                    'randomize'
                ),
                React.createElement(
                    'button', {
                        id: 'startButton',
                        className: this.state.running ? "danger" : "success",
                        onClick: this.handleToggle
                    },
                    this.state.running ? 'Pause' : 'Play'
                ),
                React.createElement(
                    'button', {
                        id: 'stepButton',
                        className: 'primary',
                        onClick: this.step
                    },
                    'Step'
                )
            ),
            React.createElement(
                'svg', {
                    width: svgStyle.width,
                    height: svgStyle.height,
                    className: 'col svg'
                },
                a
            )
        );
    },

birthRule: function birthRule() {
        var rule = '';
        for (var i = 1; i < 9; i++) {
            if (this.state['birth' + i]) rule += String(i);
        }

return rule;
    },

survivalRule: function survivalRule() {
        var rule = '';
        for (var i = 1; i < 9; i++) {
            if (this.state['survival' + i]) rule += String(i);
        }

return rule;
    },

step: function step() {
        this.time = new Date().getTime();
        var newState = {};
        for (var r = 0; r < this.state.rows; r++) {
            for (var c = 0; c < this.state.cols; c++) {
                if (this.checkState(this.state, r, c)) {
                    newState[[r, c]] = this.state[[r, c]] ? 0 : 1;
                }
            }
        }

this.state.generation++;
        this.setState(newState);

var now = new Date().getTime();
        var delta = now - this.time;
        while (delta < 1000 / this.state.fps) {
            now = new Date().getTime();
            delta = now - this.time;
        }
    },

update: function update() {
        this.step();
        this.intervalID = requestAnimationFrame(this.update);
    },

checkState: function checkState(state, row, col) {
        var rStart = Math.max(row - 1, 0);
        var cStart = Math.max(col - 1, 0);
        var rEnd = Math.min(row + 1, this.state.rows - 1);
        var cEnd = Math.min(col + 1, this.state.cols - 1);

var sum = 0;
        var currentState = state[[row, col]];

for (var r = rStart; r <= rEnd; r++) {
            for (var c = cStart; c <= cEnd; c++) {
                sum += state[[r, c]];
            }
        }

sum -= state[[row, col]];
        var change = false;
        if (currentState == 1) {
            if (!this.state['survival' + sum]) {
                change = true;
            }
        } else if (currentState == 0) {
            if (this.state['birth' + sum]) {
                change = true;
            }
        }

return change;
    },

blank: function blank() {
        var state = {};
        for (var row = 0; row < this.state.rows; row++) {
            for (var col = 0; col < this.state.cols; col++) {
                state[[row, col]] = 0;
            }
        };

state.generation = 0;
        this.setState(state);
    },

randomize: function randomize() {
        var state = {};
        for (var row = 0; row < this.state.rows; row++) {
            for (var col = 0; col < this.state.cols; col++) {
                state[[row, col]] = Math.round(Math.random());
            }
        };

state.generation = 0;
        this.setState(state);
    },

handleChecked: function handleChecked() {
        var newState = {};
        newState[event.target.getAttribute('data-rule')] = event.target.checked;
        this.setState(newState);
    },

handleCellClicked: function handleCellClicked(r, c) {
        cancelAnimationFrame(this.intervalID);
        this.state[[r, c]] = this.state[[r, c]] ? 0 : 1;
        if (this.state.running) {
            this.state.running = false;
            this.forceUpdate(this.handleToggle);
        } else {
            this.forceUpdate();
        }
    },

handleToggle: function handleToggle() {
        if (this.state.running) {
            this.setState({
                running: false
            });
            cancelAnimationFrame(this.intervalID);
        } else {
            this.setState({
                running: true
            });
            this.intervalID = requestAnimationFrame(this.update);
        }
    }
});

ReactDOM.render(React.createElement(Board, null), document.getElementById('content'));

编译

CSS

.gol {
    width: 100%;
    height: 100%;
    font-size: 10pt;
}
.col {
    float: left;
}
.control {
    width: 35%;
    max-width: 35%;
}
input[type="range"] {
    height: 9px;
}
button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    margin-left: 5px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
    text-decoration: none;
}
button:hover,
button:focus,
button:active {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    background-color: #286090;
    border-color: #122b40;
}
button:active {
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.success {
    background-color: #5cb85c;
    border-color: #4cae4c;
}
.success:hover,
.success:focus,
.success:active {
    background-color: #449d44;
    border-color: #255625;
}
.info {
    background-color: #5bc0de;
    border-color: #46b8da;
}
.info:hover,
.info:focus,
.info:active {
    background-color: #31b0d5;
    border-color: #269abc;
}
.warning {
    margin-left: 0;
    background-color: #f0ad4e;
    border-color: #eea236;
}
.warning:hover,
.warning:focus,
.warning:active {
    background-color: #ec971f;
    border-color: #985f0d;
}
.danger {
    background-color: #d9534f;
    border-color: #d43f3a;
}
.danger:hover,
.danger:focus,
.danger:active {
    background-color: #c9302c;
    border-color: #761c19;
}

HTML

react, html5, game

编辑器支持Emmet

快捷键

react, html5, game

使用React-Konva.js实现的爆炸动画

使用React.js实现的几何图形运动动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：