Add: MissTypingScore

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();
 		}
 	}
 

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"
+};

src/web/client/typing_practice.html

@@ -53,6 +53,7 @@
 		<script src="../../game/typing/lib/typing_text_manager.js"></script>
 
 		<script src="../../game/typing/practice/define_variables.js"></script>
+		<script src="../../game/typing/practice/miss_typing_score.js"></script>
 		<script src="../../game/typing/practice/key_mapper.js"></script>
 		<script src="../../game/typing/practice/key_button.js"></script>
 		<script src="../../game/typing/practice/keyboard.js"></script>