Redux in a Phaser Game

How to use the Redux library to power a Phaser html5 game.

by archierocks183

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.6/phaser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.js"></script>

Babel + JSX

// Redux
const {
	createStore,
  dispatch
} = Redux;

// Actions
const CLICK = 'CLICK';
function click() {
	return {
  	type: CLICK
  };
}

// Reducers
function coordinates(state = [1, 1], action) {
	switch(action.type) {
  	case CLICK:
    	return [
      	state[0] + 40 * Math.random(),
        state[1] + 40 * Math.random()
      ]
    default:
    	return state;
  }
}

// Store
let store = createStore(coordinates);

// Subscribers
function movePlane(plane) {
	game.add.tween(plane).to({x: store.getState()[0], y: store.getState()[1] }, 1000, 'Linear', true);
}


// Game
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });

function preload() {
    game.load.image('backdrop', 'https://raw.githubusercontent.com/Josh-Miller/public-images/master/clouds.png');
    game.load.image('plane', 'https://raw.githubusercontent.com/Josh-Miller/public-images/master/plane.png');
}

function create() {
	game.stage.backgroundColor = "#DEEFF5";
  game.add.sprite(0, 0, 'backdrop');
  const plane = game.add.sprite(store.getState()[0], store.getState()[1], 'plane');
  plane.inputEnabled = true;
	plane.collideWorldBounds = true;
  
  // Subscribe function to store changes
  store.subscribe(movePlane.bind(null, plane));
    
  // When you click the plane, fire our click action
  plane.events.onInputDown.add(() => {store.dispatch(click())}, null);
    
}