Add: card matching combo bonus

src/game/lib/text/combo_text.js

@@ -0,0 +1,81 @@
+ComboText.prototype = Object.create(Phaser.Text.prototype);
+ComboText.constructor = ComboText;
+
+function ComboText() {
+	Phaser.Text.call(
+		this, game,
+		game.world.width / 2,
+		ComboText.TEXT_POS_Y,
+		"",
+		ComboText.DEFAULT_TEXT_FONT
+	);
+
+	this.anchor.set(0.5);
+	this.inputEnabled = false;
+
+	var grd = this.context.createLinearGradient(0, 0, 0, this.height);
+	grd.addColorStop(0, '#004CB3');
+	grd.addColorStop(1, '#8ED6FF');
+	// grd.addColorStop(0, '#FFD68E');
+	// grd.addColorStop(1, '#B34C00');
+	this.fill = grd;
+	// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+	this.stroke = '#000';
+	this.strokeThickness = 10;
+
+	game.add.existing(this);
+
+	this.hide();
+};
+
+ComboText.prototype.show = function(comboCount, comboBonus) {
+	this.hide();
+
+	var message = comboCount + "콤보 : +" + NumberUtil.numberWithCommas(comboBonus) + " 점";
+	this.text = message;
+
+	this.alpha = 1;
+	this.scale.set(1);
+
+	this.tweenScale = game.add.tween(this.scale);
+	this.tweenScale.to({x:0.7, y:0.7}, ComboText.TWEEN_SCALE_TIME, Phaser.Easing.Bounce.Out, true, 0);
+	this.tweenScale.onComplete.add(this.fadeOut, this);
+	this.tweenScale.start();
+}
+
+ComboText.prototype.fadeOut = function(comboCount) {
+	this.tweenFade = game.add.tween(this);
+	this.tweenFade.to({alpha:0}, ComboText.TWEEN_FADE_OUT_TIME, Phaser.Easing.Quadratic.In, true, 0);
+	this.tweenFade.onComplete.add(this.hide, this);
+	this.tweenFade.start();
+}
+
+ComboText.prototype.hide = function() {
+	if(this.tweenFade != null) {
+		this.tweenFade.stop();
+		this.tweenFade = null
+	}
+
+	if(this.tweenScale != null) {
+		this.tweenScale.stop();
+		this.tweenScale = null;
+	}
+
+	this.alpha = 0;
+	this.scale.set(1);
+}
+
+
+
+ComboText.DEFAULT_TEXT_FONT = {
+	font: "bold 100px Arial",
+	fontStyle: "italic",
+	boundsAlignH: "center",		// left, center. right
+	boundsAlignV: "middle", 	// top, middle, bottom
+	fill: "#fff"
+};
+
+ComboText.TEXT_POS_Y				= 120;
+
+ComboText.TWEEN_SCALE_TIME			= 700;
+ComboText.TWEEN_FADE_OUT_TIME		= 1000;

src/game/mouse/card_matching/game.js

@@ -56,6 +56,7 @@ var Game = {
 
 		this.initVariables();
 
+		this.comboText = new ComboText();
 
 		// game stage
 		game.stage.backgroundColor = '#4d4d4d';
@@ -105,6 +106,8 @@ var Game = {
 		this.cardCharacterIndexList;
 		this.randStageCharacterList;
 		this.randCharacterListAfterShuffling;
+
+		this.comboCount = 0;
 	},
 
 	initCardVariables: function() {
@@ -361,10 +364,14 @@ var Game = {
 			this.setOpenCardInfo(col, row);
 
 			if(this.isCardSelectEdgeAll() == true) {	// selected 2 cards
-				if(this.isSameCharacterCard() == true)		// selected same cards
+				if(this.isSameCharacterCard() == true) {		// selected same cards
 					this.clearSameTwoCards();
-				else										// selected different cards
+					this.increaseComboCount();
+					this.addComboBonus();
+				} else {										// selected different cards
 					this.resetDifferentTwoCards();
+					this.resetComboBonus();
+				}
 			}
 		}
 
@@ -500,6 +507,24 @@ var Game = {
 
 
 
+	increaseComboCount: function() {
+		this.comboCount++;
+	},
+
+	addComboBonus: function() {
+		if(this.comboCount < 2)
+			return;
+
+		var comboBonusScore = this.comboCount * 10;
+		this.comboText.show(this.comboCount, comboBonusScore);
+	},
+
+	resetComboBonus: function() {
+		this.comboCount = 0;
+	},
+
+
+
 	setOpenCardInfo: function(col, row) {
 		var cardIndex = this.getCardIndex(col, row);
 

src/web/client/card_matching.html

@@ -45,6 +45,7 @@
 		<script src="../../game/lib/util/number_util.js"></script>
 		<script src="../../game/lib/util/record_util.js"></script>
 
+		<script src="../../game/lib/text/combo_text.js"></script>
 		<script src="../../game/lib/text/input_type_text.js?update_date=191224"></script>
 		<script src="../../game/lib/text/time_over_text.js?update_date=191225"></script>
 		<script src="../../game/lib/text/score_board.js?update_date=191224"></script>