From 849935da003d5a9b7c4a585ebc7a27407839a09c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?= =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?= Date: Wed, 4 Dec 2019 05:32:27 +0900 Subject: [PATCH] Add: animation_note, guide notes --- src/game/lib/text/animation_note.js | 66 ++++++++++++++++ src/game/mouse/just_on_time/just_on_time.js | 86 +++++++++++++++++++-- src/game/mouse/just_on_time/timer_stage.js | 74 +++++++++++++----- src/web/client/just_on_time.html | 1 + 4 files changed, 202 insertions(+), 25 deletions(-) create mode 100644 src/game/lib/text/animation_note.js diff --git a/src/game/lib/text/animation_note.js b/src/game/lib/text/animation_note.js new file mode 100644 index 0000000..8900d57 --- /dev/null +++ b/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"; \ No newline at end of file diff --git a/src/game/mouse/just_on_time/just_on_time.js b/src/game/mouse/just_on_time/just_on_time.js index 40a90cc..0e8953c 100644 --- a/src/game/mouse/just_on_time/just_on_time.js +++ b/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; \ No newline at end of file diff --git a/src/game/mouse/just_on_time/timer_stage.js b/src/game/mouse/just_on_time/timer_stage.js index a00cbba..1a4ab19 100644 --- a/src/game/mouse/just_on_time/timer_stage.js +++ b/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); - - this.timeLimitMS = this.timeLimitMS + 3000; - + var animationNote = new AnimationNote( + 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); - - this.timeLimitMS = this.timeLimitMS + 1000; - + var animationNote = new AnimationNote( + 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); - - this.timeLimitMS = this.timeLimitMS + 500; - + var animationNote = new AnimationNote( + 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; \ No newline at end of file +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; \ No newline at end of file diff --git a/src/web/client/just_on_time.html b/src/web/client/just_on_time.html index 871fe5a..ac880c5 100644 --- a/src/web/client/just_on_time.html +++ b/src/web/client/just_on_time.html @@ -44,6 +44,7 @@ +