Add: hammer, helmet

src/game/typing/whac_a_mole/game.js

@@ -53,6 +53,7 @@ var WhacAMole = {
 
 
 		this.bigMole = new BigMole(game.world.centerX, BigMole.START_POS_Y);
+		this.hammer = new Hammer();
 
 		// typing content
 		var typingContentBG = new TypingContentBG();
@@ -77,13 +78,23 @@ var WhacAMole = {
 
 		var textDoneColor = [ '#99994d', '#77774d', '#66664d' ];
 		this.textTypingContentsDone = [];
+		this.helmetDone = [];
 		for(var i = 0; i < WhacAMole.TYPING_CONTENT_DONE_COUNT; i++) {
 			this.textTypingContentsDone[i] = game.add.text(
-				game.world.centerX - 200 - i * OFFSET_WORD_X, TYPING_CONTENT_Y,
+				game.world.centerX - 200 - i * OFFSET_WORD_X,
+				TYPING_CONTENT_Y,
 				"", textStyleBasic
 			);
 			this.textTypingContentsDone[i].addColor(textDoneColor[0], 0);
 			this.textTypingContentsDone[i].anchor.set(0.5);
+
+			this.helmetDone[i] = new Helmet();
+			this.helmetDone[i].move(
+				game.world.centerX - 200 - i * OFFSET_WORD_X - 50,
+				TYPING_CONTENT_Y - 110,
+			);
+			this.helmetDone[i].setType(Hammer.TYPE_PPYONG);
+			this.helmetDone[i].alpha(0);
 		}
 
 		var textPreviewColor = [ '#666666', '#888888', '#777777' ];
@@ -131,7 +142,7 @@ var WhacAMole = {
 		this.isOnStage = true;
 		this.stageTimer.start();
 
-		this.showWhacAMoleContents();
+		this.showTypingContents();
 		this.showHighlightKey();
 	},
 
@@ -140,6 +151,7 @@ var WhacAMole = {
 
 		for(var i = 0; i < WhacAMole.TYPING_CONTENT_DONE_COUNT; i++) {
 			this.textTypingContentsDone[i].text = "";
+			this.helmetDone[i].alpha(0);
 		}
 
 		this.textTypingBracket.text = "";
@@ -321,13 +333,20 @@ var WhacAMole = {
 		return letters;
 	},
 
-	showWhacAMoleContents: function() {
+	showTypingContents: function() {
 		for(var i = 0; i < WhacAMole.TYPING_CONTENT_DONE_COUNT; i++) {
 			var doneIndex = this.typingIndex - i - 1;
 			if(doneIndex < 0) {
 				this.textTypingContentsDone[i].text = "";
+				this.helmetDone[i].alpha(0);
 			} else {
 				this.textTypingContentsDone[i].text = this.typingRandomLetters[doneIndex];
+				// this.helmetDone[i].change(Helmet.TYPE_PPYONG);
+				this.helmetDone[i].alpha(1);
+
+				if(i == 0) {
+					this.helmetDone[i].dropDownTween(10);
+				}
 			}
 		}
 
@@ -343,6 +362,7 @@ var WhacAMole = {
 		var keyID = this.keyMapper.getKeyIDOfText(nextLetter);
 		// console.log(keyID);
 		this.bigMole.changeColor(keyID);
+		this.bigMole.changeHelmetColor(this.hammer.getType());
 		this.bigMole.showUp();
 
 		this.keyboardMole.changeColor(keyID);
@@ -400,16 +420,26 @@ var WhacAMole = {
 		var typingContent = this.typingRandomLetters[this.typingIndex];
 
 		if(this.isKeyPressed(inputContent, typingContent)) {
-			// this.typingScore.increase();
+			var plusScore = this.hammer.getScore();
-			this.scoreManager.plusScore(1);
+			this.scoreManager.plusScore(plusScore);
 
 			this.playNextContent();
 
+			for(var i = 0; i < WhacAMole.TYPING_CONTENT_DONE_COUNT - 1; i++) {
+				var index = WhacAMole.TYPING_CONTENT_DONE_COUNT - 1 - i;
+				var prevHelmetType = this.helmetDone[index - 1].getType();
+				this.helmetDone[index].change(prevHelmetType);
+			}
+			this.helmetDone[0].change(this.hammer.getType());
+			this.hammer.smash();
+			this.bigMole.changeHelmetColor(this.hammer.getType());	// this should call after hammer smash
+
 			if(this.typingIndex === this.typingRandomLettersLength) {
 				// this.goResult();
 			}
 		} else {
-			this.scoreManager.resetScore();
+			this.hammer.changeType(Hammer.TYPE_PPYONG);
+			this.bigMole.changeHelmetColor(this.hammer.getType());
 		}
 	},
 
@@ -417,7 +447,7 @@ var WhacAMole = {
 		this.hideHighlightKey();
 
 		this.typingIndex++;
-		this.showWhacAMoleContents();
+		this.showTypingContents();
 		this.showHighlightKey();
 	}
 }

src/game/typing/whac_a_mole/hammer.js

@@ -0,0 +1,153 @@
+function Hammer() {
+	this.hammerType = Hammer.TYPE_PPYONG;
+	this.upgradeCountdown = Hammer.UPGRADE_COUNT_PPYONG;
+
+	this.hammer = game.add.image(game.world.centerX + 125, 220, "hammer_ppyong");
+	this.hammer.anchor.x = 0.5;
+	this.hammer.anchor.y = 1;
+	this.hammer.scale.set(1.5);
+
+	this.upgradeCountdownText = game.add.text(game.world.centerX + 140, 170, this.upgradeCountdown);
+}
+
+Hammer.prototype.smash = function() {
+	this.tween = game.add.tween(this.hammer)
+		.from( { angle: -90 }, 10 )
+		.to( { angle: 0 }, BigMole.SHOW_UP_TIME_MS, "Quart.easeOut");
+	this.tween.start();
+
+	this.showParticle();
+
+	var scoreText = new ScoreText(
+		game.world.centerX,
+		BigMole.START_POS_Y - Hammer.OFFSET_SCORE_POS_Y,
+		this.getScore()
+	);
+
+	this.cleanHit();
+}
+
+Hammer.prototype.showParticle = function() {
+	var particleCount = 0;
+	var particleTint = 0xffffff;
+	var particleScale = 1;
+	switch(this.getType()) {
+		case Hammer.TYPE_PPYONG:
+		particleCount = Hammer.SCORE_PPYONG;
+		particleTint = Hammer.COLOR_PPYONG;
+		particleScale = 3;
+		break;
+
+		case Hammer.TYPE_WOOD:
+		particleCount = Hammer.SCORE_WOOD;
+		particleTint = Hammer.COLOR_WOOD;
+		particleScale = 2;
+		break;
+
+		case Hammer.TYPE_GOLD:
+		particleCount = Hammer.SCORE_GOLD;
+		particleTint = Hammer.COLOR_GOLD;
+		particleScale = 1;
+		break;
+	}
+
+	var hitStarEmitter = game.add.emitter(
+		game.world.centerX,
+		BigMole.START_POS_Y - Hammer.OFFSET_SCORE_POS_Y,
+		particleCount
+	);
+	hitStarEmitter.makeParticles('star');
+	hitStarEmitter.forEach(
+		function(particle) {
+			particle.tint = particleTint;
+			particle.scale.set(particleScale);
+		}
+	);
+	hitStarEmitter.gravity = 0;
+	hitStarEmitter.start(true, 1000, null, 100);
+}
+
+Hammer.prototype.getType = function() {
+	return this.hammerType;
+}
+
+Hammer.prototype.cleanHit = function() {
+	if(this.hammerType == Hammer.TYPE_GOLD)
+		return;
+
+	this.upgradeCountdown--;
+	this.upgradeCountdownText.text = this.upgradeCountdown;
+
+	if(this.upgradeCountdown > 0)
+		return;
+
+	if(this.hammerType == Hammer.TYPE_PPYONG)
+		this.changeType(Hammer.TYPE_WOOD);
+	else if(this.hammerType == Hammer.TYPE_WOOD)
+		this.changeType(Hammer.TYPE_GOLD);
+}
+
+Hammer.prototype.changeType = function(hammerType) {
+	switch(hammerType) {
+		case Hammer.TYPE_PPYONG:
+		this.hammerType = Hammer.TYPE_PPYONG;
+		this.upgradeCountdown = Hammer.UPGRADE_COUNT_PPYONG;
+		this.hammer.loadTexture("hammer_ppyong");
+		break;
+
+		case Hammer.TYPE_WOOD:
+		this.hammerType = Hammer.TYPE_WOOD;
+		this.upgradeCountdown = Hammer.UPGRADE_COUNT_WOOD;
+		this.hammer.loadTexture("hammer_wood");
+		break;
+
+		case Hammer.TYPE_GOLD:
+		this.hammerType = Hammer.TYPE_GOLD;
+		this.upgradeCountdown = Hammer.UPGRADE_COUNT_GOLD;
+		this.hammer.loadTexture("hammer_gold");
+		break;
+	}
+
+	if(this.hammerType == Hammer.TYPE_GOLD)
+		this.upgradeCountdownText.text = "";
+	else
+		this.upgradeCountdownText.text = this.upgradeCountdown;
+}
+
+Hammer.prototype.getScore = function(hammerType) {
+	var score = 0;
+	switch(this.hammerType) {
+		case Hammer.TYPE_PPYONG:
+		score = Hammer.SCORE_PPYONG;
+		break;
+
+		case Hammer.TYPE_WOOD:
+		score = Hammer.SCORE_WOOD;
+		break;
+
+		case Hammer.TYPE_GOLD:
+		score = Hammer.SCORE_GOLD;
+		break;
+	}
+
+	return score;
+}
+
+
+Hammer.TYPE_PPYONG	= 1;
+Hammer.TYPE_WOOD	= 2;
+Hammer.TYPE_GOLD	= 3;
+
+Hammer.UPGRADE_COUNT_PPYONG		= 10;
+Hammer.UPGRADE_COUNT_WOOD		= 20;
+Hammer.UPGRADE_COUNT_GOLD		= 30;
+
+Hammer.SCORE_PPYONG		= 1;
+Hammer.SCORE_WOOD		= 3;
+Hammer.SCORE_GOLD		= 7;
+
+Hammer.COLOR_PPYONG		= 0x6633FF;
+Hammer.COLOR_WOOD		= 0xFF0066;
+Hammer.COLOR_GOLD		= 0xFFdd66;
+
+Hammer.OFFSET_SCORE_POS_Y			= 100;

src/game/typing/whac_a_mole/helmet.js

@@ -0,0 +1,73 @@
+function Helmet() {
+	this.helmet = game.add.image(0, 0, "helmet");
+	this.helmet.scale.set(BigMole.SCALE);
+
+	this.helmetType = Helmet.TYPE_PPYONG
+	this.posY = 0;
+}
+
+Helmet.prototype.getSprite = function() {
+	return this.helmet;
+}
+
+Helmet.prototype.getType = function() {
+	return this.helmetType;
+}
+
+Helmet.prototype.setType = function(value) {
+	this.helmetType = value;
+}
+
+Helmet.prototype.scale = function(value) {
+	this.helmet.scale.set(value);
+}
+
+Helmet.prototype.alpha = function(value) {
+	this.helmet.alpha = value;
+}
+
+Helmet.prototype.move = function(x, y) {
+	this.helmet.x = x;
+	this.helmet.y = y;
+
+	this.posY = y;
+}
+
+Helmet.prototype.anchor = function(x, y) {
+	this.helmet.anchor.x = x;
+	this.helmet.anchor.y = y;
+}
+
+Helmet.prototype.change = function(type) {
+	this.helmetType = type;
+	switch(this.helmetType) {
+		case Helmet.TYPE_PPYONG:
+		this.helmet.tint = Hammer.COLOR_PPYONG;
+		break;
+
+		case Helmet.TYPE_WOOD:
+		this.helmet.tint = Hammer.COLOR_WOOD;
+		break;
+
+		case Helmet.TYPE_GOLD:
+		this.helmet.tint = Hammer.COLOR_GOLD;
+		break;
+	}
+}
+
+Helmet.prototype.dropDownTween = function(drowpDownHeight) {
+	this.helmet.y = this.posY - drowpDownHeight;
+
+	this.tween = game.add.tween(this.helmet)
+		// .from( { y: this.posY - drowpDownHeight }, 10 )
+		.to( { y: (this.posY) }, Helmet.SHOW_UP_TIME_MS, Phaser.Easing.Bounce.Out);
+	this.tween.start();
+}
+
+Helmet.TYPE_PPYONG		= 1;
+Helmet.TYPE_WOOD		= 2;
+Helmet.TYPE_GOLD		= 3;
+
+Helmet.START_POS_Y		= 200;
+Helmet.SHOW_UP_HEIGHT	= 100;
+Helmet.SHOW_UP_TIME_MS	= 200;

src/game/typing/whac_a_mole/loading.js

@@ -29,9 +29,17 @@ var Loading = {
 	startLoading: function() {
 		game.load.image('icon_fullscreen',	'../../../resources/image/icon/fullscreen_white.png');
 
-		game.load.image('mole_grey',	'../../../resources/image/character/mole_grey.png');
+		game.load.image('star',				'../../../resources/image/ui/star_particle.png');
+
+		game.load.image('helmet',	'../../../resources/image/weapon/helmet.png');
+
+		game.load.image('hammer_ppyong',	'../../../resources/image/weapon/hammer_ppyong.png');
+		game.load.image('hammer_wood',		'../../../resources/image/weapon/hammer_wood.png');
+		game.load.image('hammer_gold',		'../../../resources/image/weapon/hammer_gold.png');
+
+		game.load.image('mole_grey',		'../../../resources/image/character/mole_grey.png');
 		game.load.image('mole_grey_small',	'../../../resources/image/character/mole_grey_32x32.png');
-		game.load.image('mole_peach',	'../../../resources/image/character/mole_peach.png');
+		game.load.image('mole_peach',		'../../../resources/image/character/mole_peach.png');
 		game.load.image('mole_peach_small',	'../../../resources/image/character/mole_peach_32x32.png');
 
 

src/game/typing/whac_a_mole/mole.js

@@ -49,6 +49,13 @@ BigMole.constructor = BigMole;
 function BigMole(x, y) {
 	Mole.call(this, x, y, Mole.TYPE_BIG_MOLE);
 	this.anchor(0.5, 0);
+
+	// this.helmet = game.add.image(0, 0, "helmet");
+	this.helmet = new Helmet();
+	this.helmet.scale(BigMole.SCALE);
+	this.helmet.anchor(0.5, 0);
+
+	this.mole.addChild(this.helmet.getSprite());
 }
 
 BigMole.prototype.showUp = function() {
@@ -62,6 +69,21 @@ BigMole.prototype.changeColor = function(keyID) {
 		this.mole.loadTexture("mole_grey");
 }
 
+BigMole.prototype.changeHelmetColor = function(hammerType) {
+	switch(hammerType) {
+		case Hammer.TYPE_PPYONG:
+		this.helmet.getSprite().tint = Hammer.COLOR_PPYONG;
+		break;
+
+		case Hammer.TYPE_WOOD:
+		this.helmet.getSprite().tint = Hammer.COLOR_WOOD;
+		break;
+
+		case Hammer.TYPE_GOLD:
+		this.helmet.getSprite().tint = Hammer.COLOR_GOLD;
+		break;
+	}
+}
 
 BigMole.SCALE			= 1;
 BigMole.START_POS_Y		= 200;
@@ -108,4 +130,4 @@ KeyboardMole.prototype.changeColor = function(keyID) {
 
 KeyboardMole.SCALE			= 1.2;
 KeyboardMole.OFFSET_X		= 4;
-KeyboardMole.OFFSET_Y		= 0;
+KeyboardMole.OFFSET_Y		= 4;

src/web/client/whac_a_mole.html

@@ -28,6 +28,7 @@
 		<script src="../../game/lib/screen_bottom_ui.js"></script>
 		<script src="../../game/lib/score_manager.js"></script>
 		<script src="../../game/lib/score_board.js"></script>
+		<script src="../../game/lib/score_text.js"></script>
 		<script src="../../game/lib/experience_app_timer.js"></script>
 		<script src="../../game/lib/game_over_text.js"></script>
 		<script src="../../game/lib/animal.js"></script>
@@ -66,7 +67,9 @@
 		<script src="../../game/typing/whac_a_mole/define_variables.js"></script>
 		<script src="../../game/typing/whac_a_mole/stage_timer.js"></script>
 		<!-- <script src="../../game/typing/whac_a_mole/typing_score.js"></script> -->
+		<script src="../../game/typing/whac_a_mole/helmet.js"></script>
 		<script src="../../game/typing/whac_a_mole/mole.js"></script>
+		<script src="../../game/typing/whac_a_mole/hammer.js"></script>
 		<script src="../../game/typing/whac_a_mole/loading.js"></script>
 		<script src="../../game/typing/whac_a_mole/game.js"></script>
 		<script src="../../game/typing/whac_a_mole/main.js"></script>