Add: animation_note, guide notes

src/game/lib/text/animation_note.js

@@ -0,0 +1,66 @@
+AnimationNote.prototype = Object.create(Phaser.Text.prototype);
+AnimationNote.constructor = AnimationNote;
+
+function AnimationNote(x, y, note, colorString) {
+	// super(game, x, y, "+" + NumberUtil.numberWithCommas(score), AnimationNote.DEFAULT_TEXT_FONT);
+	Phaser.Text.call(this, game, x, y, note, AnimationNote.DEFAULT_TEXT_FONT);
+
+	if(this == undefined) {
+		this.destroy();
+		return;
+	}
+
+	this.anchor.set(0.5);
+	this.inputEnabled = false;
+
+	/*
+	var grd = this.context.createLinearGradient(0, 0, 0, this.height);
+	if(scoreValue < 0) {
+		grd.addColorStop(0, AnimationNote.COLOR_MINUS_SCORE_GRADATION_1);
+		grd.addColorStop(1, AnimationNote.COLOR_MINUS_SCORE_GRADATION_2);
+	} else {
+		grd.addColorStop(0, AnimationNote.COLOR_PLUS_SCORE_GRADATION_1);
+		grd.addColorStop(1, AnimationNote.COLOR_PLUS_SCORE_GRADATION_2);
+	}
+	this.fill = grd;
+	*/
+	this.fill = colorString;
+	// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+	this.stroke = '#000';
+	this.strokeThickness = 5;
+
+
+	var tweenAlpha = game.add.tween(this);
+	tweenAlpha.to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true);
+
+	var tweenMoveUp = game.add.tween(this);
+	tweenMoveUp.to( { y: this.y - AnimationNote.MOVE_UP_AMOUNT_PX }, 1000, Phaser.Easing.Linear.None, true);
+	tweenMoveUp.onComplete.addOnce(this.destroySelf, this);
+
+	game.add.existing(this);
+};
+
+AnimationNote.prototype.destroySelf = function() {
+	this.destroy();
+}
+
+
+AnimationNote.prototype.setScale = function(value) {
+	this.scale.set(value);
+}
+
+
+AnimationNote.DEFAULT_TEXT_FONT = {
+	font: "30px Arial",
+	boundsAlignH: "center",		// left, center. right
+	boundsAlignV: "middle", 	// top, middle, bottom
+	fill: "#fff"
+};
+
+AnimationNote.MOVE_UP_AMOUNT_PX				= 50;
+
+AnimationNote.COLOR_PLUS_SCORE_GRADATION_1	= "#8ED6FF";
+AnimationNote.COLOR_PLUS_SCORE_GRADATION_2	= "#004CB3";
+
+AnimationNote.COLOR_MINUS_SCORE_GRADATION_1	= "#FFD68E";
+AnimationNote.COLOR_MINUS_SCORE_GRADATION_2	= "#B34C00";

src/game/mouse/just_on_time/just_on_time.js

