Add: hide and show animation

src/game/lib/stage_timer.js

@@ -2,6 +2,8 @@ function StageTimer(stageTimerSec, onTimeOver) {
 	this.stageTimerSec = stageTimerSec;
 	this.onTimeOver = onTimeOver;
 
+	this.isPaused = false;
+
 	var fontStyle = StageTimer.DEFAULT_TEXT_FONT;
 
 	fontStyle.align = "right";
@@ -30,6 +32,11 @@ StageTimer.prototype.start = function() {
 }
 
 StageTimer.prototype.pause = function() {
+	this.isPaused = true;
+}
+
+StageTimer.prototype.resume = function() {
+	this.isPaused = false;
 }
 
 StageTimer.prototype.stop = function() {
@@ -39,6 +46,9 @@ StageTimer.prototype.stop = function() {
 }
 
 StageTimer.prototype.updateTimer = function() {
+	if(this.isPaused == true)
+		return;
+
 	this.timeLeft--;
 	if(this.timeLeft === 0) {
 		this.stop();

src/game/mouse/card_matching/dude_card.js

@@ -34,6 +34,8 @@ function DudeCard(game, col, row, cardCharacters, clickedHandler) {
 	this.inputEnabled = true;
 	this.events.onInputDown.add(this.onDown, this);
 
+	this.showAndHideEvent = null;
+
 	game.add.existing(this);
 }
 
@@ -95,20 +97,46 @@ DudeCard.prototype.flipToBack = function() {
 	this.backPaper.alpha = 1;
 }
 
-DudeCard.prototype.show = function(openCardColumnNo, openCardRowNo) {
+DudeCard.prototype.move = function(openCardColumnNo, openCardRowNo) {
-	this.isActivated = true;
-	this.alpha = 1;
-
 	this.x = game.world.centerX - (((openCardColumnNo - 1) / 2) - this.columnNo) * 180;
 	this.y = game.world.centerY - (((openCardRowNo - 1) / 2) - this.rowNo) * 160;
 }
 
+DudeCard.prototype.setActive = function(value) {
+	this.isActivated = value;
+}
+
+DudeCard.prototype.show = function() {
+	this.alpha = 1;
+}
+
+DudeCard.prototype.startShowAndHideAnimation = function() {
+	this.flipToFront();
+	this.showAndHideEvent = game.time.events.add(
+		DudeCard.SHOW_AND_HIDE_TIME_SECOND * Phaser.Timer.SECOND,
+		this.finishShowAndHideAnimation,
+		this
+	);
+}
+
+DudeCard.prototype.finishShowAndHideAnimation = function() {
+	this.flipToBack();
+	this.removeShowAndHideEvent();
+}
+
 DudeCard.prototype.hide = function() {
-	this.isActivated = false;
 	this.alpha = 0;
 
 	this.x = DudeCard.CARD_INITIAL_POSITION_X;
 	this.y = DudeCard.CARD_INITIAL_POSITION_Y;
+
+	this.removeShowAndHideEvent();
+}
+
+DudeCard.prototype.removeShowAndHideEvent = function() {
+	if(this.showAndHideEvent != null) {
+		game.time.events.remove(this.showAndHideEvent);
+	}
 }
 
 
@@ -118,4 +146,5 @@ DudeCard.MAX_CARD_ROW_NO		= 4;
 DudeCard.CARD_INITIAL_POSITION_X	= -100;
 DudeCard.CARD_INITIAL_POSITION_Y	= -100;
 
+DudeCard.SHOW_AND_HIDE_TIME_SECOND	= 0.5;
 DudeCard.INIT_LEFT_TIME_MIN			= 2;

src/game/mouse/card_matching/game.js

@@ -41,10 +41,11 @@ var Game = {
 			}).bind(this)
 		);
 
+		this.setClickEnable(false);
 		this.stageTimer = new StageTimer(
 			Game.GAME_TIME_SEC,
 			(function() {
-				// this.isOnStage = false;
+				this.setClickEnable(false);
 
 				this.gameOver();
 			}).bind(this)
@@ -94,19 +95,8 @@ var Game = {
 		this.selectedCardCol;
 		this.selectedCardRow;
 
-		this.score;
-		this.scoreText;
-		this.highscore;
-		this.highscoreText;
-		this.plusScoreTextGroup;
-		this.stageNoticeText;
-
-		this.popup;
-		this.popupTween = null;
-		this.startButton;
-
-		this.timeEvent;
 		this.gameTimeEvents = [];
+		this.showAndHideCardsEvent = null;
 
 
 		this.cardCharacterIndexList;
@@ -195,8 +185,8 @@ var Game = {
 	startGame: function() {
 		this.playingStageNo = 1;
 
-		this.startStage();
 		this.stageTimer.start();
+		this.startStage();
 	},
 
 	startStage: function() {
@@ -206,8 +196,47 @@ var Game = {
 		this.activatedCardCount = this.activatedCardColumnNo * this.activatedCardRowNo;
 		this.clearedCardCount = 0;
 
-		this.initCards();
 		this.initOpenCardInfo();
+		this.initCards();
+
+		this.showAndHideCardIndex = 0;
+		this.showAndHideCardsEvent = game.time.events.loop(
+			DudeCard.SHOW_AND_HIDE_TIME_SECOND * 0.5 * Phaser.Timer.SECOND,
+			this.showAndHideCards,
+			this
+		);
+		this.stageTimer.pause();
+	},
+
+	startNextStage: function() {
+		this.setClickEnable(false);
+		this.playingStageNo++;
+
+		var startStageTimeEvent = game.time.events.add(Game.NEXT_STAGE_DELAY_MS, this.startStage, this);
+		this.gameTimeEvents[this.gameTimeEvents.length + 1] = startStageTimeEvent;
+	},
+
+	showAndHideCards: function() {
+		for(var index = 0; index < DudeCard.MAX_CARD_ROW_NO * DudeCard.MAX_CARD_COLUMN_NO; index++) {
+			if(index < this.showAndHideCardIndex)
+				continue;
+
+			var card = this.cards[index];
+			if(card.isActivated == true) {
+				card.startShowAndHideAnimation();
+				this.showAndHideCardIndex = index + 1;
+
+				return;
+			}
+		}
+
+		this.setClickEnable(true);
+		game.time.events.remove(this.showAndHideCardsEvent);
+		this.stageTimer.resume();
+	},
+
+	setClickEnable: function(value) {
+		this.isEnableClick = value;
 	},
 
 	setOpenCardColumnRow: function() {
@@ -254,18 +283,21 @@ var Game = {
 		this.randCharacterListAfterShuffling = Phaser.ArrayUtils.shuffle(characterListBeforeShuffling);
 
 		var randCharacterIndex = 0;
-		for(var i = 0; i < DudeCard.MAX_CARD_COLUMN_NO; i++) {
+		for(var j = 0; j < DudeCard.MAX_CARD_ROW_NO; j++) {
-			for(var j = 0; j < DudeCard.MAX_CARD_ROW_NO; j++) {
+			for(var i = 0; i < DudeCard.MAX_CARD_COLUMN_NO; i++) {
 				var index = j * DudeCard.MAX_CARD_COLUMN_NO + i;
 				if(i < this.activatedCardColumnNo && j < this.activatedCardRowNo) {
-					this.cards[index].show(this.activatedCardColumnNo, this.activatedCardRowNo);
+					this.cards[index].setActive(true);
+					this.cards[index].move(this.activatedCardColumnNo, this.activatedCardRowNo);
+					this.cards[index].show();
 					this.cards[index].flipToBack();
-					// cards[index].setCharacter(1);
+					// this.cards[index].setCharacter(1);
-					// cards[index].setCharacter(game.rnd.integerInRange(0, card_characters_count - 1));
+					// this.cards[index].setCharacter(game.rnd.integerInRange(0, card_characters_count - 1));
 					this.cards[index].setCharacter(this.randCharacterListAfterShuffling[randCharacterIndex]);
 					randCharacterIndex++;
 				} else {
 					this.cards[index].hide();
+					this.cards[index].setActive(false);
 				}
 			}
 		}
@@ -288,6 +320,11 @@ var Game = {
 	},
 
 	cardClicked: function(col, row) {
+		if(this.isEnableClick == false) {
+			console.log("It's not on stage");
+			return;
+		}
+
 		var index = this.getCardIndex(col, row);
 
 		if(this.isCardSelectEdgeActivated() == false) {		// card select edge is not activated
@@ -363,7 +400,7 @@ var Game = {
 
 	resetCards: function(col, row) {
 		var index = this.getCardIndex(col, row);
-		this.cards[index].show(col, row);
+		this.cards[index].show();
 		index = this.selectedCardRow * DudeCard.MAX_CARD_COLUMN_NO + this.selectedCardCol;
 		this.cards[index].hide(this.selectedCardCol, this.selectedCardRow);
 	},
@@ -434,19 +471,12 @@ var Game = {
 		this.reservedHideCard[0].hide();
 		this.reservedHideCard[1].hide();
 
-		// this.addScore();
-		// this.updateScore();
 		this.scoreManager.plusScore(this.getScore());
 
 		// to do : check clear stage
 		this.clearedCardCount += 2;
-		if(this.activatedCardCount == this.clearedCardCount) {
+		if(this.activatedCardCount == this.clearedCardCount)
-			// this.showStageNotice(this.playingStageNo + "단계 완료");
+			this.startNextStage();
-			this.playingStageNo++;
-
-			var startStageTimeEvent = game.time.events.add(Phaser.Timer.SECOND * 1, this.startStage, this);
-			this.gameTimeEvents[this.gameTimeEvents.length + 1] = startStageTimeEvent;
-		}
 	},
 
 	resetOpenedCard: function() {
@@ -517,7 +547,7 @@ var Game = {
 		this.activatedCardRowNo = 0;
 		this.initCards();
 
-		game.time.events.remove(this.timeEvent);
+		// game.time.events.remove(this.timeEvent);
 		this.hideSelectedCard();
 
 		for(var i = 0; i < this.gameTimeEvents.length; i++) {
@@ -538,4 +568,4 @@ var Game = {
 
 
 Game.GAME_TIME_SEC				= 60;
-Game.GAME_OVER_WAIT_TIME_MS		= 2000;
+Game.NEXT_STAGE_DELAY_MS		= 500;