Snake game using phaser HTML5 framework

I am a beginner in JavaScript and Phaser and wrote a Snake game. I think there are lot of things I could have done better. I am looking for some advice on how I can improve the design and refactoring of the code. You can play the game here.

```
var mainGame = {
preload: function() {
game.load.image('snake', 'images/snake.png');
game.load.image('apple', 'images/apple.png');
},
create: function() {
// data members
this.snake = [];
this.initialSnakeLength = 3;
this.squareSize = 15;
this.speed = 9;
this.count = this.speed;
this.width = Math.floor(game.world.width / this.squareSize);
this.height = Math.floor(game.world.height / this.squareSize);
this.cursors = game.input.keyboard.createCursorKeys();
this.direction = "right";
this.apple = game.add.sprite(0, 0, 'apple');
this.apple.visible = false;
this.score = 0;
this.scoreText = game.add.text(10, 10, "", fontStyle);
this.updateXY = {up: {x: 0, y: -1}, down: {x: 0, y: 1}, left: {x: -1, y: 0}, right: {x: 1, y: 0}};

this.createSnake();
this.drawScore();
this.drawApple();
},
update: function() {
this.updateDirection();
this.moveSnake();
this.snakeEatApple();
this.checkGameOver();
},
checkGameOver: function() {
this.checkOutOfWorld();
this.checkSnakeCollision();
},
checkSnakeCollision: function() {
var head = this.snake[this.snake.length - 1];
for (var i = 0; i game.world.width || head.y game.world.height) {
this.gameOver();
}
},
gameOver: function() {
finalScore = this.score;
game.state.start('gameOver');
},
drawScore: function() {
this.scoreText.setText("Score: " + this.score);
},
createSnake: function() {
for (var i = 0; i < this.initialSnakeLength; ++i) {
this.snake.push(this

This is really excellent code for a beginner. The high-level structure is clear, and that's one of the most important and difficult things to get right.

This isn't a full critique, but I did notice one function where you can remove a lot of repitition. You can rewrite:

updateDirection: function() {
    if (this.cursors.up.isDown && this.direction != "down") {
        this.direction = "up";
    }
    else if (this.cursors.down.isDown && this.direction != "up") {
        this.direction = "down";
    }
    else if (this.cursors.left.isDown && this.direction != "right") {
        this.direction = "left";
    }
    else if (this.cursors.right.isDown && this.direction != "left") {
        this.direction = "right";
    }
},

as:

updateDirection: function() {
  const opposites  = {down: 'up', up: 'down', left: 'right', right: 'left' };
  const directions = Object.keys(opposites);
  const isPressed  = d => this.cursors[d].isDown;
  const isLegal    = d => this[d] != opposites[d];
  const newDir     = directions.find(d => isPressed(d) && isLegal(d));
  if (newDir) this.direction = newDir;
},

Note: the above is untested, but hopefully helpful. Also note, if needed for performance, you can pull the constants opposites and directions and isPressed and isLegal out of the function, so they won't be recreated each time it's called. The "work" of the function is all accomplished in the final two lines.

StackExchange Code Review Q#144393, answer score: 2