From 896d9f30679c491062a050048943dff938cc5994 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: Mon, 12 Aug 2019 00:33:34 +0900 Subject: [PATCH] Add: animal sprite in the typing button --- src/game/lib/animal.js | 120 ++++++++++++++---- src/game/lib/animal_record_list.js | 4 +- src/game/lib/color/main_color.js | 4 + src/game/lib/flat_button/typing_app_button.js | 39 +++++- src/game/main_menu/main_menu.js | 40 ++++-- 5 files changed, 159 insertions(+), 48 deletions(-) diff --git a/src/game/lib/animal.js b/src/game/lib/animal.js index a9092e3..34af45a 100644 --- a/src/game/lib/animal.js +++ b/src/game/lib/animal.js @@ -1,5 +1,8 @@ function Animal(type, index, x, y) { this.animalType = type; + this.animalIndex = index; + + this.species = Animal.SPECIES_DATA[index]; this.sprite = null; this.posX = x; @@ -7,13 +10,53 @@ function Animal(type, index, x, y) { this.sprite = game.add.sprite(this.posX, this.posY, "animals"); this.sprite.anchor.set(0.5); - this.sprite.animations.add("stand", [index * 2]); - this.sprite.animations.play("stand"); - this.sprite.animations.add("run", [index * 2, index * 2 + 1]); - this.species = Animal.SPECIES_DATA[index]; + // for(var i = 0; i < Animal.SPECIES_DATA.length; i++) { + // for(var i = Animal.SPECIES_DATA.length - 1; i > 0; i--) { + // var animalName = this.getSpeciesName(i); + + // var standAnimationName = animalName + "_stand"; + // this.sprite.animations.add(standAnimationName, i * 2); + + // var runAnimationName = animalName + "_run"; + // this.sprite.animations.add(runAnimationName, i * 2, i * 2 + 1); + // } + + this.sprite.frame = this.animalIndex * 2; + + // game.time.events.add(Phaser.Timer.SECOND * 5, this.showStandAnimation, this); + + // var standAnimationName = this.getSpeciesName(this.animalIndex) + "_stand"; + // console.log(standAnimationName); + // this.sprite.animations.play(standAnimationName); + // this.sprite.animations.play("cheetah_stand"); + + this.sprite.animations.add("stand", [index * 2]); + // this.sprite.animations.play("stand"); + this.sprite.animations.add("run", [index * 2, index * 2 + 1]); } +/* +Animal.prototype.showStandAnimation = function() { + var standAnimationName = this.getSpeciesName(this.animalIndex) + "_stand"; + console.log(standAnimationName); + this.sprite.animations.play(standAnimationName); +} +*/ + +Animal.prototype.getSpeciesName = function(animalIndex) { + return Animal.SPECIES_DATA[animalIndex].species; +} + +Animal.prototype.chagneStandAnimation = function(animalIndex) { + // this.sprite.animations.play(this.getSpeciesName(this.animalIndex) + "stand"); + this.animalIndex = animalIndex; + this.sprite.frame = this.animalIndex * 2; +} + +Animal.prototype.changeRunAnimation = function(animalIndex) { + this.sprite.animations.play(this.getSpeciesName(this.animalIndex) + "run"); +} Animal.prototype.setScale = function(value) { this.sprite.scale.set(value); @@ -32,14 +75,14 @@ Animal.prototype.setAlpha = function(value) { Animal.prototype.tweenAnimation = function(animationType) { switch(animationType) { case Animal.ANIMATION_TYPE_CHANGE: - this.sprite.width = 100; - this.sprite.height = 100; + this.sprite.width = Animal.SPRITE_WIDTH; + this.sprite.height = Animal.SPRITE_HEIGHT; game.add.tween(this.sprite).to( { width: 50, height: 50 }, 500, Phaser.Easing.Bounce.Out, true); break; case Animal.ANIMATION_TYPE_DAMAGE: - this.sprite.width = 100; - this.sprite.height = 50; + this.sprite.width = Animal.SPRITE_WIDTH; + this.sprite.height = Animal.SPRITE_DAMAGE_HEIGHT; game.add.tween(this.sprite).to( { width: 50 }, 500, Phaser.Easing.Bounce.In, true); // game.add.tween(this.sprite).to( { width: 50 }, 500, Phaser.Easing.Elastic.Out, true); break; @@ -47,10 +90,14 @@ Animal.prototype.tweenAnimation = function(animationType) { } Animal.prototype.startAnimation = function(species) { + // var runAnimationName = this.getSpeciesName(this.animalIn) + "_run"; + // this.sprite.animations.play(runAnimationName, this.species.fps, true); this.sprite.animations.play("run", this.species.fps, true); } Animal.prototype.stopAnimation = function() { + // var runAnimationName = this.getSpeciesName(this.animalIn) + "_run"; + // this.sprite.animations.stop(runAnimationName); this.sprite.animations.stop("run"); } @@ -63,6 +110,15 @@ Animal.prototype.hide = function() { } +Animal.animalIndexByRecord = function(record, gameType) { + for(var i = Animal.SPECIES_DATA.length - 1; i > 0; i--) { + if(record >= this.typingCount(Animal.SPECIES_DATA[i], gameType)) + return i; + } + + return 0; +} + Animal.animalLevelIDByRecord = function(record, gameType) { for(var i = Animal.SPECIES_DATA.length - 1; i > 0; i--) { if(record >= this.typingCount(Animal.SPECIES_DATA[i], gameType)) @@ -72,15 +128,19 @@ Animal.animalLevelIDByRecord = function(record, gameType) { return 0; } -Animal.getAnimalFingerPositionTypingCount = function(animalIndex) { - return Animal.SPECIES_DATA[animalIndex].fingerPositionTypingCount; +Animal.getAnimalTypingPracticeCount = function(animalIndex) { + return Animal.SPECIES_DATA[animalIndex].typingPracticeCount; +} + +Animal.getAnimalTypingTestCount = function(animalIndex) { + return Animal.SPECIES_DATA[animalIndex].typingTestCount; } Animal.typingCount = function(speciesData, gameType) { - if(gameType === Animal.TYPE_FINGER_POSITION) - return speciesData.fingerPositionTypingCount; + if(gameType === Animal.TYPE_PRACTICE) + return speciesData.typingPracticeCount; else - return speciesData.practiceTypingCount; + return speciesData.typingTestCount; } @@ -99,22 +159,26 @@ Animal.TYPE_EXAM = 1; Animal.ANIMATION_TYPE_CHANGE = 0; Animal.ANIMATION_TYPE_DAMAGE = 1; +Animal.SPRITE_WIDTH = 100; +Animal.SPRITE_DAMAGE_WIDTH = 50; +Animal.SPRITE_HEIGHT = 100; + Animal.HIDE_POS_Y = 1000; Animal.SPECIES_DATA = [ - { "species" : "snail", "fps" : 1, "fingerPositionTypingCount" : 0, "practiceTypingCount" : 0 }, - { "species" : "turtle", "fps" : 2, "fingerPositionTypingCount" : 5, "practiceTypingCount" : 20 }, - { "species" : "chick", "fps" : 5, "fingerPositionTypingCount" : 10, "practiceTypingCount" : 40 }, - { "species" : "mouse", "fps" : 12, "fingerPositionTypingCount" : 15, "practiceTypingCount" : 70 }, - { "species" : "chicken", "fps" : 11, "fingerPositionTypingCount" : 20, "practiceTypingCount" : 100 }, - { "species" : "pig", "fps" : 5, "fingerPositionTypingCount" : 25, "practiceTypingCount" : 150 }, - { "species" : "cat", "fps" : 10, "fingerPositionTypingCount" : 30, "practiceTypingCount" : 200 }, - { "species" : "deer", "fps" : 9, "fingerPositionTypingCount" : 40, "practiceTypingCount" : 250 }, - { "species" : "kangaroo", "fps" : 4, "fingerPositionTypingCount" : 50, "practiceTypingCount" : 300 }, - { "species" : "rabbit", "fps" : 12, "fingerPositionTypingCount" : 60, "practiceTypingCount" : 350 }, - { "species" : "dog", "fps" : 9, "fingerPositionTypingCount" : 70, "practiceTypingCount" : 400 }, - { "species" : "zebra", "fps" : 12, "fingerPositionTypingCount" : 80, "practiceTypingCount" : 450 }, - { "species" : "ostrich", "fps" : 15, "fingerPositionTypingCount" : 90, "practiceTypingCount" : 500 }, - { "species" : "lion", "fps" : 10, "fingerPositionTypingCount" : 100, "practiceTypingCount" : 600 }, - { "species" : "cheetah", "fps" : 15, "fingerPositionTypingCount" : 110, "practiceTypingCount" : 700 } + { "species" : "snail", "fps" : 1, "typingPracticeCount" : 0, "typingTestCount" : 0 }, + { "species" : "turtle", "fps" : 2, "typingPracticeCount" : 5, "typingTestCount" : 20 }, + { "species" : "chick", "fps" : 5, "typingPracticeCount" : 10, "typingTestCount" : 40 }, + { "species" : "mouse", "fps" : 12, "typingPracticeCount" : 15, "typingTestCount" : 70 }, + { "species" : "chicken", "fps" : 11, "typingPracticeCount" : 20, "typingTestCount" : 100 }, + { "species" : "pig", "fps" : 5, "typingPracticeCount" : 25, "typingTestCount" : 150 }, + { "species" : "cat", "fps" : 10, "typingPracticeCount" : 30, "typingTestCount" : 200 }, + { "species" : "deer", "fps" : 9, "typingPracticeCount" : 40, "typingTestCount" : 250 }, + { "species" : "kangaroo", "fps" : 4, "typingPracticeCount" : 50, "typingTestCount" : 300 }, + { "species" : "rabbit", "fps" : 12, "typingPracticeCount" : 60, "typingTestCount" : 350 }, + { "species" : "dog", "fps" : 9, "typingPracticeCount" : 70, "typingTestCount" : 400 }, + { "species" : "zebra", "fps" : 12, "typingPracticeCount" : 80, "typingTestCount" : 450 }, + { "species" : "ostrich", "fps" : 15, "typingPracticeCount" : 90, "typingTestCount" : 500 }, + { "species" : "lion", "fps" : 10, "typingPracticeCount" : 100, "typingTestCount" : 600 }, + { "species" : "cheetah", "fps" : 15, "typingPracticeCount" : 110, "typingTestCount" : 700 } ]; \ No newline at end of file diff --git a/src/game/lib/animal_record_list.js b/src/game/lib/animal_record_list.js index f562188..38c447e 100644 --- a/src/game/lib/animal_record_list.js +++ b/src/game/lib/animal_record_list.js @@ -83,9 +83,9 @@ AnimalRecordList.prototype.printScore = function(recordType) { var typingCountWithUnit = ""; if(recordType == Animal.TYPE_PRACTICE) - typingCountWithUnit = RecordUtil.getRecordValueWithUnit(animalData.fingerPositionTypingCount, 1); + typingCountWithUnit = RecordUtil.getRecordValueWithUnit(animalData.typingPracticeCount, 1); else - typingCountWithUnit = RecordUtil.getRecordValueWithUnit(animalData.practiceTypingCount, 1); + typingCountWithUnit = RecordUtil.getRecordValueWithUnit(animalData.typingTestCount, 1); recordText.text = typingCountWithUnit; /* diff --git a/src/game/lib/color/main_color.js b/src/game/lib/color/main_color.js index 69b5984..13ebd23 100644 --- a/src/game/lib/color/main_color.js +++ b/src/game/lib/color/main_color.js @@ -17,6 +17,10 @@ MainColor.DARK_CHOCO_HEX = 0x402D21; MainColor.LIGHTER_CHOCO_HEX = 0xE6A277; + +//////////////////// +// https://www.rapidtables.com/web/color/RGB_Color.html + // BASIC MainColor.MAROON_STRING = "#800000"; MainColor.DARK_RED_STRING = "#8B0000"; diff --git a/src/game/lib/flat_button/typing_app_button.js b/src/game/lib/flat_button/typing_app_button.js index c61371e..03a5540 100644 --- a/src/game/lib/flat_button/typing_app_button.js +++ b/src/game/lib/flat_button/typing_app_button.js @@ -4,6 +4,9 @@ TypingAppButton.constructor = TypingAppButton; function TypingAppButton(x, y) { this.appData = null; + this.appGroup = 0; + this.appType = Animal.TYPE_PRACTICE; + var setting = new ButtonSetting(x, y, TypingAppButton.WIDTH, TypingAppButton.HEIGHT); setting.setStrokeWidth(0); setting.setRound(30); @@ -48,13 +51,35 @@ function TypingAppButton(x, y) { // this.setShortcutText("Setting"); // this.setInputEnabled(this.appData.activated); + + this.animalSprite = new Animal( + Animal.TYPE_ICON, 0, + Animal.SPRITE_WIDTH / 2, TypingAppButton.HEIGHT / 2 + ); + this.buttonSprite.addChild(this.animalSprite.sprite); } +TypingAppButton.prototype.updateAnimalSprite = function(highestRecord) { + // console.log("highestRecord : " + highestRecord + ", appType : " + this.appType); + var animalIndex = Animal.animalIndexByRecord(highestRecord, this.appType); + // console.log("animalIndex : " + animalIndex); + this.animalSprite.chagneStandAnimation(animalIndex); +} + + TypingAppButton.prototype.updateAppData = function(appData) { this.appData = appData; + this.appGroup = this.appData.appGroup; + if(this.appGroup === 0) + this.appType = Animal.TYPE_PRACTICE; + else + this.appType = Animal.TYPE_TEST; + + // console.log(this.appData); this.setMainText(this.appData.koreanName); this.setInputEnabled(this.appData.activated); + this.updateAnimalSprite(this.appData.highestRecord); } TypingAppButton.prototype.clickEvent = function() { @@ -86,20 +111,20 @@ TypingAppButton.TYPING_APP_KOREAN_NAME = "타자검정"; */ -TypingAppButton.WIDTH = 460; +TypingAppButton.WIDTH = 400; TypingAppButton.HEIGHT = 80; TypingAppButton.STROKE_COLOR_OUT_HEX = MainColor.DARK_CHOCO_HEX; TypingAppButton.STROKE_COLOR_OVER_HEX = MainColor.DARK_CHOCO_HEX; TypingAppButton.STROKE_COLOR_DOWN_HEX = MainColor.DARK_CHOCO_HEX; -TypingAppButton.STROKE_COLOR_DISABLED_HEX = MainColor.DARK_CHOCO_HEX; +TypingAppButton.STROKE_COLOR_DISABLED_HEX = MainColor.LIGHT_GRAY_HEX; // MainColor.ROSY_BROWN_HEX; TypingAppButton.BUTTON_COLOR_OUT_HEX = MainColor.DARK_CHOCO_HEX; TypingAppButton.BUTTON_COLOR_OVER_HEX = MainColor.LIGHTER_CHOCO_HEX; TypingAppButton.BUTTON_COLOR_DOWN_HEX = MainColor.LIGHT_CHOCO_HEX; -TypingAppButton.BUTTON_COLOR_DISABLED_HEX = MainColor.BLACK_HEX; +TypingAppButton.BUTTON_COLOR_DISABLED_HEX = MainColor.LIGHT_GRAY_HEX; // MainColor.ROSY_BROWN_HEX; -TypingAppButton.TEXT_COLOR_OUT_HEX = MainColor.WHITE_STRING; -TypingAppButton.TEXT_COLOR_OVER_HEX = MainColor.DARK_CHOCO_STRING; -TypingAppButton.TEXT_COLOR_DOWN_HEX = MainColor.LIGHTER_CHOCO_STRING; -TypingAppButton.TEXT_COLOR_DISABLED_HEX = MainColor.GREY_STRING; \ No newline at end of file +TypingAppButton.TEXT_COLOR_OUT_HEX = MainColor.LINEN_STRING; +TypingAppButton.TEXT_COLOR_OVER_HEX = MainColor.DARK_CHOCO_STRING; +TypingAppButton.TEXT_COLOR_DOWN_HEX = MainColor.LIGHTER_CHOCO_STRING; +TypingAppButton.TEXT_COLOR_DISABLED_HEX = MainColor.DARK_GRAY_STRING; // MainColor.THISTLE_STRING; \ No newline at end of file diff --git a/src/game/main_menu/main_menu.js b/src/game/main_menu/main_menu.js index d37fac7..3570512 100644 --- a/src/game/main_menu/main_menu.js +++ b/src/game/main_menu/main_menu.js @@ -169,10 +169,14 @@ MainMenu.prototype.loadAppData = function() { } MainMenu.prototype.makeTypingAppButtons = function() { - var offsetX = 50; + var offsetX = 95; + var startY = 190; + var offsetY = 115; + + var buttonHalfWidth = TypingAppButton.WIDTH / 2; for(var i = 0; i < MainMenu.TYPING_APP_COUNT; i++) { - var x = (i % 2) === 0 ? TypingAppButton.WIDTH / 2 + offsetX : 800; - var y = 200 + Math.floor(i / 2) * 100; + var x = (i % 2) === 0 ? buttonHalfWidth + offsetX : GAME_SCREEN_SIZE.x - buttonHalfWidth - offsetX; + var y = startY + Math.floor(i / 2) * offsetY; var button = new TypingAppButton(x, y); button.setActive(false); @@ -187,11 +191,11 @@ MainMenu.prototype.hideAllButtons = function() { MainMenu.prototype.updateAppButtons = function(appGroup, appData) { switch(parseInt(appGroup)) { case MainMenu.APP_GROUP_TYPING_PRACTICE: - this.updateTypingPracticeAppButtons(appData); + this.updateTypingPracticeAppButtons(appGroup, appData); break; case MainMenu.APP_GROUP_TYPING_TEST: - this.updateTypingTestAppButtons(appData); + this.updateTypingTestAppButtons(appGroup, appData); break; case MainMenu.APP_GROUP_TYPING_EXAM: @@ -231,14 +235,14 @@ MainMenu.prototype.isActivatedApp = function(appID, activeAppList) { MainMenu.prototype.getAppHighestRecord = function(appID, highestRecordList) { var count = highestRecordList.length; for(var i = 0; i < count; i++) { - if(appID === highestRecordList.appID) + if(appID === highestRecordList[i].appID) return highestRecordList[i].highestRecord; } return 0; } -MainMenu.prototype.makeTypingPracticeAppDataList = function(appData) { +MainMenu.prototype.makeTypingPracticeAppDataList = function(appGroup, appData) { var appDataList = new Array(); var appList = appData.appList; @@ -248,6 +252,7 @@ MainMenu.prototype.makeTypingPracticeAppDataList = function(appData) { var count = appList.length; for(var appDataIndex = 0; appDataIndex < count; appDataIndex++) { var data = {}; + data["appGroup"] = appGroup; data["appID"] = appList[appDataIndex].appID; data["appName"] = appList[appDataIndex].appName; data["koreanName"] = appList[appDataIndex].koreanName; @@ -259,12 +264,12 @@ MainMenu.prototype.makeTypingPracticeAppDataList = function(appData) { return appDataList; } -MainMenu.prototype.updateTypingPracticeAppButtons = function(appData) { +MainMenu.prototype.updateTypingPracticeAppButtons = function(appGroup, appData) { console.log("updateTypingPracticeAppButtons"); this.clearTypingAppButtons(); var buttonIndex = 0; - var appDataList = this.makeTypingPracticeAppDataList(appData); + var appDataList = this.makeTypingPracticeAppDataList(appGroup, appData); var count = appDataList.length; for(var i = 0; i < MainMenu.TYPING_APP_COUNT; i++) { var button = this.typingAppButtons[i]; @@ -277,9 +282,22 @@ MainMenu.prototype.updateTypingPracticeAppButtons = function(appData) { } } -MainMenu.prototype.updateTypingTestAppButtons = function(appData) { +MainMenu.prototype.updateTypingTestAppButtons = function(appGroup, appData) { console.log("updateTypingTestAppButtons"); - console.log(appData); + this.clearTypingAppButtons(); + + var buttonIndex = 0; + var appDataList = this.makeTypingPracticeAppDataList(appGroup, appData); + var count = appDataList.length; + for(var i = 0; i < MainMenu.TYPING_APP_COUNT; i++) { + var button = this.typingAppButtons[i]; + if(i < count) { + button.setActive(true); + button.updateAppData(appDataList[i]); + } else { + button.setActive(false); + } + } } MainMenu.prototype.updateTypingExamAppButtons = function(appData) {