diff --git a/src/game/lib/stage_timer.js b/src/game/lib/stage_timer.js new file mode 100644 index 0000000..7a2fb7e --- /dev/null +++ b/src/game/lib/stage_timer.js @@ -0,0 +1,69 @@ +function StageTimer(stageTimerSec, onTimeOver) { + this.stageTimerSec = stageTimerSec; + this.onTimeOver = onTimeOver; + + var fontStyle = StageTimer.DEFAULT_TEXT_FONT; + + fontStyle.align = "right"; + fontStyle.boundsAlignH = "right"; + this.timerText = game.add.text(game.world.width - 300, 0, "", fontStyle) + .setTextBounds(0, 0, 200, StageTimer.FONT_HEIGHT_PX); + + // var grd = this.label.context.createLinearGradient(0, 0, 0, StageTimer.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; +}; + +StageTimer.prototype.start = function() { + this.timeLeft = this.stageTimerSec; + this.printTime(); + if(this.timerEvent === null) + this.timerEvent = game.time.events.loop(Phaser.Timer.SECOND, this.updateTimer, this); +} + +StageTimer.prototype.pause = function() { +} + +StageTimer.prototype.stop = function() { + if(this.timerEvent) + this.removeTimer(); + this.timerText.text = "시간 끝"; +} + +StageTimer.prototype.updateTimer = function() { + this.timeLeft--; + if(this.timeLeft === 0) { + this.stop(); + this.onTimeOver(); + } else { + this.printTime(); + } +} + +StageTimer.prototype.printTime = function() { + this.timerText.text = this.timeLeft.toString() + "초"; +} + +StageTimer.prototype.removeTimer = function() { + game.time.events.remove(this.timerEvent); + this.timerEvent = null; +} + + +StageTimer.FONT_HEIGHT_PX = 70; + +StageTimer.DEFAULT_TEXT_FONT = { + font: "38px Arial", + align: "center", + boundsAlignH: "center", // left, center. right + boundsAlignV: "middle", // top, middle, bottom + fill: "#fff" +}; \ No newline at end of file diff --git a/src/game/mouse/card_matching/dude_card.js b/src/game/mouse/card_matching/dude_card.js index 51e85e4..595e472 100644 --- a/src/game/mouse/card_matching/dude_card.js +++ b/src/game/mouse/card_matching/dude_card.js @@ -1,8 +1,10 @@ -DudeCard = function(game, col, row) { +DudeCard = function(game, col, row, cardCharacters, clickedHandler) { this.cardIndex = row * DudeCard.MAX_CARD_COLUMN_NO + col; this.columnNo = col; this.rowNo = row; + this.cardCharacters = cardCharacters; this.characterNo = 0; + this.clickedHandler = clickedHandler; this.isActivated = true; @@ -41,7 +43,7 @@ DudeCard.prototype.onDown = function(sprite) { if(this.isActivated == false) return; - cardClicked(this.columnNo, this.rowNo); + this.clickedHandler(this.columnNo, this.rowNo); /* if(this.backPaper.alpha == 0) { @@ -60,7 +62,7 @@ DudeCard.prototype.setScale = function(size) { DudeCard.prototype.setCharacter = function(characterNo) { this.characterNo = characterNo; - this.character.loadTexture(card_characters[characterNo]); + this.character.loadTexture(this.cardCharacters[characterNo]); } DudeCard.prototype.getCharacter = function() { diff --git a/src/game/mouse/card_matching/game.js b/src/game/mouse/card_matching/game.js index 328a96f..15959ea 100644 --- a/src/game/mouse/card_matching/game.js +++ b/src/game/mouse/card_matching/game.js @@ -16,7 +16,7 @@ var Game = { Phaser.KeyCode.ESC, // keyCode null, // keyDownHandler (function() { this.back(); }).bind(this), // keyUpHandler - "space invaders" // callerClassName + "card matching" // callerClassName ); // top ui @@ -35,11 +35,24 @@ var Game = { sessionStorageManager.setIsNewBestRecrd(true); // screenBottomUI.printLeftTextWithAppHighestRecord(sessionStorageManager.getAppHighestRecord()); }); + this.stageTimer = new StageTimer( + Game.GAME_TIME_SEC, + (function() { + // self.isOnStage = false; + + // self.goResult(); + this.gameOver(); + }).bind(this) + ); this.initVariables(); // game stage + game.stage.backgroundColor = '#4d4d4d'; + graphics = game.add.graphics(0, 0); + + this.plusScoreGroup = game.add.group(); // bottom ui @@ -49,7 +62,7 @@ var Game = { screenBottomUI.printRightText(sessionStorageManager.getPlayerName()); - // this.startGame(); + this.startGame(); // // this.countDown(); }, @@ -87,12 +100,13 @@ var Game = { this.popupTween = null; this.startButton; - this.leftTimeText; - this.leftTimeSec; + // this.leftTimeText; + // this.leftTimeSec; this.timeEvent; this.gameTimeEvents = []; + this.cardCharacterIndexList; this.randStageCharacterList; this.randCharacterListAfterShuffling; @@ -120,7 +134,13 @@ var Game = { for(var i = 0; i < DudeCard.MAX_CARD_COLUMN_NO; i++){ for(var j = 0; j < DudeCard.MAX_CARD_ROW_NO; j++) { var index = j * DudeCard.MAX_CARD_COLUMN_NO + i; - this.cards[index] = new DudeCard(game, i, j); + this.cards[index] = new DudeCard( + game, i, j, + this.card_characters, + (function(col, row) { + this.cardClicked(col, row); + }).bind(this) + ); this.cards[index].setScale(0.5); this.cards[index].hide(); } @@ -134,39 +154,46 @@ var Game = { }, - - -/* - gameOver() { - this.updateHighscore(); - - this.activatedCardColumnNo = 0; - this.activatedCardRowNo = 0; - this.initCards(); - - game.time.events.remove(timeEvent); - this.hideSelectedCard(); - - for(var i = 0; i < gameTimeEvents.length; i++) { - game.time.events.remove(gameTimeEvents[i]); - } - gameTimeEvents = []; - - // startButton.alpha = 1; - // startButton.inputEnabled = true; + back: function() { + sessionStorageManager.resetPlayingAppData(); + location.href = '../../web/client/menu_app.html'; }, - startGame() { + countDown() { + const style = { font: "bold 200px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" }; + this.countDownText = game.add.text(0, 0, "", style); + this.countDownText.setTextBounds(0, 0, game.world.width, game.world.height); + this.countDownText.stroke = "#333"; + this.countDownText.strokeThickness = 50; + + this.countDownNumber = 3; + if(isDebugMode()) + this.countDownNumber = 1; + this.tweenCountDown(); + }, + + tweenCountDown() { + if(this.countDownNumber === 0) { + this.startGame(); + return; + } + + this.countDownText.text = this.countDownNumber.toString(); + this.countDownText.alpha = 1; + + var countDownTween = game.add.tween(this.countDownText); + countDownTween.to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true); + countDownTween.onComplete.add(this.tweenCountDown, this); + + this.countDownNumber--; + }, + + startGame: function() { this.playingStageNo = 1; - this.leftTimeSec = 0; // INIT_LEFT_TIME_MIN * 60; - - this.score = 0; - this.updateScore(); - - // startButton.alpha = 0; - // startButton.inputEnabled = false; + // this.leftTimeSec = 0; // INIT_LEFT_TIME_MIN * 60; this.startStage(); + this.stageTimer.start(); }, startStage() { @@ -178,6 +205,8 @@ var Game = { this.initCards(); this.initOpenCardInfo(); + + /* var bonusTime = this.getBonusTime(); if(this.playingStageNo == 1) this.showStageNotice(this.playingStageNo + "단계 시작 (제한 시간 : " + this.bonusTime + "초)"); @@ -187,39 +216,17 @@ var Game = { this.showStageNotice(this.playingStageNo + "단계 시작 (보너스 +" + this.bonusTime + "초)"); this.leftTimeSec += this.bonusTime; - this.updateLeftTime(); + */ - if(this.playingStageNo == 1) - this.timeEvent = game.time.events.loop(1000, this.updateLeftTime, this); - }, + // this.leftTimeSec = Game.GAME_TIME_SEC; + // this.updateLeftTime(); - getBonusTime() { - if(this.playingStageNo == 1) - return DudeCard.INIT_LEFT_TIME_MIN * 60; - - var bonusTime = 0; - if(this.playingStageNo < 10) - bonusTime = Math.floor(10 / this.playingStageNo) * 10; - - return bonusTime; - }, - - updateLeftTime() { - this.leftTimeSec--; - this.leftTimeText.text = this.leftTimeSec; - if(this.leftTimeSec == 0) { - showStageNotice("시간 종료"); - gameOver(); - } - }, - - showStageNotice(text) { - this.stageNoticeText.alpha = 0; - this.stageNoticeText.text = text; - this.animateTextAlpha(stageNoticeText, 1, 0, 1000, Phaser.Easing.Linear.None); + // if(this.playingStageNo == 1) + // this.timeEvent = game.time.events.loop(1000, this.updateLeftTime, this); }, setOpenCardColumnRow() { + console.log("setOpenCardColumnRow : " + this.playingStageNo); switch(this.playingStageNo) { case 1: this.activatedCardColumnNo = 2; @@ -256,18 +263,18 @@ var Game = { this.randStageCharacterList = Phaser.ArrayUtils.shuffle(this.cardCharacterIndexList); var characterListBeforeShuffling = []; - for(var i = 0; i < activatedCardCount; i++) { + for(var i = 0; i < this.activatedCardCount; i++) { var characterIndex = Math.floor(i / 2); characterListBeforeShuffling[i] = this.randStageCharacterList[characterIndex]; } this.randCharacterListAfterShuffling = Phaser.ArrayUtils.shuffle(characterListBeforeShuffling); var randCharacterIndex = 0; - for(var i = 0; i < MAX_CARD_COLUMN_NO; i++) { - for(var j = 0; j < MAX_CARD_ROW_NO; j++) { - var index = j * MAX_CARD_COLUMN_NO + i; - if(i < activatedCardColumnNo && j < activatedCardRowNo) { - this.cards[index].show(activatedCardColumnNo, activatedCardRowNo); + for(var i = 0; i < DudeCard.MAX_CARD_COLUMN_NO; i++) { + for(var j = 0; j < DudeCard.MAX_CARD_ROW_NO; j++) { + 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].flipToBack(); // cards[index].setCharacter(1); // cards[index].setCharacter(game.rnd.integerInRange(0, card_characters_count - 1)); @@ -287,25 +294,13 @@ var Game = { this.openCardInfoCharacter[1] = -1; }, + hideSelectedCard() { + this.isCardSelected = false; - showOpenCardInfo() { - console.log( - "card 1 (" + this.openCardInfoIndex[0] + ", : " + this.openCardInfoCharacter[0] + "), card 2 (" - + this.openCardInfoIndex[1] + ", " + this.openCardInfoCharacter[1] + ")"); - }, + this.card_selected_edge.x = -100; + this.card_selected_edge.y = -100; - isCardSelectEdgeActivated() { - return this.isCardSelected; - }, - - isCardSelectEdgeAll() { - if(this.openCardInfoIndex[0] < 0) - return false; - - if(this.openCardInfoIndex[1] < 0) - return false; - - return true; + this.card_selected_edge.alpha = 0; }, cardClicked(col, row) { @@ -351,6 +346,75 @@ var Game = { }, + isSelectedBefore(col, row) { + if(this.selectedCardCol == col && this.selectedCardRow == row) + return true; + + return false; + }, + + getCardIndex(col, row) { + return index = row * DudeCard.MAX_CARD_COLUMN_NO + col; + }, + + isFrontCard(col, row) { + return this.cards[this.getCardIndex(col, row)].isFront(); + }, + + flipToFront(col, row) { + var index = row * DudeCard.MAX_CARD_COLUMN_NO + col; + this.cards[this.getCardIndex(col, row)].flipToFront(); + }, + + flipToBack(col, row) { + this.cards[this.getCardIndex(col, row)].flipToBack(); + }, + + clearCards(col, row) { + var index = this.getCardIndex(col, row); + this.cards[index].hide(); + index = this.selectedCardRow * DudeCard.MAX_CARD_COLUMN_NO + this.selectedCardCol; + this.cards[index].hide(); + }, + + resetCards(col, row) { + var index = this.getCardIndex(col, row); + this.cards[index].show(col, row); + index = this.selectedCardRow * DudeCard.MAX_CARD_COLUMN_NO + this.selectedCardCol; + this.cards[index].hide(this.selectedCardCol, this.selectedCardRow); + }, + + showSelectedCard(col, row) { + this.isCardSelected = true; + + var index = this.getCardIndex(col, row); + this.card_selected_edge.x = this.cards[index].x; + this.card_selected_edge.y = this.cards[index].y; + + this.card_selected_edge.alpha = 1; + }, + + showOpenCardInfo() { + console.log( + "card 1 (" + this.openCardInfoIndex[0] + ", : " + this.openCardInfoCharacter[0] + "), card 2 (" + + this.openCardInfoIndex[1] + ", " + this.openCardInfoCharacter[1] + ")"); + }, + + isCardSelectEdgeActivated() { + return this.isCardSelected; + }, + + isCardSelectEdgeAll() { + if(this.openCardInfoIndex[0] < 0) + return false; + + if(this.openCardInfoIndex[1] < 0) + return false; + + return true; + }, + + isSameCharacterCard() { if(this.openCardInfoIndex[0] < 0 || this.openCardInfoIndex[1] < 0) return false; @@ -362,70 +426,54 @@ var Game = { }, clearOpenedTwoCards() { - var card1 = this.cards[openCardInfoIndex[0]]; - resetOpenCardInfo(card1.getColumnNo(), card1.getRowNo()); + console.log(this.openCardInfoIndex[0]); + var card1 = this.cards[this.openCardInfoIndex[0]]; + this.resetOpenCardInfo(card1.getColumnNo(), card1.getRowNo()); this.reservedHideCard[0] = card1; - var card2 = this.cards[openCardInfoIndex[1]]; - resetOpenCardInfo(card2.getColumnNo(), card2.getRowNo()); + var card2 = this.cards[this.openCardInfoIndex[1]]; + this.resetOpenCardInfo(card2.getColumnNo(), card2.getRowNo()); this.reservedHideCard[1] = card2; // to do : show card 2 (flip to front) and wait 1 sec // to do : hide card 1, card 2 // to do : add score, score point animation - var tempPlusScore = new PlusScore(card2.x, card2.y, 10 * this.playingStageNo); + var tempPlusScore = new PlusScore(card2.x, card2.y, this.getScore()); this.plusScoreGroup.add(tempPlusScore); // card1.hide(); // card2.hide(); var hideOpenedCardTimeEvent = game.time.events.add(Phaser.Timer.SECOND * 0.5, this.hideOpenedCard, this); - this.gameTimeEvents[gameTimeEvents.length + 1] = hideOpenedCardTimeEvent; + this.gameTimeEvents[this.gameTimeEvents.length + 1] = hideOpenedCardTimeEvent; }, hideOpenedCard() { this.reservedHideCard[0].hide(); this.reservedHideCard[1].hide(); - this.addScore(); - this.updateScore(); + // this.addScore(); + // this.updateScore(); + scoreManager.plusScore(this.getScore()); // to do : check clear stage this.clearedCardCount += 2; - if(activatedCardCount == clearedCardCount) { - this.showStageNotice(this.playingStageNo + "단계 완료"); + if(this.activatedCardCount == this.clearedCardCount) { + // this.showStageNotice(this.playingStageNo + "단계 완료"); this.playingStageNo++; var startStageTimeEvent = game.time.events.add(Phaser.Timer.SECOND * 1, this.startStage, this); - gameTimeEvents[gameTimeEvents.length + 1] = startStageTimeEvent; + this.gameTimeEvents[this.gameTimeEvents.length + 1] = startStageTimeEvent; } }, - addScore() { - this.score += 10 * this.playingStageNo; - }, - - updateScore() { - this.scoreText.text = this.score; - }, - - updateHighscore() { - if(this.score > this.highscore) { - this.highscore = this.score; - this.highscoreText.text = this.highscore; - - showStageNotice("!!! 최고 점수 갱신 !!!"); - } - }, - - resetOpenedCard() { - var card1 = this.cards[openCardInfoIndex[0]]; + var card1 = this.cards[this.openCardInfoIndex[0]]; if(card1 == null) return; this.resetOpenCardInfo(card1.getColumnNo(), card1.getRowNo()); card1.flipToBack(); - var card2 = this.cards[openCardInfoIndex[1]]; + var card2 = this.cards[this.openCardInfoIndex[1]]; if(card2 == null) return; this.resetOpenCardInfo(card2.getColumnNo(), card2.getRowNo()); @@ -435,7 +483,7 @@ var Game = { resetOpenedTwoCards() { var resetOpenedCardTimeEvent = game.time.events.add(Phaser.Timer.SECOND * 0.5, this.resetOpenedCard, this); - this.gameTimeEvents[gameTimeEvents.length + 1] = resetOpenedCardTimeEvent; + this.gameTimeEvents[this.gameTimeEvents.length + 1] = resetOpenedCardTimeEvent; }, @@ -444,7 +492,7 @@ var Game = { var cardIndex = this.getCardIndex(col, row); for(var i = 0; i < 2; i++) { - if(openCardInfoIndex[i] < 0) { + if(this.openCardInfoIndex[i] < 0) { this.openCardInfoIndex[i] = this.cards[cardIndex].getCardIndex(); this.openCardInfoCharacter[i] = this.cards[cardIndex].getCharacter(); @@ -474,115 +522,25 @@ var Game = { return false; }, - - - - isSelectedBefore(col, row) { - if(this.selectedCardCol == col && this.selectedCardRow == row) - return true; - - return false; + getScore: function() { + return this.playingStageNo * 10; }, - getCardIndex(col, row) { - return index = row * MAX_CARD_COLUMN_NO + col; - }, - - isFrontCard(col, row) { - return this.cards[getCardIndex(col, row)].isFront(); - }, - - flipToFront(col, row) { - var index = row * MAX_CARD_COLUMN_NO + col; - this.cards[getCardIndex(col, row)].flipToFront(); - }, - - flipToBack(col, row) { - this.cards[getCardIndex(col, row)].flipToBack(); - }, - - clearCards(col, row) { - var index = getCardIndex(col, row); - this.cards[index].hide(); - index = this.selectedCardRow * DudeCard.MAX_CARD_COLUMN_NO + this.selectedCardCol; - this.cards[index].hide(); - }, - - resetCards(col, row) { - var index = this.getCardIndex(col, row); - this.cards[index].show(col, row); - index = this.selectedCardRow * DudeCard.MAX_CARD_COLUMN_NO + this.selectedCardCol; - this.cards[index].hide(this.selectedCardCol, this.selectedCardRow); - }, - - showSelectedCard(col, row) { - this.isCardSelected = true; - - var index = this.getCardIndex(col, row); - this.card_selected_edge.x = this.cards[index].x; - this.card_selected_edge.y = this.cards[index].y; - - this.card_selected_edge.alpha = 1; - }, -*/ - - hideSelectedCard() { - this.isCardSelected = false; - - this.card_selected_edge.x = -100; - this.card_selected_edge.y = -100; - - this.card_selected_edge.alpha = 0; - } - -/* - back: function() { - sessionStorageManager.resetPlayingAppData(); - location.href = '../../web/client/menu_app.html'; - }, - - initListeners: function() { - }, - - countDown() { - const style = { font: "bold 200px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" }; - this.countDownText = game.add.text(0, 0, "", style); - this.countDownText.setTextBounds(0, 0, game.world.width, game.world.height); - this.countDownText.stroke = "#333"; - this.countDownText.strokeThickness = 50; - - this.countDownNumber = 3; - if(isDebugMode()) - this.countDownNumber = 1; - this.tweenCountDown(); - } - - tweenCountDown() { - if(this.countDownNumber === 0) { - this.startGame(); - return; - } - - this.countDownText.text = this.countDownNumber.toString(); - this.countDownText.alpha = 1; - - var countDownTween = game.add.tween(this.countDownText); - countDownTween.to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true); - countDownTween.onComplete.add(this.tweenCountDown, this); - - this.countDownNumber--; - } - - startGame: function() { - // activate first alien - this.alienTimer.start(); - }, - gameOver: function() { - this.alienTimer.stop(); + this.activatedCardColumnNo = 0; + this.activatedCardRowNo = 0; + this.initCards(); + + game.time.events.remove(this.timeEvent); + this.hideSelectedCard(); + + for(var i = 0; i < this.gameTimeEvents.length; i++) { + game.time.events.remove(this.gameTimeEvents[i]); + } + this.gameTimeEvents = []; var gameOverText = new GameOverText(); @@ -593,19 +551,8 @@ var Game = { location.href = '../../web/client/result.html'; }, - activateNextAlien: function() { - this.alienTimer.next(); - }, - - getScore: function() { - return (this.alienTimer.activatedAlienIndex) * 2; - }, - - onAlienEscaped: function() { - heartManager.breakHearts(1); - } - -*/ } + +Game.GAME_TIME_SEC = 6; Game.GAME_OVER_WAIT_TIME_MS = 2000; \ No newline at end of file diff --git a/src/web/client/card_matching.html b/src/web/client/card_matching.html index 44a9505..dd635e9 100644 --- a/src/web/client/card_matching.html +++ b/src/web/client/card_matching.html @@ -31,6 +31,7 @@ +