diff --git a/resources/image/character/mole.afdesign b/resources/image/character/mole.afdesign index a95774c..6b07787 100644 Binary files a/resources/image/character/mole.afdesign and b/resources/image/character/mole.afdesign differ diff --git a/resources/image/weapon/hammer_gold.png b/resources/image/weapon/hammer_gold.png new file mode 100644 index 0000000..b4bf9f8 Binary files /dev/null and b/resources/image/weapon/hammer_gold.png differ diff --git a/resources/image/weapon/hammer_ppyong.png b/resources/image/weapon/hammer_ppyong.png new file mode 100644 index 0000000..1ddbf85 Binary files /dev/null and b/resources/image/weapon/hammer_ppyong.png differ diff --git a/resources/image/weapon/hammer_wood.png b/resources/image/weapon/hammer_wood.png new file mode 100644 index 0000000..5cdc889 Binary files /dev/null and b/resources/image/weapon/hammer_wood.png differ diff --git a/resources/image/weapon/hammers.afdesign b/resources/image/weapon/hammers.afdesign new file mode 100644 index 0000000..3c99c2f Binary files /dev/null and b/resources/image/weapon/hammers.afdesign differ diff --git a/resources/image/weapon/helmet.png b/resources/image/weapon/helmet.png new file mode 100644 index 0000000..1de4cd9 Binary files /dev/null and b/resources/image/weapon/helmet.png differ diff --git a/src/game/typing/whac_a_mole/game.js b/src/game/typing/whac_a_mole/game.js index 3079c0c..93593f0 100644 --- a/src/game/typing/whac_a_mole/game.js +++ b/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(); - this.scoreManager.plusScore(1); + var plusScore = this.hammer.getScore(); + 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(); } } diff --git a/src/game/typing/whac_a_mole/hammer.js b/src/game/typing/whac_a_mole/hammer.js new file mode 100644 index 0000000..8f317b5 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/game/typing/whac_a_mole/helmet.js b/src/game/typing/whac_a_mole/helmet.js new file mode 100644 index 0000000..7df3692 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/game/typing/whac_a_mole/loading.js b/src/game/typing/whac_a_mole/loading.js index bec43ba..277d5ca 100644 --- a/src/game/typing/whac_a_mole/loading.js +++ b/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'); diff --git a/src/game/typing/whac_a_mole/mole.js b/src/game/typing/whac_a_mole/mole.js index f882dc7..0742900 100644 --- a/src/game/typing/whac_a_mole/mole.js +++ b/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; diff --git a/src/web/client/whac_a_mole.html b/src/web/client/whac_a_mole.html index 732ed28..b74611b 100644 --- a/src/web/client/whac_a_mole.html +++ b/src/web/client/whac_a_mole.html @@ -28,6 +28,7 @@ + @@ -66,7 +67,9 @@ + +