@@ -65,7 +65,7 @@ JustOnTime.prototype.create = function() {
 	this.stageTimer = new StageTimer(
 		JustOnTime.GAME_TIME_SEC,
 		(function() {
-			this.setClickEnable(false);
+			// this.setClickEnable(false);
 
 			this.timeOver();
 		}).bind(this)
@@ -79,6 +79,34 @@ JustOnTime.prototype.create = function() {
 	graphics = game.add.graphics(0, 0);
 
 
+	this.makeGuideButton(
+		225, JustOnTime.GUIDE_BUTTON_POS_Y,
+		"시작 ~ 1초",
+		"점수 : 시작 초의 " + TimerStage.REWARD_BAD + "배",
+		0xFAFAD2
+	);
+
+	this.makeGuideButton(
+		418, JustOnTime.GUIDE_BUTTON_POS_Y,
+		"1초 ~ 0.5초",
+		"점수 : 시작 초의 " + TimerStage.REWARD_SOSO + "배",
+		0xDAA520
+	);
+
+	this.makeGuideButton(
+		612, JustOnTime.GUIDE_BUTTON_POS_Y,
+		"0.5초 ~ 0.2초",
+		"점수 : 시작 초의 " + TimerStage.REWARD_GOOD + "배",
+		0xD2691E
+	);
+
+	this.makeGuideButton(
+		805, JustOnTime.GUIDE_BUTTON_POS_Y,
+		"0.2초 ~ 0초",
+		"점수 : 시작 초의 " + TimerStage.REWARD_GREAT + "배",
+		0xA52A2A
+	);
+
 	this.god = new God();
 
 	// bottom ui
@@ -94,6 +122,41 @@ JustOnTime.prototype.create = function() {
 JustOnTime.prototype.initVariables = function() {
 }
 
+JustOnTime.prototype.makeGuideButton = function(x, y, guideNote, rewardNote, colorHex) {
+	var setting = new RoundRectButtonSetting(x, y, 180, 80);
+	setting.roundAmount = 3;
+	setting.fontStyle.fontWeight = "bold";
+	setting.setStrokeColor(
+		colorHex,
+		colorHex,
+		colorHex,
+		colorHex
+	);
+	setting.setButtonColor(
+		colorHex,
+		colorHex,
+		colorHex,
+		colorHex
+	);
+	setting.setTextColor(
+		"#fec",
+		"#dca",
+		"#dca",
+		"#333"
+	);
+
+	var guideButton = new RoundRectButton(
+		setting,
+		RoundRectButton.NONE_ICON,
+		guideNote,
+		(function() { this.buttonClicked(); }).bind(this)
+	);
+	guideButton.addShortcutText(rewardNote);
+	guideButton.setInputEnabled(false);
+}
+
+
+
 JustOnTime.prototype.fontLoaded = function() {
 	this.leftTimerStage = new TimerStage(
 		JustOnTime.TIMER_STAGE_POS_X,
@@ -111,13 +174,13 @@ JustOnTime.prototype.fontLoaded = function() {
 		JustOnTime.TIMER_STAGE_POS_Y
 	);
 	this.rightTimerStage.setOnPlusScore(
-		(function(score) { this.plusScore(score); }).bind(this)
+		(function(score, timeLeft) { this.plusScore(score, timeLeft); }).bind(this)
 	);
 	this.rightTimerStage.setOnGameOver(
 		(function() { this.gameOver(); }).bind(this)
 	);
 
-	// this.startGame();
+	this.startGame();
 }
 
 
@@ -177,7 +240,10 @@ JustOnTime.prototype.startGame = function() {
 
 
 JustOnTime.prototype.timeOver = function() {
-	this.god.animateAngry();
+	this.leftTimerStage.stop();
+	this.rightTimerStage.stop();
+
+	this.god.animateBigAngry();
 
 	var timeOverText = new TimeOverText();
 	if(!isExperienceMaestroAccount())
@@ -185,17 +251,20 @@ JustOnTime.prototype.timeOver = function() {
 
 	// game.time.events.remove(this.timeEvent);
 
-	// game.time.events.add(Phaser.Timer.SECOND * 2, this.goResult, this);
+	game.time.events.add(Phaser.Timer.SECOND * 2, this.goResult, this);
 }
 
 JustOnTime.prototype.gameOver = function() {
+	this.leftTimerStage.stop();
+	this.rightTimerStage.stop();
+
 	this.god.animateBigAngry();
 
 	var gameOverText = new GameOverText();
 	if(!isExperienceMaestroAccount())
 		this.updateResultRecord();
 
-	// game.time.events.add(Phaser.Timer.SECOND * 2, this.goResult, this);
+	game.time.events.add(Phaser.Timer.SECOND * 2, this.goResult, this);
 }
 
 
@@ -217,5 +286,8 @@ JustOnTime.prototype.goResult = function() {
 
 
 JustOnTime.GAME_TIME_SEC		= 60;
+
+JustOnTime.GUIDE_BUTTON_POS_Y	= 130;
+
 JustOnTime.TIMER_STAGE_POS_X	= 250;
-JustOnTime.TIMER_STAGE_POS_Y	= 200;
+JustOnTime.TIMER_STAGE_POS_Y	= 250;

src/game/mouse/just_on_time/timer_stage.js

@@ -62,7 +62,7 @@ TimerStage.prototype.initialize = function() {
 
 	this.timerEvent = null;
 	this.timerEvent = this.mainTimer.loop(
-		10,
+		1,
 		(function() { this.updateTimer(); }).bind(this),
 		this
 	);
@@ -80,11 +80,17 @@ TimerStage.prototype.updateTimer = function() {
 	if(timeLeft < 0) {
 		console.log("Game Over");
 
-		this.mainTimer.stop();
 		this.onGameOverEventHandler();
 	}
 }
 
+TimerStage.prototype.stop = function() {
+	this.mainTimer.stop();
+
+	this.timerButton.setInputEnabled(false);
+}
+
+
 TimerStage.prototype.buttonClicked = function() {
 	if(this.state == TimerStage.STATE_READY) {
 		// 시작
@@ -130,45 +136,67 @@ TimerStage.prototype.decideGrade = function(timeLeft) {
 
 TimerStage.prototype.gradeGreat = function(timeLeft) {
 	// console.log("Great")
-	var score = Math.floor(this.timeLimitMS / 1000) * 10;
+	var startTime = Math.floor(this.timeLimitMS / 1000);
+	var score = startTime * TimerStage.REWARD_GREAT;
 	this.onPlusScoreEventHandler(score, timeLeft);
-
+	var animationNote = new AnimationNote(
-	this.timeLimitMS = this.timeLimitMS + 3000;
+		this.posX, this.posY,
-
+		startTime + "초 X " + TimerStage.REWARD_GREAT + "배 = " + score,
+		"Brown"
+	);
 	this.recordArray.push( { timeLeft, score } );
+
+	this.timeLimitMS = this.timeLimitMS + TimerStage.TIME_EXTENSION_GREAT_MS;
 }
 
 TimerStage.prototype.gradeGood = function(timeLeft) {
 	// console.log("Good")
-	var score = Math.floor(this.timeLimitMS / 1000) * 3;
+	var startTime = Math.floor(this.timeLimitMS / 1000);
+	var score = startTime * TimerStage.REWARD_GOOD;
 	this.onPlusScoreEventHandler(score, timeLeft);
-
+	var animationNote = new AnimationNote(
-	this.timeLimitMS = this.timeLimitMS + 1000;
+		this.posX, this.posY,
-
+		startTime + "초 X " + TimerStage.REWARD_GOOD + "배 = " + score,
+		"Chocolate"
+	);
 	this.recordArray.push( { timeLeft, score } );
+
+	this.timeLimitMS = this.timeLimitMS + TimerStage.TIME_EXTENSION_GOOD_MS;
 }
 
 TimerStage.prototype.gradeSoSo = function(timeLeft) {
 	// console.log("SoSo")
-	var score = Math.floor(this.timeLimitMS / 1000) * 2;
+	var startTime = Math.floor(this.timeLimitMS / 1000);
+	var score = startTime * TimerStage.REWARD_SOSO;
 	this.onPlusScoreEventHandler(score, timeLeft);
-
+	var animationNote = new AnimationNote(
-	this.timeLimitMS = this.timeLimitMS + 500;
+		this.posX, this.posY,
-
+		startTime + "초 X " + TimerStage.REWARD_SOSO + "배 = " + score,
+		"GoldenRod"
+	);
 	this.recordArray.push( { timeLeft, score } );
+
+	this.timeLimitMS = this.timeLimitMS + TimerStage.TIME_EXTENSION_SOSO_MS;
 }
 
 TimerStage.prototype.gradeBad = function(timeLeft) {
 	// console.log("Bad")
-	var score = Math.floor(this.timeLimitMS / 1000);
+	var startTime = Math.floor(this.timeLimitMS / 1000);
+	var score = startTime * TimerStage.REWARD_BAD;
 	this.onPlusScoreEventHandler(score, timeLeft);
-
+	var animationNote = new AnimationNote(
+		this.posX, this.posY,
+		startTime + "초 X " + TimerStage.REWARD_BAD + "배 = " + score,
+		"LightGoldenRodYellow"
+	);
 	this.recordArray.push( { timeLeft, score } );
+
+	this.timeLimitMS = this.timeLimitMS + TimerStage.TIME_EXTENSION_BAD_MS;
 }
 
 
 TimerStage.prototype.updateTimeScoreRecordArray = function() {
-	// console.log(this.recordArray);
+	console.log(this.recordArray);
 
 	for(var i = 0; i < TimerStage.RECORD_COUNT; i++) {
 		var timeScoreRecordIndex = i;
@@ -209,4 +237,14 @@ TimerStage.RECORD_COUNT			= 5;
 
 TimerStage.GRADE_GREAT_MS		= 200;
 TimerStage.GRADE_GOOD_MS		= 500;
-TimerStage.GRADE_SOSO_MS		= 1000;
+TimerStage.GRADE_SOSO_MS		= 1000;
+
+TimerStage.REWARD_GREAT			= 10;
+TimerStage.REWARD_GOOD			= 3;
+TimerStage.REWARD_SOSO			= 2;
+TimerStage.REWARD_BAD			= 1;
+
+TimerStage.TIME_EXTENSION_GREAT_MS	= 3000;
+TimerStage.TIME_EXTENSION_GOOD_MS	= 1000;
+TimerStage.TIME_EXTENSION_SOSO_MS	= 500;
+TimerStage.TIME_EXTENSION_BAD_MS	= 0;

src/web/client/just_on_time.html

@@ -44,6 +44,7 @@
 		<script src="../../game/lib/util/number_util.js"></script>
 		<script src="../../game/lib/util/record_util.js"></script>
 
+		<script src="../../game/lib/text/animation_note.js"></script>
 		<script src="../../game/lib/text/combo_text.js"></script>
 		<script src="../../game/lib/text/input_type_text.js"></script>
 		<script src="../../game/lib/text/time_over_text.js"></script>