使用Redux.js实现的简化版贪吃蛇小游戏

Snake game made with Redux and Redux Saga

game, snake

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var _Redux = Redux;
var combineReducers = _Redux.combineReducers;
var applyMiddleware = _Redux.applyMiddleware;
var createStore = _Redux.createStore;

var sagaMiddleware = ReduxSaga['default']; // :(
var _ReduxSaga = ReduxSaga;
var take = _ReduxSaga.take;
var put = _ReduxSaga.put;
var call = _ReduxSaga.call;
var fork = _ReduxSaga.fork;
var cancel = _ReduxSaga.cancel;

var INITIAL_SPEED = 500;
var MAX_SPEED = 100;

var UP = {
    x: 0,
    y: -1
};
var LEFT = {
    x: -1,
    y: 0
};
var RIGHT = {
    x: 1,
    y: 0
};
var DOWN = {
    x: 0,
    y: 1
};

var randomPosition = function randomPosition() {
    return {
        x: Math.floor(25 * Math.random()),
        y: Math.floor(25 * Math.random())
    };
};

var wrap = function wrap(x) {
    return x < 0 ? x + 25 : x % 25;
};

var input = (function() {
    // It gotta be possible creating this more efficiently, without
    // adding and removing event listeners all the time...
    var createPromise = function createPromise() {
        return new Promise(function(resolve) {
            var onInput = function onInput(e) {
                e.preventDefault();

// Oh wow... the uglyness makes me cry :(
                resolve(e.keyCode || 'MOUSE_CLICK');
                promise = createPromise();

document.removeEventListener('click', onInput);
                document.removeEventListener('keydown', onInput);
            };
            document.addEventListener('click', onInput);
            document.addEventListener('keydown', onInput);
        });
    };

var promise = createPromise();

return function() {
        return promise;
    };
})();

var delay = function delay(timeout) {
    return new Promise(function(resolve) {
        setTimeout(resolve, timeout);
    });
};

