Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Phaser Game</title>
	<script type="text/javascript" src="js/phaser.js"></script>
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

	<div id='container'></div>

	<script type="text/javascript">

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

		function preload(){

			game.load.image('sky', 'assets/sky.png');
			game.load.image('ground', 'assets/ground.png');
			game.load.image('star', 'assets/star.png');
			game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

			game.load.spritesheet('baddie', 'assets/baddie.png', 32, 32);
			game.load.image('firstaid', 'assets/firstaid.png');
			game.load.image('diamond', 'assets/diamond.png');
			game.load.image('platform', 'assets/platform.png');
		}

		var platforms;
		var player;
		var cursor;
		var stars;
		var baddie;
		var sky;
		var diamonds;
		var diamondSpawn = false;

		var baddieCount = 0;

		var score = 0;
		var scoreText;

		var lives = 3;
		var liveText;

		var camSpeed = 4;

		function create(){
			init();
		}

		function update(){

			sky.tilePosition.x += 2;
			checkScore();
			followPlayer();

			checkRemainingStars();
			//check if collide on top first, if its true; then we cant kill player and we kill
			//baddie, otherwise if its false, we can check overlap and if thats true, then we
			//take a life away

			game.physics.arcade.collide(player, platforms);
			game.physics.arcade.collide(stars, platforms);
			game.physics.arcade.collide(baddie, platforms);
			game.physics.arcade.collide(diamonds, platforms);
			game.physics.arcade.overlap(player, stars, collectStar, null, this);
			game.physics.arcade.overlap(player, diamonds, collectDiamond, null, this);

			if(game.physics.arcade.collide(player, baddie) == true){
				killBaddie();
				hasSpawn = false;
			}else if(game.physics.arcade.overlap(player, baddie, decreaseHealth, null, this) == true){
				console.log("player killed");
			}else{
				//do nothing
			}

			//game.physics.arcade.overlap(player, baddie, decreaseHealth, null, this);

			if(game.physics.arcade.collide(player, baddie)){
				killBaddie();
				hasSpawn = false;
			}

			player.body.velocity.x = 0;

			if(cursors.left.isDown){
				player.body.velocity.x = -150 * 3;
				player.animations.play('left');
			}else if(cursors.right.isDown){
				player.body.velocity.x = 150 * 3;
				player.animations.play('right');
			}else if(cursors.down.spacebar){
				console.log("test");
			}else{
				player.animations.stop();
				player.frame = 4;
			}

			if(cursors.up.isDown && player.body.touching.down){
				player.body.velocity.y = -350;
			}

		}

		function decreaseHealth(player, baddie){
			player.kill();
			if(checkLives() == true){
				respawnPlayer();
				lives--;
				liveText.text = 'Lives: ' + lives;
			}else{
				console.log("game over!!");
			}
		}

		function checkRemainingStars(){
			if(stars.total <= 0){
				//change background; maybe switch level
			}
		}

		function checkLives(){
			if(lives > 0)
				return true;
			else
				return false;
		}

		function respawnPlayer(){
			player = game.add.sprite(32, game.world.height - 150, 'dude');

		    //  We need to enable physics on the player
		    game.physics.arcade.enable(player);

		    //  Player physics properties. Give the little guy a slight bounce.
		    player.body.bounce.y = 0.2;
		    player.body.gravity.y = 300;
		    player.body.collideWorldBounds = true;

		    //  Our two animations, walking left and right.
		    player.animations.add('left', [0, 1, 2, 3], 10, true);
		    player.animations.add('right', [5, 6, 7, 8], 10, true);
		}

		function collectStar(player, star){
			star.kill();
			score += 10;
			scoreText.text = 'Score: ' + score;

		}

		function killBaddie(){
			baddie.kill();

			if(diamondSpawn == false){
				createDiamond();
				diamondSpawn = true;
			}else{
				//do nothing
			}
		}

		function collectDiamond(player, diamond){
			diamonds.kill();
			diamondSpawn = false;
			score += 50;
			scoreText.text = 'Score: ' + score;
		}

		function createDiamond(){

			var pos = getRandomPos();

			diamonds = game.add.sprite(pos, game.world.height - 150, 'diamond');
			diamonds.enableBody = true;
			game.physics.arcade.enable(diamonds);
			diamonds.body.bounce.y = 0.2;
			diamonds.body.gravity.y = 300;
			diamonds.body.collideWorldBounds = true;
		}

		function getRandomPos(){
			var x = 1600;

			var pos = Math.floor(Math.random() * 1600);
			return pos;
		}

		function init(){

			game.physics.startSystem(Phaser.Physics.ARCADE);

			game.world.setBounds(0,0,1600, 600);

			sky = game.add.tileSprite(0,0,1600,600,'sky');

			platforms = game.add.group();
			platforms.enableBody = true;

			var ground = platforms.create(0, game.world.height - 26, 'ground');
			ground.body.immovable = true;
			ground.scale.setTo(8,1);


			for(var i = 0; i < 3; i++){
				generatePlatforms();
			}

			player = game.add.sprite(32, game.world.height - 150, 'dude');

		    //  We need to enable physics on the player
		    game.physics.arcade.enable(player);

		    //  Player physics properties. Give the little guy a slight bounce.
		    player.body.bounce.y = 0.2;
		    player.body.gravity.y = 300;
		    player.body.collideWorldBounds = true;

		    //  Our two animations, walking left and right.
		    player.animations.add('left', [0, 1, 2, 3], 10, true);
		    player.animations.add('right', [5, 6, 7, 8], 10, true);

		    game.camera.follow(player);

		    cursors = game.input.keyboard.createCursorKeys();

		    stars = game.add.group();
		    stars.enableBody = true;

		    for(var i = 0; i < 15; i++){

		    	var star = stars.create(i * 50, 0, 'star');
		    	star.body.gravity.y = 300;
		    	star.body.bounce.y = 0.7 + Math.random() * 0.2;

		    }

		    scoreText = game.add.text(16,16, 'Score: ' + score, {fontSize: '32px', fill: '#000'});
		    liveText = game.add.text(16, 580, 'Lives: ' + lives, {fontSize: '15px', fill: '#000'});
		}

		function generatePlatforms(){
			//need to create a platform at a random x/y but make sure it doesnt overlap with anything
			//already present in the same x/y area

			var randX = getRandomX();
			var randY = getRandomY();

			if(randX >= 1600 - 400){
				randX -= 400;
			}

			if(checkIfOk(randX, randY)){
				var ledge = platforms.create(randX, randY, 'platform');
				ledge.body.immovable = true;
			}else{
				//generatePlatforms();
			}
		}

		function checkIfOk(randX, randY){
			for(var i = 0; i < platforms.children.length; i++){
				console.log(randX);
				console.log(randY);
				console.log("platform: " + platforms.children[i].x);
				if(randX + 400 < platforms.children[i].x){
					console.log("valid so far");
					if(randY + 100 < game.world.height || randY - 100 > 0){
						console.log("complete true");
						return true;
					}else{
						return false;
					}
				}else{
					return false;
				}
			}
		}

		function getRandomX(){
			var width = 1600;
			var pos;

			pos = Math.floor(Math.random() * 1600);
			return pos;
		}

		function getRandomY(){
			var height = 600;
			var pos;

			pos = Math.floor(Math.random() * 600);
			return pos;

		}

		var hasSpawn = false;

		function checkScore(){
			if(score >= 50){
				if(hasSpawn == false){
					spawnBaddie();
					hasSpawn = true;
				}
			}
		}

		function spawnBaddie(){

			baddie = game.add.sprite(200, game.world.height - 150, 'baddie');
			game.physics.arcade.enable(baddie);
			baddie.body.bounce.y = 0.2;
			baddie.body.gravity.y = 300;
			baddie.body.collideWorldBounds = true;
			baddie.animations.add('left', [0, 1], 10, true);
		    baddie.animations.add('right', [2,3], 10, true);
		    baddie.body.checkCollision.up = true;
		    baddie.body.checkCollision.down = true;
		    baddie.body.checkCollision.left = false;
		    baddie.body.checkCollision.right = false;
		}

		function followPlayer(){
			var x = player.x;
			var y = player.y;

			if(hasSpawn == true){
				if(x > baddie.x + 10){
					baddie.body.velocity.x = 150;
					baddie.animations.play('right');
				}else if(x < baddie.x - 10){
					baddie.body.velocity.x = -150;
					baddie.animations.play('left');
				}else{
					baddie.frame = 4;
				}
			}
		}

	</script>

</body>
</html>