Bouncing Ball Phaser Game

Kudos Thomas Palef: http://www.lessmilk.com/ http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-1/

by Ebony McCoy

HTML

<script src="https://github.com/photonstorm/phaser/releases/download/v2.6.1/phaser.min.js"></script>
<div id="game_div"> </div>

CSS

#game_div {
      width: 400px;
      margin: auto;
      margin-top: 50px;
    }

JavaScript

// Initialize Phaser, and creates a 400x490px game

var game = new Phaser.Game(400, 400, Phaser.AUTO, 'game_div');

//window.addEventListener("deviceorientation", function(event) {
//          game.orientation = event;
//      }, true);
//game.orientation = {gamma:0}
var game_state = {};

// Creates a new 'main' state that wil contain the game
game_state.main = function() {};
game_state.main.prototype = {

  preload: function() {
    // Function called first to load all the assets
  },

  create: function() {
    // Fuction called after 'preload' to setup the game
    game.paddleHeight = 30;
    game.paddleWidth = 100;
    var Paddle = function() {
      this.graphics = game.add.graphics(0, 0);
      // set a fill and line style
      this.graphics.beginFill(0xFF3300);
      this.graphics.drawRect(0, 0, game.paddleWidth, game.paddleHeight)
      this.paddle = game.add.sprite(game.width / 2, game.height - (game.paddleHeight / 2 + 5), this.graphics.generateTexture())
      this.paddle.anchor.setTo(0.5, 0.5)
      this.graphics.destroy();
      return this.paddle;
    }

    var Ball = function() {
      this.graphics = game.add.graphics(0, 0);
      // set a fill and line style
      this.graphics.beginFill(0xFF3300);
      this.graphics.drawCircle(0, 0, 40)
      this.ball = game.add.sprite(game.width / 4 + game.width / 2 * Math.random(), game.height * .2, this.graphics.generateTexture());

      this.ball.anchor.setTo(0.5, 0.5)
      this.ball.velocities = {
        x: 1 - Math.random() * 2,
        y: 0
      }
      this.graphics.destroy();
      return this.ball;
    }
    game.end = function() {
      game.over = true;
      game.paddle.destroy();
      game.ball.destroy();
      game.scoreSprite.fill = 'red';
      setTimeout(function(){ game.state.start('main'); }, 3000);
    }
    
    game.paddle = new Paddle();
    game.ball = new Ball();
    game.score = 0;
    game.scoreSprite = game.add.text(5, 0, game.score.toString())
    game.scoreSprite.fill =...