var createGame = function createGame(canvas) {
    // STATE
    var store = (function() {
        var marked2$0 = [inputSaga, gameLoop, gameSaga, snakeSaga, applesSaga].map(regeneratorRuntime.mark);

// CONSTANTS
        var PLAY = 'PLAY';
        var RESET = 'RESET';
        var TICK = 'TICK';
        var GAME_OVER = 'GAME_OVER';
        var MOVE = 'MOVE';
        var CHANGE_DIRECTION = 'CHANGE_DIRECTION';
        var SPAWN_APPLE = 'SPAWN_APPLE';
        var EAT_APPLE = 'EAT_APPLE';
        // ACTIONS
        var play = function play() {
            return {
                type: PLAY
            };
        };
        var reset = function reset() {
            return {
                type: RESET
            };
        };
        var tick = function tick() {
            return {
                type: TICK
            };
        };
        var gameOver = function gameOver() {
            return {
                type: GAME_OVER
            };
        };
        var move = function move(direction) {
            return {
                type: MOVE,
                direction: direction
            };
        };
        var changeDirection = function changeDirection(direction) {
            return {
                type: CHANGE_DIRECTION,
                direction: direction
            };
        };
        var spawnApple = function spawnApple(x, y) {
            return {
                type: SPAWN_APPLE,
                x: x,
                y: y
            };
        };
        var eatApple = function eatApple(x, y) {
            return {
                type: EAT_APPLE,
                x: x,
                y: y
            };
        };
        // REDUCERS
        // reducer for game state
        var state = function state(_state, action) {
            if (_state === undefined) _state = 'MENU';

switch (action.type) {
                case PLAY:
                    return 'PLAYING';
                case GAME_OVER:
                    return 'GAME_OVER';
                default:
                    return _state;
            }
        };
        // reducer for tick speed (ms per tick)
        var speed = function speed(state, action) {
            if (state === undefined) state = INITIAL_SPEED;

switch (action.type) {
                case EAT_APPLE:
                    return Math.max(Math.floor(0.9 * state), MAX_SPEED);
                case RESET:
                    return INITIAL_SPEED;
                default:
                    return state;
            }
        };
        // reducer for game score
        var score = function score(state, action) {
            if (state === undefined) state = 0;

switch (action.type) {
                case EAT_APPLE:
                    return state + 10;
                case RESET:
                    return 0;
                default:
                    return state;
            }
        };
        // combined reducer for overall game state
        var game = combineReducers({
            state: state,
            speed: speed,
            score: score
        });
        // reducer for snake direction
        var direction = function direction(state, action) {
            if (state === undefined) state = RIGHT;

switch (action.type) {
                case CHANGE_DIRECTION:
                    return action.direction;
                case RESET:
                    return RIGHT;
                default:
                    return state;
            }
        };
        // reducer for snake parts
        var parts = function parts(state, action) {
            if (state === undefined) state = [{
                x: 1,
                y: 1
            }];

switch (action.type) {
                case MOVE:
                    var direction = action.direction;

switch (action.type) {
                case SPAWN_APPLE:
                    return [].concat(state, [{
                        x: action.x,
                        y: action.y
                    }]);
                case EAT_APPLE:
                    return state.filter(function(_ref) {
                        var x = _ref.x;
                        var y = _ref.y;
                        return x !== action.x || y !== action.y;
                    });
                case RESET:
                    return [];
                default:
                    return state;
            }
        };
        // root reducer
        var reducer = combineReducers({
            game: game,
            snake: snake,
            apples: apples
        });
        // SAGAS
        function inputSaga() {
            var type;
            return regeneratorRuntime.wrap(function inputSaga$(context$3$0) {
                while (1) switch (context$3$0.prev = context$3$0.next) {
                    case 0:
                        if (!true) {
                            context$3$0.next = 24;
                            break;
                        }

context$3$0.next = 3;
                        return input();

case 3:
                        type = context$3$0.sent;
                        context$3$0.t0 = type;
                        context$3$0.next = context$3$0.t0 === 'MOUSE_CLICK' ? 7 : context$3$0.t0 === 37 ? 10 : context$3$0.t0 === 38 ? 13 : context$3$0.t0 === 39 ? 16 : context$3$0.t0 === 40 ? 19 : 22;
                        break;

case 7:
                        context$3$0.next = 9;
                        return put(play());

case 9:
                        return context$3$0.abrupt('break', 22);

case 10:
                        context$3$0.next = 12;
                        return put(changeDirection(LEFT));

case 12:
                        return context$3$0.abrupt('break', 22);

case 13:
                        context$3$0.next = 15;
                        return put(changeDirection(UP));

case 15:
                        return context$3$0.abrupt('break', 22);

case 16:
                        context$3$0.next = 18;
                        return put(changeDirection(RIGHT));

case 18:
                        return context$3$0.abrupt('break', 22);

case 19:
                        context$3$0.next = 21;
                        return put(changeDirection(DOWN));

case 21:
                        return context$3$0.abrupt('break', 22);

case 22:
                        context$3$0.next = 0;
                        break;

case 24:
                    case 'end':
                        return context$3$0.stop();
                }
            }, marked2$0[0], this);
        }

function gameLoop(getState) {
                var _getState, _speed;

return regeneratorRuntime.wrap(function gameLoop$(context$3$0) {
                    while (1) switch (context$3$0.prev = context$3$0.next) {
                        case 0:
                            context$3$0.prev = 0;

case 1:
                            if (!true) {
                                context$3$0.next = 10;
                                break;
                            }

_getState = getState();
                            _speed = _getState.game.speed;
                            context$3$0.next = 6;
                            return call(delay, _speed);

case 6:
                            context$3$0.next = 8;
                            return put(tick());

case 8:
                            context$3$0.next = 1;
                            break;

case 10:
                            context$3$0.next = 14;
                            break;

case 12:
                            context$3$0.prev = 12;
                            context$3$0.t0 = context$3$0['catch'](0);

case 14:
                        case 'end':
                            return context$3$0.stop();
                    }
                }, marked2$0[1], this, [
                    [0, 12]
                ]);
            }
            /* gameLoop cancelled */
        function gameSaga(getState) {
            var running;
            return regeneratorRuntime.wrap(function gameSaga$(context$3$0) {
                while (1) switch (context$3$0.prev = context$3$0.next) {
                    case 0:
                        if (!true) {
                            context$3$0.next = 14;
                            break;
                        }

context$3$0.next = 3;
                        return take(PLAY);

case 3:
                        context$3$0.next = 5;
                        return put(reset());

case 5:
                        context$3$0.next = 7;
                        return fork(gameLoop, getState);

case 7:
                        running = context$3$0.sent;
                        context$3$0.next = 10;
                        return take(GAME_OVER);

case 10:
                        context$3$0.next = 12;
                        return cancel(running);

case 12:
                        context$3$0.next = 0;
                        break;

case 14:
                    case 'end':
                        return context$3$0.stop();
                }
            }, marked2$0[2], this);
        }

function snakeSaga(getState) {
            var _getState2, _direction, _getState3, _getState3$snake$parts, head, tail, _apples, i, _tail$i, x, y, _apples$i;

return regeneratorRuntime.wrap(function snakeSaga$(context$3$0) {
                while (1) switch (context$3$0.prev = context$3$0.next) {
                    case 0:
                        if (!true) {
                            context$3$0.next = 36;
                            break;
                        }

context$3$0.next = 3;
                        return take(TICK);

case 3:
                        _getState2 = getState();
                        _direction = _getState2.snake.direction;
                        context$3$0.next = 7;
                        return put(move(_direction));

case 7:
                        _getState3 = getState();
                        _getState3$snake$parts = _getState3.snake.parts;
                        head = _getState3$snake$parts[0];
                        tail = _getState3$snake$parts.slice(1);
                        _apples = _getState3.apples;
                        i = 0;

case 13:
                        if (!(i < tail.length)) {
                            context$3$0.next = 23;
                            break;
                        }

_tail$i = tail[i];
                        x = _tail$i.x;
                        y = _tail$i.y;

if (!(x === head.x && y === head.y)) {
                            context$3$0.next = 20;
                            break;
                        }

context$3$0.next = 20;
                        return put(gameOver());

case 20:
                        i++;
                        context$3$0.next = 13;
                        break;

case 23:
                        i = 0;

case 24:
                        if (!(i < _apples.length)) {
                            context$3$0.next = 34;
                            break;
                        }

_apples$i = _apples[i];
                        x = _apples$i.x;
                        y = _apples$i.y;

if (!(x === head.x && y === head.y)) {
                            context$3$0.next = 31;
                            break;
                        }

context$3$0.next = 31;
                        return put(eatApple(x, y));

case 31:
                        i++;
                        context$3$0.next = 24;
                        break;

case 34:
                        context$3$0.next = 0;
                        break;

case 36:
                    case 'end':
                        return context$3$0.stop();
                }
            }, marked2$0[3], this);
        }

function applesSaga() {
            var _randomPosition, x, y;

return regeneratorRuntime.wrap(function applesSaga$(context$3$0) {
                while (1) switch (context$3$0.prev = context$3$0.next) {
                    case 0:
                        if (!true) {
                            context$3$0.next = 10;
                            break;
                        }

context$3$0.next = 3;
                        return take([PLAY, EAT_APPLE]);

case 3:
                        _randomPosition = randomPosition();
                        x = _randomPosition.x;
                        y = _randomPosition.y;
                        context$3$0.next = 8;
                        return put(spawnApple(x, y));

case 8:
                        context$3$0.next = 0;
                        break;

case 10:
                    case 'end':
                        return context$3$0.stop();
                }
            }, marked2$0[4], this);
        }

return applyMiddleware(sagaMiddleware(inputSaga, gameSaga, snakeSaga, applesSaga))(createStore)(reducer);
    })();

// RENDERING
    var context = canvas.getContext('2d');
    var renderCircle = function renderCircle(x, y, color, stroke) {
        x = 16 * x + 8;
        y = 16 * y + 8;
        context.beginPath();
        context.arc(x, y, 7, 0, 2 * Math.PI, false);
        context.fillStyle = color;
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = stroke;
        context.stroke();
    };
    var renderText = function renderText(text) {
        context.font = '14px sans-serif';
        context.textAlign = 'center';
        context.fillStyle = '#fff';
        context.fillText(text, 200, 14);
    };
    var renderScore = function renderScore(score) {
        context.font = '14px sans-serif';
        context.textAlign = 'left';
        context.fillStyle = '#fff';
        context.fillText('score: ' + score, 2, 398);
    };
    var lastState = undefined;
    var render = function render() {
        requestAnimationFrame(render);
        if (lastState === store.getState()) {
            return;
        }
        lastState = store.getState();

var _store$getState = store.getState();

var _store$getState$game = _store$getState.game;
        var state = _store$getState$game.state;
        var speed = _store$getState$game.speed;
        var score = _store$getState$game.score;
        var _store$getState$snake$parts = _store$getState.snake.parts;
        var head = _store$getState$snake$parts[0];

var tail = _store$getState$snake$parts.slice(1);

var apples = _store$getState.apples;

context.clearRect(0, 0, canvas.width, canvas.height);

apples.forEach(function(_ref2) {
            var x = _ref2.x;
            var y = _ref2.y;
            return renderCircle(x, y, '#f00', '#fff');
        });
        tail.forEach(function(_ref3) {
            var x = _ref3.x;
            var y = _ref3.y;
            return renderCircle(x, y, '#060', '#fff');
        });
        renderCircle(head.x, head.y, '#0f0', '#fff');

switch (state) {
            case 'MENU':
                renderText('Click anywhere to play, move with arrow keys');
                break;
            case 'PLAYING':
                renderScore(score);
                break;
            case 'GAME_OVER':
                renderScore(score);
                renderText('Game over! Click anywhere to play again');
                break;
        }
    };

render();
};

createGame(document.getElementById('canvas'));

// collision with tail

// collision with apples

编译

CSS

HTML

Snake game made with Redux and Redux Saga

game, snake

编辑器支持Emmet

快捷键

Snake game made with Redux and Redux Saga

game, snake

使用h5和matter.js实现的简化版台球小游戏

使用vue.js p5.js和matter.js实现的降雨灭火小游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：