使用React.js实现的地形生成器

React.js terrain generator

react, app, map

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

(function() {
    var WorldGenerator;

WorldGenerator = function(randomFn, seed1, options, cacheTiles) {
        this.randomFn = randomFn;
        this.seed = seed1;
        this.options = options;
        if (cacheTiles == null) {
            cacheTiles = true;
        }
        this.options.worldTileWidth = this.options.worldChunkWidth * this.options.chunkTileWidth;
        this.options.worldTileHeight = this.options.worldChunkHeight * this.options.chunkTileHeight;
        this.tileCache = [];
        this.chunkCache = [];
        this.tileTypes = [];
        if (cacheTiles) {
            this.cacheAllTiles();
        }
        return this;
    };

WorldGenerator.prototype.getStartPosition = function(seed) {
        var grassTiles, index;
        grassTiles = this.tileTypes[2];
        index = Math.floor(this.randomFn(seed) * grassTiles.length);
        return grassTiles[index];
    };

WorldGenerator.prototype.getFinishPosition = function(seed) {
        var grassTiles, index;
        grassTiles = this.tileTypes[2];
        index = Math.floor(this.randomFn(seed) * grassTiles.length);
        return grassTiles[index];
    };

WorldGenerator.prototype.getPathfindingArea = function(centerX, centerY) {
        var cellIndex, i, j, offsetX, offsetY, outputArray, ref, ref1, worldX, worldY, x, y;
        offsetX = (0 - ~~(this.options.worldTileHeight / 2)) + centerX;
        offsetY = (0 - ~~(this.options.worldTileHeight / 2)) + centerY;
        outputArray = [];
        for (y = i = 0, ref = this.options.worldTileHeight; 0 <= ref ? i < ref : i > ref; y = 0 <= ref ? ++i : --i) {
            outputArray[y] = [];
            for (x = j = 0, ref1 = this.options.worldTileWidth; 0 <= ref1 ? j < ref1 : j > ref1; x = 0 <= ref1 ? ++j : --j) {
                worldX = x + offsetX;
                worldY = y + offsetY;
                cellIndex = this.getCell(worldX, worldY);
                outputArray[y][x] = cellIndex;
            }
        }
        return outputArray;
    };

WorldGenerator.prototype.getAllCells = function() {
        return this.tileCache;
    };

WorldGenerator.prototype.cacheAllTiles = function() {
        var cellValue, chunk, cx, cy, i, index, ref, results, vx, vy, x, y;
        results = [];
        for (y = i = 0, ref = this.options.worldChunkHeight; 0 <= ref ? i < ref : i > ref; y = 0 <= ref ? ++i : --i) {
            results.push((function() {
                var j, ref1, results1;
                results1 = [];
                for (x = j = 0, ref1 = this.options.worldChunkWidth; 0 <= ref1 ? j < ref1 : j > ref1; x = 0 <= ref1 ? ++j : --j) {
                    chunk = this.getChunk(x, y);
                    results1.push((function() {
                        var k, ref2, results2;
                        results2 = [];
                        for (cy = k = 0, ref2 = chunk.length; 0 <= ref2 ? k < ref2 : k > ref2; cy = 0 <= ref2 ? ++k : --k) {
                            results2.push((function() {
                                var l, ref3, results3;
                                results3 = [];
                                for (cx = l = 0, ref3 = chunk[cy].length; 0 <= ref3 ? l < ref3 : l > ref3; cx = 0 <= ref3 ? ++l : --l) {
                                    vx = x * this.options.chunkTileWidth + cx;
                                    vy = y * this.options.chunkTileHeight + cy;
                                    cellValue = this.getCell(vx, vy);
                                    index = Math.floor(cellValue / 2);
                                    if (this.tileTypes[index] === void 0) {
                                        this.tileTypes[index] = [];
                                    }
                                    results3.push(this.tileTypes[index].push({
                                        x: vx,
                                        y: vy
                                    }));
                                }
                                return results3;
                            }).call(this));
                        }
                        return results2;
                    }).call(this));
                }
                return results1;
            }).call(this));
        }
        return results;
    };

WorldGenerator.prototype.getCell = function(worldX, worldY) {
        var cell, chunk, chunkX, chunkY, worldChunkX, worldChunkY;
        worldX = this.clamp(worldX, this.options.worldTileWidth);
        worldY = this.clamp(worldY, this.options.worldTileHeight);
        if (this.tileCache[worldY] && (this.tileCache[worldY][worldX] != null)) {
            return this.tileCache[worldY][worldX];
        }
        worldChunkX = Math.floor(worldX / this.options.chunkTileWidth);
        worldChunkY = Math.floor(worldY / this.options.chunkTileHeight);
        chunkX = worldX % this.options.chunkTileWidth;
        chunkY = worldY % this.options.chunkTileHeight;
        chunk = this.getChunk(worldChunkX, worldChunkY);
        cell = chunk[chunkY][chunkX];
        if (this.tileCache[worldY] == null) {
            this.tileCache[worldY] = [];
        }
        this.tileCache[worldY][worldX] = cell;
        return cell;
    };

WorldGenerator.prototype.getChunk = function(worldChunkX, worldChunkY) {
        var chunk, chunkTileHeight, chunkTileWidth, row0, row1, row2, row3;
        if (this.chunkCache[worldChunkY] && this.chunkCache[worldChunkY][worldChunkX]) {
            return this.chunkCache[worldChunkY][worldChunkX];
        }
        row0 = [this.chunkEdgeIndex(worldChunkX - 1, worldChunkY - 1), this.chunkEdgeIndex(worldChunkX, worldChunkY - 1), this.chunkEdgeIndex(worldChunkX + 1, worldChunkY - 1), this.chunkEdgeIndex(worldChunkX + 2, worldChunkY - 1)];
        row1 = [this.chunkEdgeIndex(worldChunkX - 1, worldChunkY), this.chunkEdgeIndex(worldChunkX, worldChunkY), this.chunkEdgeIndex(worldChunkX + 1, worldChunkY), this.chunkEdgeIndex(worldChunkX + 2, worldChunkY)];
        row2 = [this.chunkEdgeIndex(worldChunkX - 1, worldChunkY + 1), this.chunkEdgeIndex(worldChunkX, worldChunkY + 1), this.chunkEdgeIndex(worldChunkX + 1, worldChunkY + 1), this.chunkEdgeIndex(worldChunkX + 2, worldChunkY + 1)];
        row3 = [this.chunkEdgeIndex(worldChunkX - 1, worldChunkY + 2), this.chunkEdgeIndex(worldChunkX, worldChunkY + 2), this.chunkEdgeIndex(worldChunkX + 1, worldChunkY + 2), this.chunkEdgeIndex(worldChunkX + 2, worldChunkY + 2)];
        chunkTileWidth = this.options.chunkTileWidth;
        chunkTileHeight = this.options.chunkTileHeight;
        chunk = this.bilinearInterpolate(chunkTileWidth, chunkTileHeight, row0, row1, row2, row3);
        if (!this.chunkCache[worldChunkY]) {
            this.chunkCache[worldChunkY] = [];
        }
        this.chunkCache[worldChunkY][worldChunkX] = chunk;
        return chunk;
    };

WorldGenerator.prototype.chunkEdgeIndex = function(x, y) {
        var height, seed, width;
        width = this.options.worldChunkWidth;
        height = this.options.worldChunkHeight;
        seed = this.seed;
        x = this.clamp(x, width);
        y = this.clamp(y, height);
        return this.randomFn(y * width + x + seed);
    };

WorldGenerator.prototype.bilinearInterpolate = function(width, height, row0, row1, row2, row3) {
        var cells, i, i0, i1, i2, i3, j, ref, ref1, x, xFactor, y, yFactor;
        cells = [];
        for (y = i = 0, ref = height; 0 <= ref ? i < ref : i > ref; y = 0 <= ref ? ++i : --i) {
            cells[y] = [];
            yFactor = y / height;
            for (x = j = 0, ref1 = width; 0 <= ref1 ? j < ref1 : j > ref1; x = 0 <= ref1 ? ++j : --j) {
                xFactor = x / width;
                i0 = this.terp(xFactor, row0[0], row0[1], row0[2], row0[3]);
                i1 = this.terp(xFactor, row1[0], row1[1], row1[2], row1[3]);
                i2 = this.terp(xFactor, row2[0], row2[1], row2[2], row2[3]);
                i3 = this.terp(xFactor, row3[0], row3[1], row3[2], row3[3]);
                cells[y][x] = Math.floor(this.terp(yFactor, i0, i1, i2, i3) * this.options.maxHeight);
            }
        }
        return cells;
    };

WorldGenerator.prototype.terp = function(t, a, b, c, d) {
        var val;
        val = 0.5 * (c - a + (2.0 * a - 5.0 * b + 4.0 * c - d + (3.0 * (b - c) + d - a) * t) * t) * t + b;
        val = Math.max(0, val);
        val = Math.min(1, val);
        return val;
    };

WorldGenerator.prototype.clamp = function(index, size) {
        return (index + size) % size;
    };

window.WorldGenerator = WorldGenerator;

}).call(this);

