devpruthvi · February 14, 2016 16:47
diff --git a/breakout.html b/breakout.html
 <!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>
	<!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.width0.5, game.world.height0.5, 'Life lost, Click to continue!',textStyle);
	lifeLostText.anchor.set(0.5);
	lifeLostText.visible = false;
	startButton = game.add.button(game.world.width0.5,game.world.height0.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 = -15(paddle.x-ball.x);
	}
	function startGame()
	{
	startButton.destroy();
	ball.body.velocity.set(150,-150);
	playing = true;
	}
	</script>
	</body>
	</html>