Add: card matching - completed

src/game/lib/stage_timer.js

@@ -0,0 +1,69 @@
+function StageTimer(stageTimerSec, onTimeOver) {
+	this.stageTimerSec = stageTimerSec;
+	this.onTimeOver = onTimeOver;
+
+	var fontStyle = StageTimer.DEFAULT_TEXT_FONT;
+
+	fontStyle.align = "right";
+	fontStyle.boundsAlignH = "right";
+	this.timerText = game.add.text(game.world.width - 300, 0, "", fontStyle)
+		.setTextBounds(0, 0, 200, StageTimer.FONT_HEIGHT_PX);
+
+	// var grd = this.label.context.createLinearGradient(0, 0, 0, StageTimer.FONT_HEIGHT_PX);
+	// grd.addColorStop(0, '#8ED6FF');
+	// grd.addColorStop(1, '#004CB3');
+	// this.label.fill = grd;
+	// this.scoreText.fill = grd;
+
+	// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+	// this.label.stroke = '#000';
+	// this.label.strokeThickness = 3;
+
+	this.timerEvent = null;
+};
+
+StageTimer.prototype.start = function() {
+	this.timeLeft = this.stageTimerSec;
+	this.printTime();
+	if(this.timerEvent === null)
+		this.timerEvent = game.time.events.loop(Phaser.Timer.SECOND, this.updateTimer, this);
+}
+
+StageTimer.prototype.pause = function() {
+}
+
+StageTimer.prototype.stop = function() {
+	if(this.timerEvent)
+		this.removeTimer();
+	this.timerText.text = "시간 끝";
+}
+
+StageTimer.prototype.updateTimer = function() {
+	this.timeLeft--;
+	if(this.timeLeft === 0) {
+		this.stop();
+		this.onTimeOver();
+	} else {
+		this.printTime();
+	}
+}
+
+StageTimer.prototype.printTime = function() {
+	this.timerText.text = this.timeLeft.toString() + "초";
+}
+
+StageTimer.prototype.removeTimer = function() {
+	game.time.events.remove(this.timerEvent);
+	this.timerEvent = null;
+}
+
+
+StageTimer.FONT_HEIGHT_PX		= 70;
+
+StageTimer.DEFAULT_TEXT_FONT	= {
+	font: "38px Arial",
+	align: "center",
+	boundsAlignH: "center",		// left, center. right
+	boundsAlignV: "middle", 	// top, middle, bottom
+	fill: "#fff"
+};

src/game/mouse/card_matching/dude_card.js