var _class, _temp, _class2, _temp3, _class3, _temp4, _class4, _temp5, _class5, _temp6;

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

function _possibleConstructorReturn(self, call) {
    if (!self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

setTimeout(function() {
    var _ReactRedux = ReactRedux;
    var Provider = _ReactRedux.Provider;

var worldGenerator = new WorldGenerator(randomFn, +new Date(), worldGeneratorOptions);
    var worldChunks = worldGenerator.chunkCache;
    var store = configureStore();
    ReactDOM.render(React.createElement(
        Provider, {
            store: store
        },
        React.createElement(MainContainer, {
            height: 480,
            maxHeight: worldGeneratorOptions.maxHeight,
            width: 480,
            worldChunks: worldChunks
        })
    ), document.getElementById('js-app'));
}, 0);

var worldGeneratorOptions = {
    chunkTileHeight: 8,
    chunkTileWidth: 8,
    maxHeight: 6,
    worldChunkHeight: 5,
    worldChunkWidth: 5
};

var WorldGridConstants = {
    UPDATE_PROP: 'WORLD_GRID_UPDATE_PROP'
};

var PhaseSelectorConstants = {
    UPDATE_INDEX: 'PHASE_SELECTOR_UPDATE_INDEX'
};

var randomFn = function randomFn(seed) {
    return alea(seed)();
};

var MainContainer = (_temp = _class = function(_React$Component) {
    _inherits(MainContainer, _React$Component);

function MainContainer(props) {
        _classCallCheck(this, MainContainer);

var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

_this.performTransition = _this.performTransition.bind(_this);
        return _this;
    }

MainContainer.prototype.transition = function transition(key, valueRange) {
        var _this2 = this;

this.createTransition().tween(key, function() {
            var interpolator = d3.interpolate.apply(null, valueRange);
            return function(t) {
                _this2.props.updateProp(key, interpolator(t));
            };
        });
    };

MainContainer.prototype.createTransition = function createTransition() {
        var duration = arguments.length <= 0 || arguments[0] === undefined ? 1000 : arguments[0];

return d3.select(Object.assign({}, this.props)).transition().duration(duration);
    };

MainContainer.prototype.performTransition = function performTransition(targetValues) {
        var _this3 = this;

['chunkMargin', 'fill', 'opacity', 'tileMargin', 'tileSize'].forEach(function(propertyName) {
            if (_this3.props[propertyName] === targetValues[propertyName]) {
                return;
            }
            _this3.transition(propertyName, [_this3.props[propertyName], targetValues[propertyName]]);
        });
    };

MainContainer.prototype.render = function render() {
        return React.createElement(
            'div', {
                className: 'container'
            },
            React.createElement(
                'div', {
                    className: 'row'
                },
                React.createElement(
                    'div', {
                        className: 'col-sm-5'
                    },
                    React.createElement(PhaseSelector, {
                        performTransition: this.performTransition,
                        updateIndex: this.props.updateIndex,
                        updateProp: this.props.updateProp,
                        currentIndex: this.props.currentIndex
                    })
                ),
                React.createElement(
                    'div', {
                        className: 'col-sm-7'
                    },
                    React.createElement(WorldGrid, {
                        chunkMargin: this.props.chunkMargin,
                        fill: this.props.fill,
                        height: this.props.height,
                        maxHeight: this.props.maxHeight,
                        opacity: this.props.opacity,
                        tileMargin: this.props.tileMargin,
                        tileSize: this.props.tileSize,
                        width: this.props.width,
                        worldChunks: this.props.worldChunks
                    })
                )
            )
        );
    };

return MainContainer;
}(React.Component), _class.propTypes = {
    chunkMargin: React.PropTypes.number.isRequired,
    fill: React.PropTypes.number.isRequired,
    height: React.PropTypes.number.isRequired,
    maxHeight: React.PropTypes.number.isRequired,
    opacity: React.PropTypes.number.isRequired,
    tileMargin: React.PropTypes.number.isRequired,
    tileSize: React.PropTypes.number.isRequired,
    updateProp: React.PropTypes.func.isRequired,
    width: React.PropTypes.number.isRequired,
    worldChunks: React.PropTypes.array.isRequired
}, _temp);

MainContainer = ReactRedux.connect(function(state, ownProps) {
    var height = ownProps.height;
    var maxHeight = ownProps.maxHeight;
    var width = ownProps.width;
    var worldChunks = ownProps.worldChunks;
    var _state$worldGrid = state.worldGrid;
    var chunkMargin = _state$worldGrid.chunkMargin;
    var tileMargin = _state$worldGrid.tileMargin;
    var tileSize = _state$worldGrid.tileSize;
    var fill = _state$worldGrid.fill;
    var opacity = _state$worldGrid.opacity;
    var currentIndex = state.demoPhase.currentIndex;

return {
        chunkMargin: chunkMargin,
        currentIndex: currentIndex,
        fill: fill,
        height: height,
        maxHeight: maxHeight,
        opacity: opacity,
        tileMargin: tileMargin,
        tileSize: tileSize,
        width: width,
        worldChunks: worldChunks
    };
}, {
    updateProp: WorldGridActions.updateProp,
    updateIndex: PhaseSelectorActions.updateIndex
})(MainContainer);

var PhaseSelector = (_temp3 = _class2 = function(_React$Component2) {
    _inherits(PhaseSelector, _React$Component2);

function PhaseSelector() {
        var _temp2, _this4, _ret;

_classCallCheck(this, PhaseSelector);

for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
        }

return _ret = (_temp2 = (_this4 = _possibleConstructorReturn(this, _React$Component2.call.apply(_React$Component2, [this].concat(args))), _this4), _this4.stepSettings = {
            'step-0': {
                chunkMargin: 18,
                fill: 0,
                opacity: 0,
                tileMargin: 6,
                tileSize: 32
            },
            'step-1': {
                chunkMargin: 18,
                fill: 1,
                opacity: 0,
                tileMargin: 6,
                tileSize: 32
            },
            'step-2': {
                chunkMargin: 6,
                fill: 1,
                opacity: 1,
                tileMargin: 3,
                tileSize: 16
            },
            'step-3': {
                chunkMargin: 4,
                fill: 1,
                opacity: 1,
                tileMargin: 0,
                tileSize: 8
            },
            'step-4': {
                chunkMargin: 0,
                fill: 1,
                opacity: 1,
                tileMargin: 0,
                tileSize: 8
            }
        }, _temp2), _possibleConstructorReturn(_this4, _ret);
    }

PhaseSelector.prototype._onSubmit = function _onSubmit(event) {
        event.preventDefault;
        var selected = [].slice.call(this.formEl.elements['worldStep'], 0).reduce(function(prev, curr) {
            return curr.checked ? curr : prev;
        }, null);
        if (selected) {
            var value = selected.value;

this.props.performTransition(this.stepSettings[value]);
            this.props.updateIndex(value);
        }
    };

PhaseSelector.prototype.buildForm = function buildForm() {
        var _this5 = this;

return React.createElement(
            'form', {
                onChange: this._onSubmit.bind(this),
                ref: function ref(formEl) {
                    return _this5.formEl = formEl;
                }
            },
            React.createElement(
                'div', {
                    className: 'radio'
                },
                React.createElement(
                    'label',
                    null,
                    React.createElement('input', {
                        checked: this.props.currentIndex === 'step-0',
                        name: 'worldStep',
                        type: 'radio',
                        value: 'step-0'
                    }),
                    ' ',
                    'Build a Basic Chunk'
                )
            ),
            React.createElement(
                'div', {
                    className: 'radio'
                },
                React.createElement(
                    'label',
                    null,
                    React.createElement('input', {
                        checked: this.props.currentIndex === 'step-1',
                        name: 'worldStep',
                        type: 'radio',
                        value: 'step-1'
                    }),
                    ' ',
                    'Populate Tiles with Bilinear Interpolation'
                )
            ),
            React.createElement(
                'div', {
                    className: 'radio'
                },
                React.createElement(
                    'label',
                    null,
                    React.createElement('input', {
                        checked: this.props.currentIndex === 'step-2',
                        name: 'worldStep',
                        type: 'radio',
                        value: 'step-2'
                    }),
                    ' ',
                    'Discover Neighbors with Bicubic Interpolation'
                )
            ),
            React.createElement(
                'div', {
                    className: 'radio'
                },
                React.createElement(
                    'label',
                    null,
                    React.createElement('input', {
                        checked: this.props.currentIndex === 'step-3',
                        name: 'worldStep',
                        type: 'radio',
                        value: 'step-3'
                    }),
                    ' ',
                    'Assemble Chunks'
                )
            ),
            React.createElement(
                'div', {
                    className: 'radio'
                },
                React.createElement(
                    'label',
                    null,
                    React.createElement('input', {
                        checked: this.props.currentIndex === 'step-4',
                        name: 'worldStep',
                        type: 'radio',
                        value: 'step-4'
                    }),
                    ' ',
                    'View Finished World'
                )
            )
        );
    };

PhaseSelector.prototype.render = function render() {
        return React.createElement(
            'div', {
                className: 'row'
            },
            React.createElement(
                'div', {
                    className: 'col-xs-12'
                },
                this.buildForm()
            )
        );
    };

return PhaseSelector;
}(React.Component), _class2.propTypes = {
    currentIndex: React.PropTypes.string.isRequired,
    updateIndex: React.PropTypes.func.isRequired,
    updateProp: React.PropTypes.func.isRequired,
    performTransition: React.PropTypes.func.isRequired
}, _temp3);
var WorldGrid = (_temp4 = _class3 = function(_React$Component3) {
    _inherits(WorldGrid, _React$Component3);

function WorldGrid() {
        _classCallCheck(this, WorldGrid);

return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments));
    }

WorldGrid.prototype.calculateOffsets = function calculateOffsets(worldChunks, tileSize, chunkMargin, tileMargin) {
        var chunkTileHeight = worldChunks[0][0].length;
        var chunkTileWidth = worldChunks[0][0][0].length;
        var worldChunksHeight = worldChunks.length;
        var worldChunksWidth = worldChunks[0].length;
        var worldTileHeight = worldChunksHeight * chunkTileHeight;
        var worldTileWidth = worldChunksWidth * chunkTileWidth;
        var centeringX = worldTileWidth / 2 * tileSize;
        var centeringY = worldTileHeight / 2 * tileSize;
        var chunkOffsetX = chunkMargin * (worldChunksWidth - 1) / 2;
        var chunkOffsetY = chunkMargin * (worldChunksHeight - 1) / 2;
        var tileOffsetX = tileMargin * (worldTileWidth - 1) / 2;
        var tileOffsetY = tileMargin * (worldTileHeight - 1) / 2;
        return {
            x: centeringX + chunkOffsetX + tileOffsetX,
            y: centeringY + chunkOffsetY + tileOffsetY
        };
    };

WorldGrid.prototype.buildWorldChunks = function buildWorldChunks(worldChunks) {
        var _this7 = this;

var _props = this.props;
        var tileSize = _props.tileSize;
        var chunkMargin = _props.chunkMargin;
        var tileMargin = _props.tileMargin;

WorldGrid.prototype.render = function render() {
        var worldChunks = this.buildWorldChunks(this.props.worldChunks);
        var xPos = this.props.width / 2;
        var yPos = this.props.height / 2;
        return React.createElement(
            'svg', {
                className: 'world-canvas',
                height: this.props.height,
                width: this.props.width
            },
            React.createElement(
                'g', {
                    transform: 'translate(' + xPos + ', ' + yPos + ')'
                },
                worldChunks
            )
        );
    };

return WorldGrid;
}(React.Component), _class3.propTypes = {
    chunkMargin: React.PropTypes.number.isRequired,
    fill: React.PropTypes.number.isRequired,
    height: React.PropTypes.number.isRequired,
    maxHeight: React.PropTypes.number.isRequired,
    opacity: React.PropTypes.number.isRequired,
    tileMargin: React.PropTypes.number.isRequired,
    tileSize: React.PropTypes.number.isRequired,
    width: React.PropTypes.number.isRequired,
    worldChunks: React.PropTypes.array.isRequired
}, _temp4);
var WorldChunk = (_temp5 = _class4 = function(_React$Component4) {
    _inherits(WorldChunk, _React$Component4);

function WorldChunk() {
        _classCallCheck(this, WorldChunk);

return _possibleConstructorReturn(this, _React$Component4.apply(this, arguments));
    }

WorldChunk.prototype.buildTiles = function buildTiles(data) {
        var _this9 = this;

WorldChunk.prototype.render = function render() {
        var tiles = this.buildTiles(this.props.data);
        return React.createElement(
            'g',
            null,
            tiles
        );
    };

return WorldChunk;
}(React.Component), _class4.propTypes = {
    data: React.PropTypes.array.isRequired,
    fill: React.PropTypes.number.isRequired,
    isCenter: React.PropTypes.bool.isRequired,
    maxHeight: React.PropTypes.number.isRequired,
    tileMargin: React.PropTypes.number.isRequired,
    tileSize: React.PropTypes.number.isRequired
}, _temp5);
var WorldTile = (_temp6 = _class5 = function(_React$Component5) {
    _inherits(WorldTile, _React$Component5);

function WorldTile() {
        _classCallCheck(this, WorldTile);

return _possibleConstructorReturn(this, _React$Component5.apply(this, arguments));
    }

WorldTile.prototype.render = function render() {
        var style = {
            fill: this.props.colorScale(this.props.value)
        };
        if (this.props.canCover) {
            return React.createElement(
                'g', {
                    transform: 'translate(' + this.props.x + ', ' + this.props.y + ')'
                },
                React.createElement('rect', {
                    height: this.props.size,
                    style: style,
                    width: this.props.size,
                    x: 0,
                    y: 0
                }),
                React.createElement('rect', {
                    height: this.props.size,
                    style: {
                        fill: '#e1e1e1',
                        opacity: 1 - this.props.fill
                    },
                    width: this.props.size,
                    x: 0,
                    y: 0
                })
            );
        }
        return React.createElement('rect', {
            height: this.props.size,
            style: style,
            width: this.props.size,
            x: this.props.x,
            y: this.props.y
        });
    };

return WorldTile;
}(React.Component), _class5.propTypes = {
    canCover: React.PropTypes.bool.isRequired,
    colorScale: React.PropTypes.func.isRequired,
    fill: React.PropTypes.number.isRequired,
    size: React.PropTypes.number.isRequired,
    value: React.PropTypes.number.isRequired,
    x: React.PropTypes.number.isRequired,
    y: React.PropTypes.number.isRequired
}, _temp6);

function configureStore(initialState) {
    var reducers = Redux.combineReducers({
        demoPhase: demoPhaseReducer,
        worldGrid: worldGridReducer
    });
    return Redux.createStore(reducers, initialState, Redux.applyMiddleware(ReduxThunk.default));
};

function demoPhaseReducer() {
    var state = arguments.length <= 0 || arguments[0] === undefined ? {
        currentIndex: 'step-0'
    } : arguments[0];
    var action = arguments[1];

if (action.type === PhaseSelectorConstants.UPDATE_INDEX) {
        return Object.assign({}, state, {
            currentIndex: action.newIndex
        });
    }
    return state;
}

function worldGridReducer() {
    var state = arguments.length <= 0 || arguments[0] === undefined ? {
        chunkMargin: 18,
        tileMargin: 6,
        tileSize: 32,
        opacity: 0,
        fill: 0
    } : arguments[0];
    var action = arguments[1];

if (action.type === WorldGridConstants.UPDATE_PROP) {
        var _Object$assign;

return Object.assign({}, state, (_Object$assign = {}, _Object$assign[action.key] = action.value, _Object$assign));
    }
    return state;
}

编译

CSS

.container {
    margin-bottom: 40px;
    margin-top: 40px;
}
.world-canvas {
    margin: 0 auto;
    display: block;
    background: #092756;
    background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -moz-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -webkit-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -o-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -o-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -ms-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -ms-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), linear-gradient(135deg, #670d10 0%, #092756 100%);
    background-size: 100% 200%;
    animation: background-scroll 7s alternate ease-in-out infinite;
}
.world-canvas__center-chunk {
    background-color: rgba(255, 255, 255, 0.3);
}
@-webkit-keyframes background-scroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100%;
    }
}
@-moz-keyframes background-scroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100%;
    }
}
@keyframes background-scroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100%;
    }
}

HTML

React.js terrain generator

react, app, map

编辑器支持Emmet

快捷键

React.js terrain generator

react, app, map

使用React.js实现的SVG图形变形转换器

使用React.js实现的平面几何三角学交互图形

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：