phaser/examples/games/breakout.php

<?php
    $title = "Breakout";
    require('../head.php');
?>

<script type="text/javascript">



    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

    function preload() {

        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();

        for (var y = 0; y < 4; y++)
        {
            for (var x = 0; x < 15; x++)
            {
                brick = bricks.create(120 + (x * 36), 100 + (y * 52), 'breakout', 'brick_' + (y+1) + '_1.png');
                brick.body.bounce.setTo(1, 1);
                brick.body.immovable = true;
            }
        }

        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);

        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);

    }

    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;
        }
        else
        {
            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 () {

        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.content = '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.content = "Game Over!";
        introText.visible = true;

    }


    function ballHitBrick (_ball, _brick) {

        _brick.kill();

        score += 10;

        scoreText.content = 'score: ' + score;

        //  Are they any bricks left?
        if (bricks.countLiving() == 0)
        {
            //  New level starts
            score += 1000;
            scoreText.content = '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 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;
        }

    }


</script>

<?php
    require('../foot.php');
?>