Untitled

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Sample Breakout Game</title>
	<style type="text/css" media="screen">
		*
		{
			padding: 0;
			margin: 0;
		}
	</style>
	<!-- <script src="js/phaser.min.js"></script> -->
	<script src="js/phaser.js"></script>
</head>
<body>

	<script>
		var game = new Phaser.Game(480,320,Phaser.AUTO,null,{
			preload: preload, create:create,update:update
		});
		var ball,paddle,bricks,numBricksHit = 0;
		var lives = 3, livesText , lifeLostText;
		var scoreText,score = 0,playing = false,startButton,paddleNotHit = 0;
		var textStyle = { font: '18px Arial', fill: '#0095DD' };
		// var brickPattern = [[1,0,1,0,1,1,1],[1,1,1,0,0,1,0],[1,0,1,0,1,1,1]];
		var brickPattern;
		function preload() {
			game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
			game.scale.pageAlignHorizontally = true;
			game.scale.pageAlignVertically = true;
			game.stage.backgroundColor = '#000';
			// game.load.image('ball','img/ball.png');
			game.load.image('paddle','img/paddle.png');
			game.load.image('brick','img/brick2.png');
			game.load.spritesheet('ball','img/wobble.png',20,20);
			game.load.spritesheet('button','img/button.png',120,40);
		}
		function create() {
			game.physics.startSystem(Phaser.Physics.ARCADE);
			game.physics.arcade.checkCollision.down = false;
			ball = game.add.sprite(game.world.width*0.5,game.world.height - 25, 'ball');
			ball.animations.add('wobble', [0,1,0,2,0,1,0,2,0], 48);
			ball.anchor.set(0.5);
			game.physics.enable(ball,Phaser.Physics.ARCADE);
			ball.body.collideWorldBounds = true;
			ball.body.bounce.set(1);
			// ball.body.velocity.set(150,-150);
			ball.checkWorldBounds = true;
			ball.events.onOutOfBounds.add(ballLeaveScreen,this);
			paddle = game.add.sprite(game.world.width*0.5,game.world.height-5,'paddle');
			paddle.anchor.set(0.5,1);
			game.physics.enable(paddle,Phaser.Physics.ARCADE);
			paddle.body.immovable = true;
			initBricks();
			scoreText = game.add.text(5,5,'Points: 0',textStyle);
			livesText = game.add.text(game.world.width-5, 5, 'Lives: '+ lives,textStyle);
			livesText.anchor.set(1,0);
			lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, Click to continue!',textStyle);
			lifeLostText.anchor.set(0.5);
			lifeLostText.visible = false;
			startButton = game.add.button(game.world.width*0.5,game.world.height*0.5,'button',startGame,this);
			startButton.anchor.set(0.5);
		}
		function update() {
			game.physics.arcade.collide(ball,paddle,ballHitPaddle);
			game.physics.arcade.collide(ball,bricks,ballHitBrick);
			if(playing)
			{
				paddle.x = game.input.x || game.world.width*0.5;
			}
		}

		function countOnes(arr)
		{
			var count = 0;
			for(var i=0;i<arr.length;i++)
			{
				for(var j=0;j<arr[i].length;j++)
				{
					if(arr[i][j] == 1)
						count += 1;
				}
			}
			return count;
		}
		function ballHitBrick(ball,brick)
		{
			numBricksHit += 1;
			paddleNotHit += 1;
			var killTween = game.add.tween(brick.scale);
			killTween.to({x:0,y:0},200,Phaser.Easing.Linear.None);
			killTween.onComplete.addOnce(function() {
				brick.kill();
			},this);
			killTween.start();
			score += 10*paddleNotHit;
			scoreText.setText('Points: ' + score);
			if(numBricksHit === countOnes(brickPattern)) {
        		alert('You won!');
        		location.reload();
    		}
		}
		function initBricks()
		{
			brickInfo = {
				width: 50,
				height: 20,
				count: {
					row: 7,
					col: 3
				},
				offset: {
					top: 50,
					left: 60
				},
				padding: 10
			}
			bricks = game.add.group();
			brickPattern = new Array(brickInfo.count.col);
			for(var i = 0;i<brickInfo.count.col;i++)
			{
				brickPattern[i] = new Array(brickInfo.count.row);
			}
			var brickColor = Math.random() * 0xdddddd + 0x111111;
			for(c=0;c<brickInfo.count.col;c++)
			{
				for(r=0;r<brickInfo.count.row;r++)
				{
					brickPattern[c][r] = Math.floor(Math.random() + 0.78);
					if(brickPattern[c][r])
					{
						var brickX = brickInfo.offset.left + (r*(brickInfo.width + brickInfo.padding));
						var brickY = brickInfo.offset.top + (c*(brickInfo.height+ brickInfo.padding));
						newBrick = game.add.sprite(brickX,brickY, 'brick');
						game.physics.enable(newBrick,Phaser.Physics.ARCADE);
						newBrick.body.immovable = true;
						newBrick.anchor.set(0.5);
						newBrick.tint = brickColor;
						bricks.add(newBrick);
					}
				}
			}
		}
		function ballLeaveScreen() {
			lives--;
			if(lives)
			{
				livesText.setText('Lives: '+lives);
				lifeLostText.visible = true;
				ball.reset(game.world.width*0.5,game.world.height - 25);
				paddle.reset(game.world.with*0.5,game.world.height - 5);
				game.input.onDown.addOnce(function() {
					lifeLostText.visible = false;
					ball.body.velocity.set(150,-150);
				},this);
			}
			else
			{
				alert('You Lost!, GAME OVER!!!');
				location.reload();
			}
		}
		function ballHitPaddle()
		{
			paddleNotHit = 0;
			ball.animations.play('wobble');
			ball.body.velocity.x = -1*5*(paddle.x-ball.x);
		}
		function startGame()
		{
			startButton.destroy();
			ball.body.velocity.set(150,-150);
			playing = true;
		}
	</script>
</body>
</html>