Add: card matching - basic immigration

src/game/login/login.js

@@ -50,7 +50,7 @@ var Login = {
 
 	makeMaestroNameText: function(x, y) {
 		this.makeTextField(x, y, "마에스트로 계정 :");
-		this.inputTextMaestroName = this.makeInputTypeText(x, y, "jisangs");
+		this.inputTextMaestroName = this.makeInputTypeText(x, y, "삼화초");
 	},
 
 	makeNameText: function(x, y) {

src/game/mouse/card_matching/define_variables.js

@@ -0,0 +1,2 @@
+let scoreManager = new ScoreManager();
+let heartManager = new HeartManager();

src/game/mouse/card_matching/dude_card.js

@@ -0,0 +1,121 @@
+DudeCard = function(game, col, row) {
+	this.cardIndex = row * DudeCard.MAX_CARD_COLUMN_NO + col;
+	this.columnNo = col;
+	this.rowNo = row;
+	this.characterNo = 0;
+
+	this.isActivated = true;
+
+	this.backupScale = 1;
+
+	Phaser.Sprite.call(this, game, DudeCard.CARD_INITIAL_POSITION_X, DudeCard.CARD_INITIAL_POSITION_Y, 'card_front');
+	this.anchor.set(0.5);
+	this.scale.set(1);
+	this.smoothed = false;
+
+	this.character = game.add.sprite(0, 0, 'commoner');
+	this.character.anchor.set(0.5);
+	this.character.scale.set(7);
+	this.character.smoothed = false;
+	this.addChild(this.character);
+
+	this.backPaper = game.add.sprite(0, 0, 'card_back');
+	this.backPaper.anchor.set(0.5);
+	this.backPaper.scale.set(1);
+	this.backPaper.smoothed = false;
+	this.backPaper.alpha = 0;
+	this.addChild(this.backPaper);
+
+	this.inputEnabled = true;
+	this.events.onInputDown.add(this.onDown, this);
+
+	game.add.existing(this);
+}
+
+DudeCard.prototype = Object.create(Phaser.Sprite.prototype);
+DudeCard.prototype.constructor = DudeCard;
+DudeCard.prototype.update = function() {
+}
+
+DudeCard.prototype.onDown = function(sprite) {
+	if(this.isActivated == false)
+		return;
+
+	cardClicked(this.columnNo, this.rowNo);
+
+	/*
+	if(this.backPaper.alpha == 0) {
+		this.flipToFront();
+	} else {
+		this.flipToBack();
+	}
+	*/
+}
+
+
+DudeCard.prototype.setScale = function(size) {
+	this.scale.set(size);
+	this.backupScale = size;
+}
+
+DudeCard.prototype.setCharacter = function(characterNo) {
+	this.characterNo = characterNo;
+	this.character.loadTexture(card_characters[characterNo]);
+}
+
+DudeCard.prototype.getCharacter = function() {
+	return this.characterNo;
+}
+
+DudeCard.prototype.getCardIndex = function() {
+	return this.cardIndex;
+}
+
+DudeCard.prototype.getColumnNo = function() {
+	return this.columnNo;
+}
+
+DudeCard.prototype.getRowNo = function() {
+	return this.rowNo;
+}
+
+
+DudeCard.prototype.isFront = function() {
+	if(this.backPaper.alpha == 0)
+		return true;
+
+	return false;
+}
+
+DudeCard.prototype.flipToFront = function() {
+	this.backPaper.alpha = 0;
+}
+
+DudeCard.prototype.flipToBack = function() {
+	this.backPaper.alpha = 1;
+}
+
+DudeCard.prototype.show = 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 + 70 - (((openCardRowNo - 1) / 2) - this.rowNo) * 160;
+}
+
+DudeCard.prototype.hide = function() {
+	this.isActivated = false;
+	this.alpha = 0;
+
+	this.x = DudeCard.CARD_INITIAL_POSITION_X;
+	this.y = DudeCard.CARD_INITIAL_POSITION_Y;
+}
+
+
+DudeCard.MAX_CARD_COLUMN_NO		= 5;
+DudeCard.MAX_CARD_ROW_NO		= 4;
+
+DudeCard.CARD_INITIAL_POSITION_X	= -100;
+DudeCard.CARD_INITIAL_POSITION_Y	= -100;
+
+DudeCard.INIT_LEFT_TIME_MIN			= 2;

src/game/mouse/card_matching/game.js

@@ -0,0 +1,611 @@
+var Game = {
+
+	create: function() {
+		this.game.stage.backgroundColor = "#000000";	// '#4d4d4d';
+
+		sessionStorageManager.setIsNewAppHighestRecord(false);
+
+		var experienceAppTimer = new ExperienceAppTimer();
+		experienceAppTimer.setTimeOverListener(
+			(function() { this.gameOver(); }).bind(this)
+		);
+
+		// keyboard shortcut
+		this.keyboardShortcut = new KeyboardShortcut();
+		this.keyboardShortcut.addCallback(
+			Phaser.KeyCode.ESC,	// keyCode
+			null,	// keyDownHandler
+			(function() { this.back(); }).bind(this),	// keyUpHandler
+			"space invaders"	// callerClassName
+		);
+
+		// top ui
+		var screenTopUI = new ScreenTopUI();
+		screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) );
+		screenTopUI.makeFullScreenButton();
+
+		var scoreBoard = new ScoreBoard();
+		scoreManager.addOnChangeScoreListener( function(score) {
+			sessionStorageManager.setRecord(score);
+			scoreBoard.printScore(NumberUtil.numberWithCommas(score));
+		});
+		scoreManager.addOnChangeHighScoreListener( function(highScore) {
+			// console.log(highScore);
+			// sessionStorageManager.setAppHighestRecord(highScore);
+			sessionStorageManager.setIsNewBestRecrd(true);
+			// screenBottomUI.printLeftTextWithAppHighestRecord(sessionStorageManager.getAppHighestRecord());
+		});
+
+		this.initVariables();
+
+
+		// game stage
+
+
+		// bottom ui
+		var screenBottomUI = new ScreenBottomUI();
+		screenBottomUI.printLeftTextWithAppHighestRecord(sessionStorageManager.getAppHighestRecord());
+		screenBottomUI.printCenterText(sessionStorageManager.getPlayingAppKoreanName());
+		screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
+
+
+		// this.startGame();
+		// // this.countDown();
+	},
+
+	initVariables() {
+		this.cards = [];
+		this.card_selected_edge;
+		this.card_characters = [];
+		this.card_characters_count;
+		this.initCardVariables();
+
+
+		this.playingStageNo;
+		this.activatedCardColumnNo;
+		this.activatedCardRowNo;
+		this.activatedCardCount;
+		this.clearedCardCount;
+
+		this.openCardInfoIndex = [];
+		this.openCardInfoCharacter = [];
+
+		this.reservedHideCard = [];
+
+		this.isCardSelected;
+		this.selectedCardCol;
+		this.selectedCardRow;
+
+		this.score;
+		this.scoreText;
+		this.highscore;
+		this.highscoreText;
+		this.plusScoreTextGroup;
+		this.stageNoticeText;
+
+		this.popup;
+		this.popupTween = null;
+		this.startButton;
+
+		this.leftTimeText;
+		this.leftTimeSec;
+
+		this.timeEvent;
+		this.gameTimeEvents = [];
+
+		this.cardCharacterIndexList;
+		this.randStageCharacterList;
+		this.randCharacterListAfterShuffling;
+	},
+
+	initCardVariables() {
+		this.card_characters[0] = 'commoner';
+		this.card_characters[1] = 'elf';
+		this.card_characters[2] = 'knight';
+		this.card_characters[3] = 'orc';
+		this.card_characters[4] = 'wizard';
+		this.card_characters[5] = 'halloween';
+		this.card_characters[6] = 'holiday_bunny';
+		this.card_characters[7] = 'patrick';
+		this.card_characters[8] = 'santa';
+		this.card_characters[9] = 'basketball';
+		this.card_characters[10] = 'football';
+		this.card_characters[11] = 'gym';
+		this.card_characters[12] = 'hockey';
+		this.card_characters[13] = 'soccer';
+		this.card_characters_count = this.card_characters.length;
+		this.cardCharacterIndexList = Phaser.ArrayUtils.numberArray(0, this.card_characters_count - 1);
+		console.log("cardCharacterIndexList : " + this.cardCharacterIndexList.length);
+
+		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].setScale(0.5);
+				this.cards[index].hide();
+			}
+		}
+
+		this.card_selected_edge = game.add.sprite(200, 400, 'card_edge');
+		this.card_selected_edge.anchor.set(0.5);
+		this.card_selected_edge.smoothed = false;
+		this.card_selected_edge.scale.set(0.5);
+		this.hideSelectedCard();
+	},
+
+
+
+
+/*
+	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;
+	},
+
+	startGame() {
+		this.playingStageNo = 1;
+		this.leftTimeSec = 0;	// INIT_LEFT_TIME_MIN * 60;
+
+		this.score = 0;
+		this.updateScore();
+
+		// startButton.alpha = 0;
+		// startButton.inputEnabled = false;
+
+		this.startStage();
+	},
+
+	startStage() {
+		this.isCardSelected = false;
+
+		this.setOpenCardColumnRow();
+		this.activatedCardCount = this.activatedCardColumnNo * this.activatedCardRowNo;
+		this.clearedCardCount = 0;
+
+		this.initCards();
+		this.initOpenCardInfo();
+		var bonusTime = this.getBonusTime();
+		if(this.playingStageNo == 1)
+			this.showStageNotice(this.playingStageNo + "단계 시작 (제한 시간 : " + this.bonusTime + "초)");
+		else if(this.bonusTime == 0)
+			this.showStageNotice(this.playingStageNo + "단계 시작");
+		else
+			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);
+	},
+
+	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);
+	},
+
+	setOpenCardColumnRow() {
+		switch(this.playingStageNo) {
+			case 1:
+				this.activatedCardColumnNo = 2;
+				this.activatedCardRowNo = 2;
+			break;
+			case 2:
+				this.activatedCardColumnNo = 3;
+				this.activatedCardRowNo = 2;
+			break;
+			case 3:
+			case 4:
+				this.activatedCardColumnNo = 4;
+				this.activatedCardRowNo = 2;
+			break;
+			case 5:
+			case 6:
+				this.activatedCardColumnNo = 4;
+				this.activatedCardRowNo = 3;
+			break;
+			case 7:
+			case 8:
+			case 9:
+				this.activatedCardColumnNo = 4;
+				this.activatedCardRowNo = 4;
+			break;
+			default:
+				this.activatedCardColumnNo = 5;
+				this.activatedCardRowNo = 4;
+			break;
+		}
+	},
+
+	initCards() {
+		this.randStageCharacterList = Phaser.ArrayUtils.shuffle(this.cardCharacterIndexList);
+
+		var characterListBeforeShuffling = [];
+		for(var i = 0; i < 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);
+					this.cards[index].flipToBack();
+					// cards[index].setCharacter(1);
+					// cards[index].setCharacter(game.rnd.integerInRange(0, card_characters_count - 1));
+					this.cards[index].setCharacter(this.randCharacterListAfterShuffling[randCharacterIndex]);
+					randCharacterIndex++;
+				} else {
+					this.cards[index].hide();
+				}
+			}
+		}
+	},
+
+	initOpenCardInfo() {
+		this.openCardInfoIndex[0]		= -1;
+		this.openCardInfoCharacter[0]	= -1;
+		this.openCardInfoIndex[1]		= -1;
+		this.openCardInfoCharacter[1]	= -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;
+	},
+
+	cardClicked(col, row) {
+		var index = this.getCardIndex(col, row);
+
+		if(this.isCardSelectEdgeActivated() == false) {		// card select edge is not activated
+			this.showSelectedCard(col, row);
+		} else {										// card select edge is activated
+			if(this.isSelectedBefore(col, row) == true) {
+				this.hideSelectedCard();
+
+				if(this.isFrontCard(col, row)) {
+					this.flipToBack(col, row);
+
+					if(this.isOpenedCard(col, row) == true) {
+						this.resetOpenCardInfo(col, row);
+					}
+				} else {
+					this.flipToFront(col, row);
+
+					if(this.isOpenedCard(col, row) == false) {
+						this.setOpenCardInfo(col, row);
+
+						if(this.isCardSelectEdgeAll() == true) {
+							if(this.isSameCharacterCard() == true) {
+								this.clearOpenedTwoCards();
+							} else {
+								this.resetOpenedTwoCards();
+							}
+						}
+					}
+				}
+			} else {
+				this.showSelectedCard(col, row);
+			}
+
+		}
+
+		// showOpenCardInfo();
+
+		this.selectedCardCol = col;
+		this.selectedCardRow = row;
+	},
+
+
+	isSameCharacterCard() {
+		if(this.openCardInfoIndex[0] < 0 || this.openCardInfoIndex[1] < 0)
+			return false;
+
+		if(this.openCardInfoCharacter[0] != this.openCardInfoCharacter[1])
+			return false;
+
+		return true;
+	},
+
+	clearOpenedTwoCards() {
+		var card1 = this.cards[openCardInfoIndex[0]];
+		resetOpenCardInfo(card1.getColumnNo(), card1.getRowNo());
+		this.reservedHideCard[0] = card1;
+
+		var card2 = this.cards[openCardInfoIndex[1]];
+		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);
+		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;
+	},
+
+	hideOpenedCard() {
+		this.reservedHideCard[0].hide();
+		this.reservedHideCard[1].hide();
+
+		this.addScore();
+		this.updateScore();
+
+		// to do : check clear stage
+		this.clearedCardCount += 2;
+		if(activatedCardCount == 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;
+		}
+	},
+
+	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]];
+		if(card1 == null)
+			return;
+		this.resetOpenCardInfo(card1.getColumnNo(), card1.getRowNo());
+		card1.flipToBack();
+
+		var card2 = this.cards[openCardInfoIndex[1]];
+		if(card2 == null)
+			return;
+		this.resetOpenCardInfo(card2.getColumnNo(), card2.getRowNo());
+		card2.flipToBack();
+
+	},
+
+	resetOpenedTwoCards() {
+		var resetOpenedCardTimeEvent = game.time.events.add(Phaser.Timer.SECOND * 0.5, this.resetOpenedCard, this);
+		this.gameTimeEvents[gameTimeEvents.length + 1] = resetOpenedCardTimeEvent;
+	},
+
+
+
+	setOpenCardInfo(col, row) {
+		var cardIndex = this.getCardIndex(col, row);
+
+		for(var i = 0; i < 2; i++) {
+			if(openCardInfoIndex[i] < 0) {
+				this.openCardInfoIndex[i] = this.cards[cardIndex].getCardIndex();
+				this.openCardInfoCharacter[i] = this.cards[cardIndex].getCharacter();
+
+				break;
+			}
+		}
+	},
+
+	resetOpenCardInfo(col, row) {
+		var cardIndex = this.getCardIndex(col, row);
+
+		for(var i = 0; i < 2; i++) {
+			if(this.openCardInfoIndex[i] == cardIndex) {
+				this.openCardInfoIndex[i] = -1;
+				this.openCardInfoCharacter[i] = -1;
+			}
+		}
+	},
+
+	isOpenedCard(col, row) {
+		var cardIndex = this.getCardIndex(col, row);
+		for(var i = 0; i < 2; i++) {
+			if(this.openCardInfoIndex[i] == cardIndex)
+				return true;
+		}
+
+		return false;
+	},
+
+
+
+
+	isSelectedBefore(col, row) {
+		if(this.selectedCardCol == col && this.selectedCardRow == row)
+			return true;
+
+		return false;
+	},
+
+	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();
+
+		var gameOverText = new GameOverText();
+
+		game.time.events.add(Phaser.Timer.SECOND * 2, this.goResult, this);
+	},
+
+	goResult: function() {
+		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_OVER_WAIT_TIME_MS		= 2000;

src/game/mouse/card_matching/loading.js

@@ -0,0 +1,111 @@
+var Loading = {
+
+	preload: function() {
+		// game.load.image('loadingbar', './image/phaser.png');
+	},
+
+	create: function() {
+		// let userID = sessionStorage.getItem("UserID");
+		// console.log("userID : " + userID);
+
+		// game.stage.backgroundColor = '#4d4d4d';
+
+		// //	Progress report
+  //   	this.textProgress = game.add.text(game.world.centerX, 100, '로딩중 . . .', textStyleBasic);
+		// this.textProgress.anchor.setTo(0.5, 0.4);
+		// this.textProgress.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+		// // Preload bar
+		// this.preloadBar = this.add.sprite(game.world.centerX, game.world.centerY, 'loadingbar');
+		// this.preloadBar.anchor.setTo(0.5);
+		// this.preloadBar.alpha = 0;
+
+		game.load.onFileComplete.add(this.fileComplete, this);
+		game.load.onLoadComplete.add(this.loadComplete, this);
+
+		this.startLoading();
+	},
+
+	startLoading: function() {
+		game.load.image('icon_fullscreen',	'../../../resources/image/icon/fullscreen_white.png');
+
+		// card
+		game.load.image('card_back', '../../../resources/image/ui/card_back.png');
+		game.load.image('card_front', '../../../resources/image/ui/card_front.png');
+		game.load.image('card_edge', '../../../resources/image/ui/card_selected.png');
+
+		// card character
+		game.load.image('commoner', '../../../resources/image/character/card_matching/fantasy/commoner.png');
+		game.load.image('elf', '../../../resources/image/character/card_matching/fantasy/elf.png');
+		game.load.image('knight', '../../../resources/image/character/card_matching/fantasy/knight.png');
+		game.load.image('orc', '../../../resources/image/character/card_matching/fantasy/orc.png');
+		game.load.image('wizard', '../../../resources/image/character/card_matching/fantasy/wizard.png');
+
+		game.load.image('halloween', '../../../resources/image/character/card_matching/holiday/halloween.png');
+		game.load.image('holiday_bunny', '../../../resources/image/character/card_matching/holiday/holiday_bunny.png');
+		game.load.image('patrick', '../../../resources/image/character/card_matching/holiday/patrick.png');
+		game.load.image('santa', '../../../resources/image/character/card_matching/holiday/santa.png');
+
+		game.load.image('basketball', '../../../resources/image/character/card_matching/sports/basketball.png');
+		game.load.image('football', '../../../resources/image/character/card_matching/sports/football.png');
+		game.load.image('gym', '../../../resources/image/character/card_matching/sports/gym.png');
+		game.load.image('hockey', '../../../resources/image/character/card_matching/sports/hockey.png');
+		game.load.image('soccer', '../../../resources/image/character/card_matching/sports/soccer.png');
+
+		// game.load.image('a', '../../../resources/image/icon/fullscreen_white.png');
+		// game.load.image('b', '../../../resources/image/icon/fullscreen_white.png');
+		// game.load.image('c', '../../../resources/image/icon/fullscreen_white.png');
+		// game.load.image('d', '../../../resources/image/icon/fullscreen_white.png');
+		// game.load.image('a', './image/phaser.png');
+		// game.load.image('b', './image/phaser.png');
+		// game.load.image('c', './image/phaser.png');
+		// game.load.image('d', './image/phaser.png');
+		// game.load.image('e', './image/phaser.png');
+		// game.load.image('g', './image/phaser.png');
+		// game.load.image('e', './image/phaser.png');
+		// game.load.image('f', './image/phaser.png');
+		// game.load.image('g', './image/phaser.png');
+		// game.load.image('h', './image/phaser.png');
+
+		// game.load.image('phaser', './image/phaser.png');
+		// game.load.spritesheet('button', './image/button_basic.png', 200, 100);
+		// game.load.image('star', './image/star_particle.png');
+		// game.load.image('medal_gold', './image/medal_gold.png');
+		// game.load.image('medal_silver', './image/medal_silver.png');
+		// game.load.image('medal_bronze', './image/medal_bronze.png');
+
+		game.load.start();
+	},
+
+	fileComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
+		// this.preloadBar.alpha = progress / 100;
+
+		// console.log('progress : ' + progress);
+
+		// text.setText("File Complete: " + progress + "% - " + totalLoaded + " out of " + totalFiles);
+
+		// var newImage = game.add.image(x, y, cacheKey);
+		// newImage.scale.set(0.3);
+
+		// x += newImage.width + 20;
+		// if (x > 700)
+		// {
+		// 	x = 32;
+		// 	y += 332;
+		// }
+	},
+
+	loadComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
+		// this.preloadBar.alpha = 1;
+
+		if(isDebugMode()) {
+			this.state.start('Game');
+			return;
+		}
+
+		this.state.start('Game');
+		// this.startMenu();
+		// this.startTypingTestStage();
+		// this.startTypingTestResult();
+	}
+}

src/game/mouse/card_matching/main.js

@@ -0,0 +1,16 @@
+/////////////////////////////
+// Main game
+
+const CONTENT_ID = "Card Matching";
+
+let game = new Phaser.Game(
+	GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
+	Phaser.CANVAS, CONTENT_ID,
+	this, false, false
+);
+
+game.state.add('Loading', Loading);
+game.state.start('Loading');
+
+game.state.add('Game', Game);
+// game.state.add('Menu', Menu);

src/game/mouse/card_matching/plus_score.js

@@ -0,0 +1,45 @@
+/////////////////////////////
+// PlusScore Class
+
+PlusScore = function(backupX, backupY, scoreValue) {
+	var textStyle = { font: "normal 24px Arial", fill: "#ff0", boundsAlignH: "center", boundsAlignV: "middle" };
+
+	Phaser.Text.call(this, game, backupX, backupY, "+" + scoreValue);
+
+	this.anchor.set(0.5);
+	// console.log(this);
+	// this.addColor("#ffffff", 0);
+	// this.setStyle(textStyle);
+
+	var grd = this.context.createLinearGradient(0, 0, 0, this.height);
+	grd.addColorStop(0, '#8ED6FF');   
+	grd.addColorStop(1, '#004CB3');
+	this.fill = grd;
+
+	// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+	this.stroke = '#fff';
+	this.strokeThickness = 5;
+	// this.addStrokeColor('#f00', 13);
+
+	this.inputEnabled = false;
+	game.time.events.add(Phaser.Timer.SECOND * 1, this.fadePlusScore, this);
+	game.time.events.add(Phaser.Timer.SECOND * 2, this.destroySelf, this);
+
+	game.add.existing(this);
+}
+
+PlusScore.prototype = Object.create(Phaser.Text.prototype);
+PlusScore.prototype.constructor = PlusScore;
+PlusScore.prototype.update = function() {
+	this.y -= 0.3;
+}
+
+PlusScore.prototype.fadePlusScore = function() {
+	game.add.tween(this).to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true);
+}
+
+PlusScore.prototype.destroySelf = function() {
+	this.destroy();
+}
+
+

src/game/mouse/card_matching/text_animation.js

@@ -0,0 +1,4 @@
+function animateTextAlpha(targetText, startAlpha, endAlpha, msTime, effectType) {
+	targetText.alpha = startAlpha;
+	game.add.tween(targetText).to({alpha: endAlpha}, msTime, effectType, true);
+}

src/web/client/card_matching.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>Card matching</title>
+
+
+		<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> -->
+		<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js"></script> -->
+		<script src="../../../resources/js/phaser.min.js"></script>
+
+		<!-- global source files -->
+		<script src="../../game/lib/session_storage_manager.js"></script>
+		<script src="../../game/lib/score_manager.js"></script>
+		<script src="../../game/lib/heart_manager.js"></script>
+		<script src="../../game/global/global_variables.js"></script>
+
+		<!-- library source files -->
+		<script src="../../game/lib/keyboard_shortcut.js"></script>
+		<script src="../../game/lib/number_util.js"></script>
+		<script src="../../game/lib/history_record_manager.js"></script>
+		<script src="../../game/lib/input_type_text.js"></script>
+		<script src="../../game/lib/score_board.js"></script>
+		<script src="../../game/lib/score_text.js"></script>
+		<script src="../../game/lib/heart_gauge.js"></script>
+		<script src="../../game/lib/button/round_rect_button.js"></script>
+		<script src="../../game/lib/button/back_button.js"></script>
+		<script src="../../game/lib/button/fullscreen_button.js"></script>
+		<script src="../../game/lib/db_connect_manager.js"></script>
+		<script src="../../game/lib/screen_top_ui.js"></script>
+		<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>
+
+		<!-- Space Invaders : source files -->
+		<script src="../../game/mouse/card_matching/define_variables.js"></script>
+		<script src="../../game/mouse/card_matching/loading.js"></script>
+
+		<script src="../../game/mouse/card_matching/dude_card.js"></script>
+		<script src="../../game/mouse/card_matching/plus_score.js"></script>
+
+		<script src="../../game/mouse/card_matching/game.js"></script>
+		<script src="../../game/mouse/card_matching/main.js"></script>
+
+
+		<style>
+			body{
+				padding: 0;
+				margin: 0;
+			}
+
+			canvas{
+				margin: 0 auto;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="Card Matching" style="text-align:center;" />
+	</body>
+</html>