diff --git a/src/game/typing/practice/game.js b/src/game/typing/practice/game.js index 05fd4af..cabc408 100644 --- a/src/game/typing/practice/game.js +++ b/src/game/typing/practice/game.js @@ -18,6 +18,7 @@ class TypingPractice { location.href = '../../web/client/menu_typing_practice.html'; }); + this.missTypingScoreText = new MissTypingScore(); this.contentProgressText = new ContentProgress(); let fullscreenButton = new FullscreenButton(game); @@ -255,6 +256,8 @@ class TypingPractice { if(this.typingIndex === this.typingContentLength) { this.goResult(); } + } else { + this.missTypingScoreText.increase(); } } diff --git a/src/game/typing/practice/miss_typing_score.js b/src/game/typing/practice/miss_typing_score.js new file mode 100644 index 0000000..bc9e0cc --- /dev/null +++ b/src/game/typing/practice/miss_typing_score.js @@ -0,0 +1,48 @@ +class MissTypingScore { + + constructor() { + this.missTypingCount = 0; + + let fontStyle = MissTypingScore.DEFAULT_TEXT_FONT; + + fontStyle.align = "right"; + fontStyle.boundsAlignH = "right"; + this.label = game.add.text(0, 0, "오타수 : ", fontStyle) + .setTextBounds(0, 0, game.world.width / 2, MissTypingScore.FONT_HEIGHT_PX); + + fontStyle.align = "left"; + fontStyle.boundsAlignH = "left"; + this.missTypingText = game.add.text(game.world.width / 2, 0, "0", fontStyle) + .setTextBounds(0, 0, game.world.width / 2, MissTypingScore.FONT_HEIGHT_PX); + + // var grd = this.label.context.createLinearGradient(0, 0, 0, MissTypingScore.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; + }; + + increase() { + this.missTypingCount++; + this.print(this.missTypingCount); + } + + print(missTypingCount) { + this.missTypingText.text = missTypingCount; + } + +} + +MissTypingScore.FONT_HEIGHT_PX = 70; + +MissTypingScore.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/web/client/typing_practice.html b/src/web/client/typing_practice.html index eeb7968..e4cb2a3 100644 --- a/src/web/client/typing_practice.html +++ b/src/web/client/typing_practice.html @@ -53,6 +53,7 @@ +