Final 1.0.5 release.

examples/games/breakout.php

@@ -7,21 +7,37 @@
 
 (function () {
 
-    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
 
     function preload() {
 
-        game.load.atlas('breakout', 'assets/sprites/breakout.png', 'assets/sprites/breakout.json');
+        game.load.atlas('breakout', 'assets/games/breakout/breakout.png', 'assets/games/breakout/breakout.json');
+        game.load.image('starfield', 'assets/misc/starfield.jpg');
 
     }
 
     var ball;
     var paddle;
     var bricks;
+
     var ballOnPaddle = true;
 
+    var lives = 3;
+    var score = 0;
+
+    var scoreText;
+    var livesText;
+    var introText;
+
+    var s;
+
     function create() {
 
+        //  We do this so the ball can still rebound with the world bounds, but it will look like it has gone off the bottom of the screen
+        game.world.height = 620;
+
+        s = game.add.tileSprite(0, 0, 800, 600, 'starfield');
+
         var brick;
         bricks = game.add.group();
 
@@ -35,15 +51,22 @@
             }
         }
 
-        ball = game.add.sprite(game.world.centerX, 534, 'breakout', 'ball_1.png');
+        paddle = game.add.sprite(game.world.centerX, 500, 'breakout', 'paddle_big.png');
+        paddle.anchor.setTo(0.5, 0.5);
+        paddle.body.collideWorldBounds = true;
+        paddle.body.bounce.setTo(1, 1);
+        paddle.body.immovable = true;
+
+        ball = game.add.sprite(game.world.centerX, paddle.y - 16, 'breakout', 'ball_1.png');
+        ball.anchor.setTo(0.5, 0.5);
         ball.body.collideWorldBounds = true;
         ball.body.bounce.setTo(1, 1);
         ball.animations.add('spin', [ 'ball_1.png', 'ball_2.png', 'ball_3.png', 'ball_4.png', 'ball_5.png' ], 50, true, false);
 
-        paddle = game.add.sprite(game.world.centerX, 550, 'breakout', 'paddle_big.png');
-        paddle.body.collideWorldBounds = true;
-        paddle.body.bounce.setTo(1, 1);
-        paddle.body.immovable = true;
+        scoreText = game.add.text(32, 550, 'score: 0', { font: "20px Arial", fill: "#ffffff", align: "left" });
+        livesText = game.add.text(680, 550, 'lives: 3', { font: "20px Arial", fill: "#ffffff", align: "left" });
+        introText = game.add.text(game.world.centerX, 400, '- click to start -', { font: "40px Arial", fill: "#ffffff", align: "center" });
+        introText.anchor.setTo(0.5, 0.5);
 
         game.input.onDown.add(releaseBall, this);
 
@@ -51,36 +74,133 @@
 
     function update () {
 
+        //  Fun, but a little sea-sick inducing :) Uncomment if you like!
+        // s.tilePosition.x += (game.input.speed.x / 2);
+
         paddle.x = game.input.x;
 
+        if (paddle.x < 24)
+        {
+            paddle.x = 24;
+        }
+        else if (paddle.x > game.width - 24)
+        {
+            paddle.x = game.width - 24;
+        }
+
         if (ballOnPaddle)
         {
-            ball.x = paddle.x + 16;
+            ball.x = paddle.x;
         }
         else
         {
-            game.physics.collide(paddle, ball);
+            game.physics.collide(ball, paddle, ballHitPaddle, null, this);
             game.physics.collide(ball, bricks, ballHitBrick, null, this);
         }
 
+        //  Out?
+        if (ball.y > 600 && ballOnPaddle == false)
+        {
+            ballLost();
+        }
+
     }
 
     function releaseBall () {
 
-        ballOnPaddle = false;
-        ball.body.velocity.y = -300;
-        ball.body.velocity.x = -75;
-        ball.animations.play('spin');
+        if (ballOnPaddle)
+        {
+            ballOnPaddle = false;
+            ball.body.velocity.y = -300;
+            ball.body.velocity.x = -75;
+            ball.animations.play('spin');
+            introText.visible = false;
+        }
 
     }
 
+    function ballLost () {
+
+        lives--;
+
+        if (lives == 0)
+        {
+            gameOver();
+        }
+        else
+        {
+            livesText.text = 'lives: ' + lives;
+            ballOnPaddle = true;
+            ball.body.velocity.setTo(0, 0);
+            ball.x = paddle.x + 16;
+            ball.y = paddle.y - 16;
+            ball.animations.stop();
+        }
+
+    }
+
+    function gameOver () {
+
+        ball.body.velocity.setTo(0, 0);
+        
+        introText.text = "Game Over!";
+        introText.visible = true;
+
+    }
+
+
     function ballHitBrick (_ball, _brick) {
 
         _brick.kill();
 
+        score += 10;
+
+        scoreText.text = 'score: ' + score;
+
+        //  Are they any bricks left?
+        if (bricks.countLiving() == 0)
+        {
+            //  New level starts
+            score += 1000;
+            scoreText.text = 'score: ' + score;
+            introText = '- Next Level -';
+
+            //  Let's move the ball back to the paddle
+            ballOnPaddle = true;
+            ball.body.velocity.setTo(0, 0);
+            ball.x = paddle.x + 16;
+            ball.y = paddle.y - 16;
+            ball.animations.stop();
+
+            //  And bring the bricks back from the dead :)
+            bricks.callAll('revive', this);
+        }
+
     }
 
-    function render () {
+    function ballHitPaddle (_ball, _paddle) {
+
+        var diff = 0;
+
+        if (_ball.x < _paddle.x)
+        {
+            //  Ball is on the left-hand side of the paddle
+            diff = _paddle.x - _ball.x;
+            _ball.body.velocity.x = (-10 * diff);
+        }
+        else if (_ball.x > _paddle.x)
+        {
+            //  Ball is on the right-hand side of the paddle
+            diff = _ball.x -_paddle.x;
+            _ball.body.velocity.x = (10 * diff);
+        }
+        else
+        {
+            //  Ball is perfectly in the middle
+            //  Add a little random X to stop it bouncing straight up!
+            _ball.body.velocity.x = 2 + Math.random() * 8;
+        }
+
     }
 
 })();