/** * Generated from the Phaser Sandbox * * //phaser.io/sandbox/UozLvgWh * * This source requires Phaser 2.6.2 */ var game = new Phaser.Game(1024, 768, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }); function preload() { //game.load.atlas('breakout', 'assets/games/breakout/breakout.png', 'assets/games/breakout/breakout.json'); game.load.image('starfield', 'http://www.graphics-geek.com/Assets/Breakout/Starry.png'); game.load.image('ball', 'http://www.graphics-geek.com/Assets/Breakout/Ball.png'); game.load.spritesheet('spin', 'http://www.graphics-geek.com/Assets/Breakout/BallAnimation.png', 48, 48); game.load.image('paddle', 'http://www.graphics-geek.com/Assets/Breakout/Paddle.png'); game.load.image('brick1', 'http://www.graphics-geek.com/Assets/Breakout/Brick1.png'); game.load.image('brick2', 'http://www.graphics-geek.com/Assets/Breakout/Brick2.png'); game.load.image('brick3', 'http://www.graphics-geek.com/Assets/Breakout/Brick3.png'); game.load.image('brick4', 'http://www.graphics-geek.com/Assets/Breakout/Brick4.png'); game.load.image('brick5', 'http://www.graphics-geek.com/Assets/Breakout/Brick5.png'); game.load.image('brick6', 'http://www.graphics-geek.com/Assets/Breakout/Brick6.png'); } var ball; var paddle; var bricks; var brickImgs; var ballOnPaddle = true; var lives = 5; var score = 0; var scoreText; var livesText; var introText; var s; var colors = [ 0xff0000, 0xff1e00, 0xff4000, 0xff5e00, 0xff7f00, 0xff9d00, 0xffbf00, 0xffdd00, 0xffff00, 0xddff00, 0xbfff00, 0x9dff00, 0x80ff00, 0x5eff00, 0x40ff00, 0x1eff00, 0x00ff00, 0x00ff1e, 0x00ff40, 0x00ff5d, 0x00ff80, 0x00ff9d, 0x00ffbf, 0x00ffdd, 0x00ffff, 0x00ddff, 0x00bfff, 0x009dff, 0x0080ff, 0x005dff, 0x0040ff, 0x001eff, 0x0000ff, 0x1e00ff, 0x4000ff, 0x5e00ff, 0x8000ff, 0x9d00ff, 0xbf00ff, 0xdd00ff, 0xff00ff, 0xff00dd, 0xff00bf, 0xff009d, 0xff007f, 0xff005e, 0xff0040, 0xff001e, 0xffffff ]; function create() { brickImgs = ['brick1', 'brick2', 'brick3', 'brick4', 'brick5', 'brick6']; game.physics.startSystem(Phaser.Physics.ARCADE); // We check bounds collisions against all walls other than the bottom one game.physics.arcade.checkCollision.down = false; s = game.add.tileSprite(0, 0, 1024, 768, 'starfield'); s.tint = colors[Math.floor(Math.random() * colors.length)] bricks = game.add.group(); bricks.enableBody = true; bricks.setAll('outOfBoundsKill', true); bricks.setAll('checkWorldBounds', true); bricks.setAll('anchor.x', 0.5); bricks.setAll('anchor.y', 0.5); bricks.physicsBodyType = Phaser.Physics.ARCADE; var brick; for (var y = 0; y < 10; y++) { for (var x = 0; x < 15; x++) { brick = bricks.create(16 + (x * 64), 16 + (y * 32), brickImgs[Math.floor(Math.random() * brickImgs.length)]); brick.body.bounce.set(1); brick.body.immovable = false; brick.tint = colors[Math.floor(Math.random() * colors.length)]; } } paddle = game.add.sprite(game.world.centerX, 700, 'paddle'); paddle.anchor.setTo(0.5, 0.5); paddle.tint = colors[Math.floor(Math.random() * colors.length)]; game.physics.enable(paddle, Phaser.Physics.ARCADE); paddle.body.collideWorldBounds = true; paddle.body.bounce.set(1); paddle.body.immovable = true; ball = game.add.sprite(paddle.x / 2, paddle.y - 32, 'ball'); ball.anchor.set(0.5); ball.checkWorldBounds = true; ball.tint = colors[Math.floor(Math.random() * colors.length)]; game.physics.enable(ball, Phaser.Physics.ARCADE); ball.body.collideWorldBounds = true; ball.body.bounce.set(1); ball.animations.add('spin', 50, true, false); ball.events.onOutOfBounds.add(ballLost, this); 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.body.x = paddle.x; } else { game.physics.arcade.collide(ball, paddle, ballHitPaddle, null, this); game.physics.arcade.collide(ball, bricks, ballHitBrick, null, this); } } function render() { } 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--; livesText.text = 'lives: ' + lives; if (lives === 0) { gameOver(); } else { ballOnPaddle = true; ball.reset(paddle.body.x + 16, 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.y--; _brick.checkWorldBounds = true; //_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.text = '- Next Level -'; // Let's move the ball back to the paddle ballOnPaddle = true; ball.body.velocity.set(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'); } } 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; } }