From 2381ca774331484ad2b10dfaf8ed644c8bd428b5 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: Thu, 25 Oct 2018 15:55:58 +0900 Subject: [PATCH] Add: hide and show animation --- src/game/lib/stage_timer.js | 10 +++ src/game/mouse/card_matching/dude_card.js | 39 ++++++++-- src/game/mouse/card_matching/game.js | 94 +++++++++++++++-------- 3 files changed, 106 insertions(+), 37 deletions(-) diff --git a/src/game/lib/stage_timer.js b/src/game/lib/stage_timer.js index 7a2fb7e..635c84c 100644 --- a/src/game/lib/stage_timer.js +++ b/src/game/lib/stage_timer.js @@ -2,6 +2,8 @@ function StageTimer(stageTimerSec, onTimeOver) { this.stageTimerSec = stageTimerSec; this.onTimeOver = onTimeOver; + this.isPaused = false; + var fontStyle = StageTimer.DEFAULT_TEXT_FONT; fontStyle.align = "right"; @@ -30,6 +32,11 @@ StageTimer.prototype.start = function() { } StageTimer.prototype.pause = function() { + this.isPaused = true; +} + +StageTimer.prototype.resume = function() { + this.isPaused = false; } StageTimer.prototype.stop = function() { @@ -39,6 +46,9 @@ StageTimer.prototype.stop = function() { } StageTimer.prototype.updateTimer = function() { + if(this.isPaused == true) + return; + this.timeLeft--; if(this.timeLeft === 0) { this.stop(); diff --git a/src/game/mouse/card_matching/dude_card.js b/src/game/mouse/card_matching/dude_card.js index 6db9ec4..fcc77b3 100644 --- a/src/game/mouse/card_matching/dude_card.js +++ b/src/game/mouse/card_matching/dude_card.js @@ -34,6 +34,8 @@ function DudeCard(game, col, row, cardCharacters, clickedHandler) { this.inputEnabled = true; this.events.onInputDown.add(this.onDown, this); + this.showAndHideEvent = null; + game.add.existing(this); } @@ -95,20 +97,46 @@ DudeCard.prototype.flipToBack = function() { this.backPaper.alpha = 1; } -DudeCard.prototype.show = function(openCardColumnNo, openCardRowNo) { - this.isActivated = true; - this.alpha = 1; - +DudeCard.prototype.move = function(openCardColumnNo, openCardRowNo) { this.x = game.world.centerX - (((openCardColumnNo - 1) / 2) - this.columnNo) * 180; this.y = game.world.centerY - (((openCardRowNo - 1) / 2) - this.rowNo) * 160; } +DudeCard.prototype.setActive = function(value) { + this.isActivated = value; +} + +DudeCard.prototype.show = function() { + this.alpha = 1; +} + +DudeCard.prototype.startShowAndHideAnimation = function() { + this.flipToFront(); + this.showAndHideEvent = game.time.events.add( + DudeCard.SHOW_AND_HIDE_TIME_SECOND * Phaser.Timer.SECOND, + this.finishShowAndHideAnimation, + this + ); +} + +DudeCard.prototype.finishShowAndHideAnimation = function() { + this.flipToBack(); + this.removeShowAndHideEvent(); +} + DudeCard.prototype.hide = function() { - this.isActivated = false; this.alpha = 0; this.x = DudeCard.CARD_INITIAL_POSITION_X; this.y = DudeCard.CARD_INITIAL_POSITION_Y; + + this.removeShowAndHideEvent(); +} + +DudeCard.prototype.removeShowAndHideEvent = function() { + if(this.showAndHideEvent != null) { + game.time.events.remove(this.showAndHideEvent); + } } @@ -118,4 +146,5 @@ DudeCard.MAX_CARD_ROW_NO = 4; DudeCard.CARD_INITIAL_POSITION_X = -100; DudeCard.CARD_INITIAL_POSITION_Y = -100; +DudeCard.SHOW_AND_HIDE_TIME_SECOND = 0.5; DudeCard.INIT_LEFT_TIME_MIN = 2; diff --git a/src/game/mouse/card_matching/game.js b/src/game/mouse/card_matching/game.js index 60e5a9b..c12af47 100644 --- a/src/game/mouse/card_matching/game.js +++ b/src/game/mouse/card_matching/game.js @@ -41,10 +41,11 @@ var Game = { }).bind(this) ); + this.setClickEnable(false); this.stageTimer = new StageTimer( Game.GAME_TIME_SEC, (function() { - // this.isOnStage = false; + this.setClickEnable(false); this.gameOver(); }).bind(this) @@ -94,19 +95,8 @@ var Game = { this.selectedCardCol; this.selectedCardRow; - this.score; - this.scoreText; - this.highscore; - this.highscoreText; - this.plusScoreTextGroup; - this.stageNoticeText; - - this.popup; - this.popupTween = null; - this.startButton; - - this.timeEvent; this.gameTimeEvents = []; + this.showAndHideCardsEvent = null; this.cardCharacterIndexList; @@ -195,8 +185,8 @@ var Game = { startGame: function() { this.playingStageNo = 1; - this.startStage(); this.stageTimer.start(); + this.startStage(); }, startStage: function() { @@ -206,8 +196,47 @@ var Game = { this.activatedCardCount = this.activatedCardColumnNo * this.activatedCardRowNo; this.clearedCardCount = 0; - this.initCards(); this.initOpenCardInfo(); + this.initCards(); + + this.showAndHideCardIndex = 0; + this.showAndHideCardsEvent = game.time.events.loop( + DudeCard.SHOW_AND_HIDE_TIME_SECOND * 0.5 * Phaser.Timer.SECOND, + this.showAndHideCards, + this + ); + this.stageTimer.pause(); + }, + + startNextStage: function() { + this.setClickEnable(false); + this.playingStageNo++; + + var startStageTimeEvent = game.time.events.add(Game.NEXT_STAGE_DELAY_MS, this.startStage, this); + this.gameTimeEvents[this.gameTimeEvents.length + 1] = startStageTimeEvent; + }, + + showAndHideCards: function() { + for(var index = 0; index < DudeCard.MAX_CARD_ROW_NO * DudeCard.MAX_CARD_COLUMN_NO; index++) { + if(index < this.showAndHideCardIndex) + continue; + + var card = this.cards[index]; + if(card.isActivated == true) { + card.startShowAndHideAnimation(); + this.showAndHideCardIndex = index + 1; + + return; + } + } + + this.setClickEnable(true); + game.time.events.remove(this.showAndHideCardsEvent); + this.stageTimer.resume(); + }, + + setClickEnable: function(value) { + this.isEnableClick = value; }, setOpenCardColumnRow: function() { @@ -254,18 +283,21 @@ var Game = { this.randCharacterListAfterShuffling = Phaser.ArrayUtils.shuffle(characterListBeforeShuffling); var randCharacterIndex = 0; - for(var i = 0; i < DudeCard.MAX_CARD_COLUMN_NO; i++) { - for(var j = 0; j < DudeCard.MAX_CARD_ROW_NO; j++) { + for(var j = 0; j < DudeCard.MAX_CARD_ROW_NO; j++) { + for(var i = 0; i < DudeCard.MAX_CARD_COLUMN_NO; i++) { var index = j * DudeCard.MAX_CARD_COLUMN_NO + i; if(i < this.activatedCardColumnNo && j < this.activatedCardRowNo) { - this.cards[index].show(this.activatedCardColumnNo, this.activatedCardRowNo); + this.cards[index].setActive(true); + this.cards[index].move(this.activatedCardColumnNo, this.activatedCardRowNo); + this.cards[index].show(); this.cards[index].flipToBack(); - // cards[index].setCharacter(1); - // cards[index].setCharacter(game.rnd.integerInRange(0, card_characters_count - 1)); + // this.cards[index].setCharacter(1); + // this.cards[index].setCharacter(game.rnd.integerInRange(0, card_characters_count - 1)); this.cards[index].setCharacter(this.randCharacterListAfterShuffling[randCharacterIndex]); randCharacterIndex++; } else { this.cards[index].hide(); + this.cards[index].setActive(false); } } } @@ -288,6 +320,11 @@ var Game = { }, cardClicked: function(col, row) { + if(this.isEnableClick == false) { + console.log("It's not on stage"); + return; + } + var index = this.getCardIndex(col, row); if(this.isCardSelectEdgeActivated() == false) { // card select edge is not activated @@ -363,7 +400,7 @@ var Game = { resetCards: function(col, row) { var index = this.getCardIndex(col, row); - this.cards[index].show(col, row); + this.cards[index].show(); index = this.selectedCardRow * DudeCard.MAX_CARD_COLUMN_NO + this.selectedCardCol; this.cards[index].hide(this.selectedCardCol, this.selectedCardRow); }, @@ -434,19 +471,12 @@ var Game = { this.reservedHideCard[0].hide(); this.reservedHideCard[1].hide(); - // this.addScore(); - // this.updateScore(); this.scoreManager.plusScore(this.getScore()); // to do : check clear stage this.clearedCardCount += 2; - if(this.activatedCardCount == this.clearedCardCount) { - // this.showStageNotice(this.playingStageNo + "단계 완료"); - this.playingStageNo++; - - var startStageTimeEvent = game.time.events.add(Phaser.Timer.SECOND * 1, this.startStage, this); - this.gameTimeEvents[this.gameTimeEvents.length + 1] = startStageTimeEvent; - } + if(this.activatedCardCount == this.clearedCardCount) + this.startNextStage(); }, resetOpenedCard: function() { @@ -517,7 +547,7 @@ var Game = { this.activatedCardRowNo = 0; this.initCards(); - game.time.events.remove(this.timeEvent); + // game.time.events.remove(this.timeEvent); this.hideSelectedCard(); for(var i = 0; i < this.gameTimeEvents.length; i++) { @@ -538,4 +568,4 @@ var Game = { Game.GAME_TIME_SEC = 60; -Game.GAME_OVER_WAIT_TIME_MS = 2000; \ No newline at end of file +Game.NEXT_STAGE_DELAY_MS = 500; \ No newline at end of file