@@ -1,8 +1,10 @@
-DudeCard = function(game, col, row) {
+DudeCard = function(game, col, row, cardCharacters, clickedHandler) {
 	this.cardIndex = row * DudeCard.MAX_CARD_COLUMN_NO + col;
 	this.columnNo = col;
 	this.rowNo = row;
+	this.cardCharacters = cardCharacters;
 	this.characterNo = 0;
+	this.clickedHandler = clickedHandler;
 
 	this.isActivated = true;
 
@@ -41,7 +43,7 @@ DudeCard.prototype.onDown = function(sprite) {
 	if(this.isActivated == false)
 		return;
 
-	cardClicked(this.columnNo, this.rowNo);
+	this.clickedHandler(this.columnNo, this.rowNo);
 
 	/*
 	if(this.backPaper.alpha == 0) {
@@ -60,7 +62,7 @@ DudeCard.prototype.setScale = function(size) {
 
 DudeCard.prototype.setCharacter = function(characterNo) {
 	this.characterNo = characterNo;
-	this.character.loadTexture(card_characters[characterNo]);
+	this.character.loadTexture(this.cardCharacters[characterNo]);
 }
 
 DudeCard.prototype.getCharacter = function() {

src/game/mouse/card_matching/game.js

@@ -16,7 +16,7 @@ var Game = {
 			Phaser.KeyCode.ESC,	// keyCode
 			null,	// keyDownHandler
 			(function() { this.back(); }).bind(this),	// keyUpHandler
-			"space invaders"	// callerClassName
+			"card matching"	// callerClassName
 		);
 
 		// top ui
@@ -35,11 +35,24 @@ var Game = {
 			sessionStorageManager.setIsNewBestRecrd(true);
 			// screenBottomUI.printLeftTextWithAppHighestRecord(sessionStorageManager.getAppHighestRecord());
 		});
+		this.stageTimer = new StageTimer(
+			Game.GAME_TIME_SEC,
+			(function() {
+				// self.isOnStage = false;
+
+				// self.goResult();
+				this.gameOver();
+			}).bind(this)
+		);
 
 		this.initVariables();
 
 
 		// game stage
+		game.stage.backgroundColor = '#4d4d4d';
+		graphics = game.add.graphics(0, 0);
+
+		this.plusScoreGroup = game.add.group();
 
 
 		// bottom ui
@@ -49,7 +62,7 @@ var Game = {
 		screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
 
 
-		// this.startGame();
+		this.startGame();
 		// // this.countDown();
 	},
 
@@ -87,12 +100,13 @@ var Game = {
 		this.popupTween = null;
 		this.startButton;
 
-		this.leftTimeText;
-		this.leftTimeSec;
+		// this.leftTimeText;
+		// this.leftTimeSec;
 
 		this.timeEvent;
 		this.gameTimeEvents = [];
 
+
 		this.cardCharacterIndexList;
 		this.randStageCharacterList;
 		this.randCharacterListAfterShuffling;
@@ -120,7 +134,13 @@ var Game = {
 		for(var i = 0; i < DudeCard.MAX_CARD_COLUMN_NO; i++){
 			for(var j = 0; j < DudeCard.MAX_CARD_ROW_NO; j++) {
 				var index = j * DudeCard.MAX_CARD_COLUMN_NO + i;
-				this.cards[index] = new DudeCard(game, i, j);
+				this.cards[index] = new DudeCard(
+					game, i, j,
+					this.card_characters,
+					(function(col, row) {
+						this.cardClicked(col, row);
+					}).bind(this)
+				);
 				this.cards[index].setScale(0.5);
 				this.cards[index].hide();
 			}
@@ -134,39 +154,46 @@ var Game = {
 	},
 
 
-
-
-/*
-	gameOver() {
-		this.updateHighscore();
-
-		this.activatedCardColumnNo = 0;
-		this.activatedCardRowNo = 0;
-		this.initCards();
-
-		game.time.events.remove(timeEvent);
-		this.hideSelectedCard();
-
-		for(var i = 0; i < gameTimeEvents.length; i++) {
-			game.time.events.remove(gameTimeEvents[i]);
-		}
-		gameTimeEvents = [];
-
-		// startButton.alpha = 1;
-		// startButton.inputEnabled = true;
+	back: function() {
+		sessionStorageManager.resetPlayingAppData();
+		location.href = '../../web/client/menu_app.html';
 	},
 
-	startGame() {
+	countDown() {
+		const style = { font: "bold 200px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };
+		this.countDownText = game.add.text(0, 0, "", style);
+		this.countDownText.setTextBounds(0, 0, game.world.width, game.world.height);
+		this.countDownText.stroke = "#333";
+		this.countDownText.strokeThickness = 50;
+
+		this.countDownNumber = 3;
+		if(isDebugMode())
+			this.countDownNumber = 1;
+		this.tweenCountDown();
+	},
+
+	tweenCountDown() {
+		if(this.countDownNumber === 0) {
+			this.startGame();
+			return;
+		}
+
+		this.countDownText.text = this.countDownNumber.toString();
+		this.countDownText.alpha = 1;
+
+		var countDownTween = game.add.tween(this.countDownText);
+		countDownTween.to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true);
+		countDownTween.onComplete.add(this.tweenCountDown, this);
+
+		this.countDownNumber--;
+	},
+
+	startGame: function() {
 		this.playingStageNo = 1;
-		this.leftTimeSec = 0;	// INIT_LEFT_TIME_MIN * 60;
-
-		this.score = 0;
-		this.updateScore();
-
-		// startButton.alpha = 0;
-		// startButton.inputEnabled = false;
+		// this.leftTimeSec = 0;	// INIT_LEFT_TIME_MIN * 60;
 
 		this.startStage();
+		this.stageTimer.start();
 	},
 
 	startStage() {
@@ -178,6 +205,8 @@ var Game = {
 
 		this.initCards();
 		this.initOpenCardInfo();
+
+		/*
 		var bonusTime = this.getBonusTime();
 		if(this.playingStageNo == 1)
 			this.showStageNotice(this.playingStageNo + "단계 시작 (제한 시간 : " + this.bonusTime + "초)");
@@ -187,39 +216,17 @@ var Game = {
 			this.showStageNotice(this.playingStageNo + "단계 시작 (보너스 +" + this.bonusTime + "초)");
 
 		this.leftTimeSec += this.bonusTime;
-		this.updateLeftTime();
+		*/
 
-		if(this.playingStageNo == 1)
-			this.timeEvent = game.time.events.loop(1000, this.updateLeftTime, this);
-	},
+		// this.leftTimeSec = Game.GAME_TIME_SEC;
+		// this.updateLeftTime();
 
-	getBonusTime() {
-		if(this.playingStageNo == 1)
-			return DudeCard.INIT_LEFT_TIME_MIN * 60;
-
-		var bonusTime = 0;
-		if(this.playingStageNo < 10)
-			bonusTime = Math.floor(10 / this.playingStageNo) * 10;
-
-		return bonusTime;
-	},
-
-	updateLeftTime() {
-		this.leftTimeSec--;
-		this.leftTimeText.text = this.leftTimeSec;
-		if(this.leftTimeSec == 0) {
-			showStageNotice("시간 종료");
-			gameOver();
-		}
-	},
-
-	showStageNotice(text) {
-		this.stageNoticeText.alpha = 0;
-		this.stageNoticeText.text = text;
-		this.animateTextAlpha(stageNoticeText, 1, 0, 1000, Phaser.Easing.Linear.None);
+		// if(this.playingStageNo == 1)
+		// 	this.timeEvent = game.time.events.loop(1000, this.updateLeftTime, this);
 	},
 
 	setOpenCardColumnRow() {
+		console.log("setOpenCardColumnRow : " + this.playingStageNo);
 		switch(this.playingStageNo) {
 			case 1:
 				this.activatedCardColumnNo = 2;
@@ -256,18 +263,18 @@ var Game = {
 		this.randStageCharacterList = Phaser.ArrayUtils.shuffle(this.cardCharacterIndexList);
 
 		var characterListBeforeShuffling = [];
-		for(var i = 0; i < activatedCardCount; i++) {
+		for(var i = 0; i < this.activatedCardCount; i++) {
 			var characterIndex = Math.floor(i / 2);
 			characterListBeforeShuffling[i] = this.randStageCharacterList[characterIndex];
 		}
 		this.randCharacterListAfterShuffling = Phaser.ArrayUtils.shuffle(characterListBeforeShuffling);
 
 		var randCharacterIndex = 0;
-		for(var i = 0; i < MAX_CARD_COLUMN_NO; i++) {
-			for(var j = 0; j < MAX_CARD_ROW_NO; j++) {
-				var index = j * MAX_CARD_COLUMN_NO + i;
-				if(i < activatedCardColumnNo && j < activatedCardRowNo) {
-					this.cards[index].show(activatedCardColumnNo, activatedCardRowNo);
+		for(var i = 0; i < DudeCard.MAX_CARD_COLUMN_NO; i++) {
+			for(var j = 0; j < DudeCard.MAX_CARD_ROW_NO; j++) {
+				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].flipToBack();
 					// cards[index].setCharacter(1);
 					// cards[index].setCharacter(game.rnd.integerInRange(0, card_characters_count - 1));
@@ -287,25 +294,13 @@ var Game = {
 		this.openCardInfoCharacter[1]	= -1;
 	},
 
+	hideSelectedCard() {
+		this.isCardSelected = false;
 
-	showOpenCardInfo() {
-		console.log(
-			"card 1 (" + this.openCardInfoIndex[0] + ", : " + this.openCardInfoCharacter[0] + "), card 2 ("
-			 + this.openCardInfoIndex[1] + ", " + this.openCardInfoCharacter[1] + ")");
-	},
+		this.card_selected_edge.x = -100;
+		this.card_selected_edge.y = -100;
 
-	isCardSelectEdgeActivated() {
-		return this.isCardSelected;
-	},
-
-	isCardSelectEdgeAll() {
-		if(this.openCardInfoIndex[0] < 0)
-			return false;
-
-		if(this.openCardInfoIndex[1] < 0)
-			return false;
-
-		return true;
+		this.card_selected_edge.alpha = 0;
 	},
 
 	cardClicked(col, row) {
@@ -351,6 +346,75 @@ var Game = {
 	},
 
 
+	isSelectedBefore(col, row) {
+		if(this.selectedCardCol == col && this.selectedCardRow == row)
+			return true;
+
+		return false;
+	},
+
+	getCardIndex(col, row) {
+		return index = row * DudeCard.MAX_CARD_COLUMN_NO + col;
+	},
+
+	isFrontCard(col, row) {
+		return this.cards[this.getCardIndex(col, row)].isFront();
+	},
+
+	flipToFront(col, row) {
+		var index = row * DudeCard.MAX_CARD_COLUMN_NO + col;
+		this.cards[this.getCardIndex(col, row)].flipToFront();
+	},
+
+	flipToBack(col, row) {
+		this.cards[this.getCardIndex(col, row)].flipToBack();
+	},
+
+	clearCards(col, row) {
+		var index = this.getCardIndex(col, row);
+		this.cards[index].hide();
+		index = this.selectedCardRow * DudeCard.MAX_CARD_COLUMN_NO + this.selectedCardCol;
+		this.cards[index].hide();
+	},
+
+	resetCards(col, row) {
+		var index = this.getCardIndex(col, row);
+		this.cards[index].show(col, row);
+		index = this.selectedCardRow * DudeCard.MAX_CARD_COLUMN_NO + this.selectedCardCol;
+		this.cards[index].hide(this.selectedCardCol, this.selectedCardRow);
+	},
+
+	showSelectedCard(col, row) {
+		this.isCardSelected = true;
+
+		var index = this.getCardIndex(col, row);
+		this.card_selected_edge.x = this.cards[index].x;
+		this.card_selected_edge.y = this.cards[index].y;
+
+		this.card_selected_edge.alpha = 1;
+	},
+
+	showOpenCardInfo() {
+		console.log(
+			"card 1 (" + this.openCardInfoIndex[0] + ", : " + this.openCardInfoCharacter[0] + "), card 2 ("
+			 + this.openCardInfoIndex[1] + ", " + this.openCardInfoCharacter[1] + ")");
+	},
+
+	isCardSelectEdgeActivated() {
+		return this.isCardSelected;
+	},
+
+	isCardSelectEdgeAll() {
+		if(this.openCardInfoIndex[0] < 0)
+			return false;
+
+		if(this.openCardInfoIndex[1] < 0)
+			return false;
+
+		return true;
+	},
+
+
 	isSameCharacterCard() {
 		if(this.openCardInfoIndex[0] < 0 || this.openCardInfoIndex[1] < 0)
 			return false;
@@ -362,70 +426,54 @@ var Game = {
 	},
 
 	clearOpenedTwoCards() {
-		var card1 = this.cards[openCardInfoIndex[0]];
-		resetOpenCardInfo(card1.getColumnNo(), card1.getRowNo());
+		console.log(this.openCardInfoIndex[0]);
+		var card1 = this.cards[this.openCardInfoIndex[0]];
+		this.resetOpenCardInfo(card1.getColumnNo(), card1.getRowNo());
 		this.reservedHideCard[0] = card1;
 
-		var card2 = this.cards[openCardInfoIndex[1]];
-		resetOpenCardInfo(card2.getColumnNo(), card2.getRowNo());
+		var card2 = this.cards[this.openCardInfoIndex[1]];
+		this.resetOpenCardInfo(card2.getColumnNo(), card2.getRowNo());
 		this.reservedHideCard[1] = card2;
 
 		// to do : show card 2 (flip to front) and wait 1 sec
 		// to do : hide card 1, card 2
 		// to do : add score, score point animation
-		var tempPlusScore = new PlusScore(card2.x, card2.y, 10 * this.playingStageNo);
+		var tempPlusScore = new PlusScore(card2.x, card2.y, this.getScore());
 		this.plusScoreGroup.add(tempPlusScore);
 
 		// card1.hide();
 		// card2.hide();
 		var hideOpenedCardTimeEvent = game.time.events.add(Phaser.Timer.SECOND * 0.5, this.hideOpenedCard, this);
-		this.gameTimeEvents[gameTimeEvents.length + 1] = hideOpenedCardTimeEvent;
+		this.gameTimeEvents[this.gameTimeEvents.length + 1] = hideOpenedCardTimeEvent;
 	},
 
 	hideOpenedCard() {
 		this.reservedHideCard[0].hide();
 		this.reservedHideCard[1].hide();
 
-		this.addScore();
-		this.updateScore();
+		// this.addScore();
+		// this.updateScore();
+		scoreManager.plusScore(this.getScore());
 
 		// to do : check clear stage
 		this.clearedCardCount += 2;
-		if(activatedCardCount == clearedCardCount) {
-			this.showStageNotice(this.playingStageNo + "단계 완료");
+		if(this.activatedCardCount == this.clearedCardCount) {
+			// this.showStageNotice(this.playingStageNo + "단계 완료");
 			this.playingStageNo++;
 
 			var startStageTimeEvent = game.time.events.add(Phaser.Timer.SECOND * 1, this.startStage, this);
-			gameTimeEvents[gameTimeEvents.length + 1] = startStageTimeEvent;
+			this.gameTimeEvents[this.gameTimeEvents.length + 1] = startStageTimeEvent;
 		}
 	},
 
-	addScore() {
-		this.score += 10 * this.playingStageNo;
-	},
-
-	updateScore() {
-		this.scoreText.text = this.score;
-	},
-
-	updateHighscore() {
-		if(this.score > this.highscore) {
-			this.highscore = this.score;
-			this.highscoreText.text = this.highscore;
-
-			showStageNotice("!!! 최고 점수 갱신 !!!");
-		}
-	},
-
-
 	resetOpenedCard() {
-		var card1 = this.cards[openCardInfoIndex[0]];
+		var card1 = this.cards[this.openCardInfoIndex[0]];
 		if(card1 == null)
 			return;
 		this.resetOpenCardInfo(card1.getColumnNo(), card1.getRowNo());
 		card1.flipToBack();
 
-		var card2 = this.cards[openCardInfoIndex[1]];
+		var card2 = this.cards[this.openCardInfoIndex[1]];
 		if(card2 == null)
 			return;
 		this.resetOpenCardInfo(card2.getColumnNo(), card2.getRowNo());
@@ -435,7 +483,7 @@ var Game = {
 
 	resetOpenedTwoCards() {
 		var resetOpenedCardTimeEvent = game.time.events.add(Phaser.Timer.SECOND * 0.5, this.resetOpenedCard, this);
-		this.gameTimeEvents[gameTimeEvents.length + 1] = resetOpenedCardTimeEvent;
+		this.gameTimeEvents[this.gameTimeEvents.length + 1] = resetOpenedCardTimeEvent;
 	},
 
 
@@ -444,7 +492,7 @@ var Game = {
 		var cardIndex = this.getCardIndex(col, row);
 
 		for(var i = 0; i < 2; i++) {
-			if(openCardInfoIndex[i] < 0) {
+			if(this.openCardInfoIndex[i] < 0) {
 				this.openCardInfoIndex[i] = this.cards[cardIndex].getCardIndex();
 				this.openCardInfoCharacter[i] = this.cards[cardIndex].getCharacter();
 
@@ -474,115 +522,25 @@ var Game = {
 		return false;
 	},
 
-
-
-
-	isSelectedBefore(col, row) {
-		if(this.selectedCardCol == col && this.selectedCardRow == row)
-			return true;
-
-		return false;
+	getScore: function() {
+		return this.playingStageNo * 10;
 	},
 
-	getCardIndex(col, row) {
-		return index = row * MAX_CARD_COLUMN_NO + col;
-	},
-
-	isFrontCard(col, row) {
-		return this.cards[getCardIndex(col, row)].isFront();
-	},
-
-	flipToFront(col, row) {
-		var index = row * MAX_CARD_COLUMN_NO + col;
-		this.cards[getCardIndex(col, row)].flipToFront();
-	},
-
-	flipToBack(col, row) {
-		this.cards[getCardIndex(col, row)].flipToBack();
-	},
-
-	clearCards(col, row) {
-		var index = getCardIndex(col, row);
-		this.cards[index].hide();
-		index = this.selectedCardRow * DudeCard.MAX_CARD_COLUMN_NO + this.selectedCardCol;
-		this.cards[index].hide();
-	},
-
-	resetCards(col, row) {
-		var index = this.getCardIndex(col, row);
-		this.cards[index].show(col, row);
-		index = this.selectedCardRow * DudeCard.MAX_CARD_COLUMN_NO + this.selectedCardCol;
-		this.cards[index].hide(this.selectedCardCol, this.selectedCardRow);
-	},
-
-	showSelectedCard(col, row) {
-		this.isCardSelected = true;
-
-		var index = this.getCardIndex(col, row);
-		this.card_selected_edge.x = this.cards[index].x;
-		this.card_selected_edge.y = this.cards[index].y;
-
-		this.card_selected_edge.alpha = 1;
-	},
-*/
-
-	hideSelectedCard() {
-		this.isCardSelected = false;
-
-		this.card_selected_edge.x = -100;
-		this.card_selected_edge.y = -100;
-
-		this.card_selected_edge.alpha = 0;
-	}
 
 
 
-
-/*
-	back: function() {
-		sessionStorageManager.resetPlayingAppData();
-		location.href = '../../web/client/menu_app.html';
-	},
-
-	initListeners: function() {
-	},
-
-	countDown() {
-		const style = { font: "bold 200px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };
-		this.countDownText = game.add.text(0, 0, "", style);
-		this.countDownText.setTextBounds(0, 0, game.world.width, game.world.height);
-		this.countDownText.stroke = "#333";
-		this.countDownText.strokeThickness = 50;
-
-		this.countDownNumber = 3;
-		if(isDebugMode())
-			this.countDownNumber = 1;
-		this.tweenCountDown();
-	}
-
-	tweenCountDown() {
-		if(this.countDownNumber === 0) {
-			this.startGame();
-			return;
-		}
-
-		this.countDownText.text = this.countDownNumber.toString();
-		this.countDownText.alpha = 1;
-
-		var countDownTween = game.add.tween(this.countDownText);
-		countDownTween.to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true);
-		countDownTween.onComplete.add(this.tweenCountDown, this);
-
-		this.countDownNumber--;
-	}
-
-	startGame: function() {
-		// activate first alien
-		this.alienTimer.start();
-	},
-
 	gameOver: function() {
-		this.alienTimer.stop();
+		this.activatedCardColumnNo = 0;
+		this.activatedCardRowNo = 0;
+		this.initCards();
+
+		game.time.events.remove(this.timeEvent);
+		this.hideSelectedCard();
+
+		for(var i = 0; i < this.gameTimeEvents.length; i++) {
+			game.time.events.remove(this.gameTimeEvents[i]);
+		}
+		this.gameTimeEvents = [];
 
 		var gameOverText = new GameOverText();
 
@@ -593,19 +551,8 @@ var Game = {
 		location.href = '../../web/client/result.html';
 	},
 
-	activateNextAlien: function() {
-		this.alienTimer.next();
-	},
-
-	getScore: function() {
-		return (this.alienTimer.activatedAlienIndex) * 2;
-	},
-
-	onAlienEscaped: function() {
-		heartManager.breakHearts(1);
-	}
-
-*/
 }
 
+
+Game.GAME_TIME_SEC				= 6;
 Game.GAME_OVER_WAIT_TIME_MS		= 2000;

src/web/client/card_matching.html

@@ -31,6 +31,7 @@
 		<script src="../../game/lib/screen_bottom_ui.js"></script>
 		<script src="../../game/lib/experience_app_timer.js"></script>
 		<script src="../../game/lib/game_over_text.js"></script>
+		<script src="../../game/lib/stage_timer.js"></script>
 
 		<!-- Space Invaders : source files -->
 		<script src="../../game/mouse/card_matching/define_variables.js"></script>