From 6fa624a99f0046457c66c66b863aba8791366059 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: Sat, 11 May 2019 22:02:43 +0900 Subject: [PATCH] Add: hint particle effect --- src/game/mouse/one_to_fifty/game.js | 52 ++++++++++--- src/game/mouse/one_to_fifty/hint_bubble.js | 76 ------------------- src/game/mouse/one_to_fifty/loading.js | 7 +- .../one_to_fifty/next_chocoball_bubble.js | 76 +++++++++++++++++++ src/game/mouse/one_to_fifty/stop_watch.js | 24 +----- src/game/result/result.js | 2 - src/web/client/onetofifty.html | 2 +- 7 files changed, 124 insertions(+), 115 deletions(-) delete mode 100644 src/game/mouse/one_to_fifty/hint_bubble.js create mode 100644 src/game/mouse/one_to_fifty/next_chocoball_bubble.js diff --git a/src/game/mouse/one_to_fifty/game.js b/src/game/mouse/one_to_fifty/game.js index 3b55181..8ec6be4 100644 --- a/src/game/mouse/one_to_fifty/game.js +++ b/src/game/mouse/one_to_fifty/game.js @@ -42,10 +42,6 @@ var Game = { screenBottomUI.printLeftTextWithAppHighestRecord(sessionStorageManager.getAppHighestRecord()); screenBottomUI.printCenterText(sessionStorageManager.getPlayingAppKoreanName()); screenBottomUI.printRightText(sessionStorageManager.getPlayerName()); - - - this.startGame(); - // // this.countDown(); }, initVariables: function() { @@ -64,6 +60,8 @@ var Game = { this.firstChocoballArray = this.makeChocoballArray(1, 25); this.secondChocoballArray = this.makeChocoballArray(26, 50); + + this.timerEvent = null; }, drawObjects: function() { @@ -86,14 +84,14 @@ var Game = { this.chocoballs.push(chocoball); } - this.hintBubble = new HintBubble(God.POSITION_X, God.POSITION_Y - 260); + this.nextChocoballBubble = new NextChocoballBubble(God.POSITION_X, God.POSITION_Y - 260); this.nextChocoball = new Chocoball( 100, this.difficulty, (function(chocoball) { console.log("no event") }).bind(this) ); this.nextChocoball.setNumber(this.nextNumber); - this.hintBubble.addChild(this.nextChocoball.body); + this.nextChocoballBubble.addChild(this.nextChocoball.body); this.god = new God(God.POSITION_X, God.POSITION_Y, this); }, @@ -125,6 +123,7 @@ var Game = { if(chocoball.number == 50) { // console.log("game clear"); + this.cancelHintTimer(); chocoball.setVisible(false); this.gameClear(); return; @@ -136,13 +135,14 @@ var Game = { this.nextNumber++; this.god.animateHappy(); + this.startHintTimer(); if(chocoball.number <= 25) chocoball.setNumber(this.secondChocoballArray[chocoball.index]); else chocoball.setVisible(false); this.nextChocoball.setNumber(this.nextNumber); - this.hintBubble.animateNextHint(); + this.nextChocoballBubble.animateNextHint(); if(this.mode == "test" && this.nextNumber == 3) { console.log("time over"); @@ -150,8 +150,40 @@ var Game = { } }, + cancelHintTimer: function() { + if(this.timerEvent) { + game.time.events.remove(this.timerEvent); + this.timerEvent = null; + } + }, - startGame: function() { + startHintTimer: function() { + this.cancelHintTimer(); + this.timerEvent = game.time.events.loop(Game.SHOW_HINT_INTERVAL_MS, this.showHint, this); + }, + + showHint: function() { + // console.log("show hint for " + this.nextNumber); + for(var i = 0; i < 25; i++) { + if(this.chocoballs[i].number == this.nextNumber) { + // console.log("index : " + this.chocoballs[i].index); + var chocoball = this.chocoballs[i].body; + // console.log("x : " + chocoball.x + ", y : " + chocoball.y); + this.showExplosionParticle(chocoball.x - 11, chocoball.y - 19); + break; + } + } + }, + + showExplosionParticle: function(x, y) { + var hitStarEmitter = game.add.emitter(x, y, 1); + hitStarEmitter.makeParticles('star'); + hitStarEmitter.gravity = 0; + hitStarEmitter.setAlpha(0.5, 0, Phaser.Timer.SECOND); + hitStarEmitter.setScale(0.5, 1.5, 0.5, 1.5, Phaser.Timer.SECOND, Phaser.Easing.Quintic.Out); + hitStarEmitter.setXSpeed(0, 0); + hitStarEmitter.setYSpeed(0, 0); + hitStarEmitter.start(true, 500, null, 10); }, gameClear: function() { @@ -193,5 +225,5 @@ var Game = { Game.GAME_OVER_WAIT_TIME_MS = 3000; -// Game.GAME_TIME_SEC = 60; -// Game.NEXT_STAGE_DELAY_MS = 500; \ No newline at end of file + +Game.SHOW_HINT_INTERVAL_MS = 3000; \ No newline at end of file diff --git a/src/game/mouse/one_to_fifty/hint_bubble.js b/src/game/mouse/one_to_fifty/hint_bubble.js deleted file mode 100644 index 47eac3f..0000000 --- a/src/game/mouse/one_to_fifty/hint_bubble.js +++ /dev/null @@ -1,76 +0,0 @@ -function HintBubble(x, y) { - this.posY = y; - - this.bubble = this.makeBubbleSprite(x, y); -} - -HintBubble.prototype.makeBubbleSprite = function(x, y) { - var graphics = new Phaser.Graphics(game, 0, 0); - - var triangleStartX = 0; - var triangleStartY = HintBubble.RADIUS / 7 * 4; - var triangleHalfWidth = HintBubble.TRIANGLE_WIDTH / 2; - - // tail outline - graphics.lineStyle(HintBubble.STROKE_WIDTH, HintBubble.COLOR_BUBBLE_STROKE); - graphics.beginFill(HintBubble.COLOR_BUBBLE_FILL); - graphics.moveTo(triangleStartX, triangleStartY); - graphics.lineTo(triangleStartX + triangleHalfWidth, triangleStartY - HintBubble.TRIANGLE_HEIGHT); - graphics.lineTo(triangleStartX - triangleHalfWidth, triangleStartY - HintBubble.TRIANGLE_HEIGHT); - graphics.lineTo(triangleStartX, triangleStartY); - graphics.endFill(); - - // circle - graphics.lineStyle(HintBubble.STROKE_WIDTH / 2, HintBubble.COLOR_BUBBLE_STROKE); - graphics.beginFill(HintBubble.COLOR_BUBBLE_FILL); - graphics.drawCircle(0, 0, HintBubble.RADIUS); - graphics.endFill(); - - // tail body - graphics.lineStyle(0); - graphics.beginFill(HintBubble.COLOR_BUBBLE_FILL); - graphics.moveTo(triangleStartX, triangleStartY); - graphics.lineTo(triangleStartX + triangleHalfWidth, triangleStartY - HintBubble.TRIANGLE_HEIGHT); - graphics.lineTo(triangleStartX - triangleHalfWidth, triangleStartY - HintBubble.TRIANGLE_HEIGHT); - graphics.lineTo(triangleStartX, triangleStartY); - graphics.endFill(); - - texture = graphics.generateTexture(); - - sprite = game.add.sprite(x, y, texture); - sprite.anchor.set(0.5); - return sprite; -} - -HintBubble.prototype.addChild = function(chocoball) { - this.bubble.addChild(chocoball); - chocoball.y -= HintBubble.TRIANGLE_HEIGHT / 9 * 2; -} - - -HintBubble.prototype.animateNextHint = function() { - this.bubble.y = this.posY + HintBubble.ANIMATION_HEIGHT; - - var tween = game.add.tween(this.bubble); - tween.to({y:this.posY}, 500, Phaser.Easing.Quadratic.Out, true, 0); - tween.onComplete.add(this.animateReset, this); - tween.start(); -} - -HintBubble.prototype.animateReset = function() { - this.bubble.y = this.posY; -} - - - -HintBubble.RADIUS = 110; -HintBubble.TRIANGLE_HEIGHT = 40; -HintBubble.TRIANGLE_WIDTH = 40; - -HintBubble.STROKE_WIDTH = 10; -HintBubble.OFFSET_Y = 240; - -HintBubble.ANIMATION_HEIGHT = 20; - -HintBubble.COLOR_BUBBLE_FILL = 0xFFEEEE; -HintBubble.COLOR_BUBBLE_STROKE = 0x331122; \ No newline at end of file diff --git a/src/game/mouse/one_to_fifty/loading.js b/src/game/mouse/one_to_fifty/loading.js index 9750c8a..db509a1 100644 --- a/src/game/mouse/one_to_fifty/loading.js +++ b/src/game/mouse/one_to_fifty/loading.js @@ -29,10 +29,9 @@ var Loading = { 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'); + // hint effect + // game.load.image('star', '../../../resources/image/background/star_7x7.png'); + game.load.image('star', '../../../resources/image/ui/star_particle.png'); Chocoball.loadResources(); God.loadResources(); diff --git a/src/game/mouse/one_to_fifty/next_chocoball_bubble.js b/src/game/mouse/one_to_fifty/next_chocoball_bubble.js new file mode 100644 index 0000000..40a7a85 --- /dev/null +++ b/src/game/mouse/one_to_fifty/next_chocoball_bubble.js @@ -0,0 +1,76 @@ +function NextChocoballBubble(x, y) { + this.posY = y; + + this.bubble = this.makeBubbleSprite(x, y); +} + +NextChocoballBubble.prototype.makeBubbleSprite = function(x, y) { + var graphics = new Phaser.Graphics(game, 0, 0); + + var triangleStartX = 0; + var triangleStartY = NextChocoballBubble.RADIUS / 7 * 4; + var triangleHalfWidth = NextChocoballBubble.TRIANGLE_WIDTH / 2; + + // tail outline + graphics.lineStyle(NextChocoballBubble.STROKE_WIDTH, NextChocoballBubble.COLOR_BUBBLE_STROKE); + graphics.beginFill(NextChocoballBubble.COLOR_BUBBLE_FILL); + graphics.moveTo(triangleStartX, triangleStartY); + graphics.lineTo(triangleStartX + triangleHalfWidth, triangleStartY - NextChocoballBubble.TRIANGLE_HEIGHT); + graphics.lineTo(triangleStartX - triangleHalfWidth, triangleStartY - NextChocoballBubble.TRIANGLE_HEIGHT); + graphics.lineTo(triangleStartX, triangleStartY); + graphics.endFill(); + + // circle + graphics.lineStyle(NextChocoballBubble.STROKE_WIDTH / 2, NextChocoballBubble.COLOR_BUBBLE_STROKE); + graphics.beginFill(NextChocoballBubble.COLOR_BUBBLE_FILL); + graphics.drawCircle(0, 0, NextChocoballBubble.RADIUS); + graphics.endFill(); + + // tail body + graphics.lineStyle(0); + graphics.beginFill(NextChocoballBubble.COLOR_BUBBLE_FILL); + graphics.moveTo(triangleStartX, triangleStartY); + graphics.lineTo(triangleStartX + triangleHalfWidth, triangleStartY - NextChocoballBubble.TRIANGLE_HEIGHT); + graphics.lineTo(triangleStartX - triangleHalfWidth, triangleStartY - NextChocoballBubble.TRIANGLE_HEIGHT); + graphics.lineTo(triangleStartX, triangleStartY); + graphics.endFill(); + + texture = graphics.generateTexture(); + + sprite = game.add.sprite(x, y, texture); + sprite.anchor.set(0.5); + return sprite; +} + +NextChocoballBubble.prototype.addChild = function(chocoball) { + this.bubble.addChild(chocoball); + chocoball.y -= NextChocoballBubble.TRIANGLE_HEIGHT / 9 * 2; +} + + +NextChocoballBubble.prototype.animateNextHint = function() { + this.bubble.y = this.posY + NextChocoballBubble.ANIMATION_HEIGHT; + + var tween = game.add.tween(this.bubble); + tween.to({y:this.posY}, 500, Phaser.Easing.Quadratic.Out, true, 0); + tween.onComplete.add(this.animateReset, this); + tween.start(); +} + +NextChocoballBubble.prototype.animateReset = function() { + this.bubble.y = this.posY; +} + + + +NextChocoballBubble.RADIUS = 110; +NextChocoballBubble.TRIANGLE_HEIGHT = 40; +NextChocoballBubble.TRIANGLE_WIDTH = 40; + +NextChocoballBubble.STROKE_WIDTH = 10; +NextChocoballBubble.OFFSET_Y = 240; + +NextChocoballBubble.ANIMATION_HEIGHT = 20; + +NextChocoballBubble.COLOR_BUBBLE_FILL = 0xFFEEEE; +NextChocoballBubble.COLOR_BUBBLE_STROKE = 0x331122; \ No newline at end of file diff --git a/src/game/mouse/one_to_fifty/stop_watch.js b/src/game/mouse/one_to_fifty/stop_watch.js index 479abd6..972548d 100644 --- a/src/game/mouse/one_to_fifty/stop_watch.js +++ b/src/game/mouse/one_to_fifty/stop_watch.js @@ -3,39 +3,23 @@ function StopWatch() { this.ellapsedTime = 0; this.isPaused = true; - var fontStyle = StopWatch.DEFAULT_TEXT_FONT; + this.timerEvent = null; + var fontStyle = StopWatch.DEFAULT_TEXT_FONT; this.timerText = game.add.text(game.world.centerX, 35, "", fontStyle); this.timerText.anchor.set(0.5); this.printTime(); - - // var grd = this.label.context.createLinearGradient(0, 0, 0, StopWatch.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; } StopWatch.prototype.start = function() { this.isPaused = false; this.startTime = game.time.totalElapsedSeconds(); - // this.startTime = new Date(); - console.log(this.startTime); - this.ellapsedTimer = game.time.create(false); this.timerEvent = this.ellapsedTimer.loop(10, this.updateTimer, this); this.ellapsedTimer.start(); this.printTime(); - - // this.timerEvent = game.time.events.loop(Phaser.Timer.SECOND / 100, this.updateTimer, this); } StopWatch.prototype.pause = function() { @@ -51,7 +35,6 @@ StopWatch.prototype.stop = function() { this.removeTimer(); return recordTime; - // return this.ellapsedTime; } StopWatch.prototype.updateTimer = function() { @@ -59,9 +42,6 @@ StopWatch.prototype.updateTimer = function() { return; this.ellapsedTime = game.time.totalElapsedSeconds() - this.startTime; - // console.log(this.ellapsedTime); - // this.ellapsedTime += 0.01; - this.printTime(); } diff --git a/src/game/result/result.js b/src/game/result/result.js index 9fae017..e939962 100644 --- a/src/game/result/result.js +++ b/src/game/result/result.js @@ -120,11 +120,9 @@ var Result = { } if(this.isHighestRecordPreferApp()) { - console.log("highest record prefer"); if(prevRecord > appHighestRecord) this.showHighestRecordEffect(prevRecord); } else { - console.log("lowest record prefer"); if(appHighestRecord == 0) this.showHighestRecordEffect(prevRecord); else if(prevRecord < appHighestRecord) diff --git a/src/web/client/onetofifty.html b/src/web/client/onetofifty.html index bfc5ebe..0346d4e 100644 --- a/src/web/client/onetofifty.html +++ b/src/web/client/onetofifty.html @@ -69,7 +69,7 @@ - +