Add: ScoreManager, ScoreBoard

src/game/global/global_variables.js

@@ -33,5 +33,6 @@ let sessionStorageManager = new SessionStorageManager();
 	console.log("playingAppName : " + sessionStorageManager.playingAppName);
 }
 let appInfoManager = new AppInfoManager();
+let scoreManager = new ScoreManager();
 
 let textStyleBasic = { font: "bold 32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };

src/game/lib/score_board.js

@@ -0,0 +1,41 @@
+class ScoreBoard {
+
+	constructor() {
+		let fontStyle = ScoreBoard.DEFAULT_TEXT_FONT;
+
+		fontStyle.align = "right";
+		fontStyle.boundsAlignH = "right";
+		this.label = game.add.text(0, 0, "점수 : ", fontStyle)
+			.setTextBounds(0, 0, game.world.width / 2, ScoreBoard.FONT_HEIGHT_PX);
+
+		fontStyle.align = "left";
+		fontStyle.boundsAlignH = "left";
+		this.scoreText = game.add.text(game.world.width / 2, 0, "0", fontStyle)
+			.setTextBounds(0, 0, game.world.width / 2, ScoreBoard.FONT_HEIGHT_PX);
+
+		// var grd = this.label.context.createLinearGradient(0, 0, 0, ScoreBoard.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;
+	};
+
+	printScore(score) {
+		this.scoreText.text = score;
+	}
+
+}
+
+ScoreBoard.FONT_HEIGHT_PX		= 70;
+
+ScoreBoard.DEFAULT_TEXT_FONT	= {
+	font: "38px Arial",
+	align: "center",
+	boundsAlignH: "center",		// left, center. right
+	boundsAlignV: "middle", 	// top, middle, bottom
+	fill: "#fff"
+};

src/game/lib/score_manager.js

@@ -0,0 +1,79 @@
+class ScoreManager {
+
+	constructor() {
+		this.score = 0;
+		this.highScore = 0;
+
+		this.onChangeScoreFunctions = [];
+		this.onChangeHighScoreFunctions = [];
+	}
+
+	addOnChangeScoreFunctions(onChangeFunction) {
+		this.onChangeScoreFunctions.push(onChangeFunction);
+	}
+
+	removeOnChangeScoreFunctions(onChangeFunction) {
+		let itemIndex = this.onChangeScoreFunctions.indexOf(onChangeFunction);
+		if(itemIndex > -1)
+			this.onChangeScoreFunctions.splice(itemIndex, 1);
+	}
+
+	addOnChangeHighScoreFunctions(onChangeHighScoreFunction) {
+		this.onChangeHighScoreFunctions.push(onChangeHighScoreFunction);
+	}
+
+	removeOnChangeHighScoreFunctions(onChangeHighScoreFunction) {
+		let itemIndex = this.onChangeHighScoreFunctions.indexOf(onChangeHighScoreFunction);
+		if(itemIndex > -1)
+			this.onChangeHighScoreFunctions.splice(itemIndex, 1);
+	}
+
+	removeAllFunctions() {
+		this.onChangeScoreFunctions = [];
+		this.onChangeHighScoreFunctions = [];
+	}
+
+
+	getScore() {
+		return this.score;
+	}
+
+	getHighScore() {
+		return this.highScore;
+	}
+
+
+	plusScore(amount) {
+		this.setScore(this.score + amount);
+	}
+
+	minusScore(amount) {
+		this.plusScore(-1 * amount);
+	}
+
+	setScore(value) {
+		let beforeScore = this.score;
+		this.score = value;
+
+		// update score
+		if(beforeScore !== this.score) {
+			if(this.onChangeScoreFunctions.length > 0) {
+				for(let i = 0; i < this.onChangeScoreFunctions.length; i++) {
+					this.onChangeScoreFunctions[i](this.score);
+				}
+			}
+		}
+
+		// update high score
+		if(this.score > this.highScore) {
+			this.highScore = this.score;
+
+			if(this.onChangeHighScoreFunctions.length > 0) {
+				for(let i = 0; i < this.onChangeHighScoreFunctions.length; i++) {
+					this.onChangeHighScoreFunctions[i](this.highScore);
+				}
+			}
+		}
+	}
+
+}

src/game/lib/score_text.js

@@ -1,7 +1,7 @@
 class ScoreText extends Phaser.Text {
 
 	constructor(x, y, score) {
-		super(game, x, y, "+" + score, ScoreText.DEFAULT_TEXT_FONT);
+		super(game, x, y, "+" + NumberUtil.numberWithCommas(score), ScoreText.DEFAULT_TEXT_FONT);
 
 		this.anchor.set(0.5);
 		this.inputEnabled = false;

src/game/lib/screen_bottom.js

@@ -11,6 +11,33 @@ class ScreenBottom {
 		this.BOTTOM_BAR_TEXT_OFFSET				= 10;
 
 		this.bottomAreaPositionY = this.game.world.height - this.BOTTOM_BAR_HEIGHT;
+
+		let style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" };
+
+		let posX = this.BOTTOM_BAR_TEXT_OFFSET;
+		this.leftText = this.game.add.text(posX, this.bottomAreaPositionY, "", style)
+			.setTextBounds(0, 0, this.BOTTOM_BAR_NAME_WIDTH, this.BOTTOM_BAR_HEIGHT)
+			.addColor('#ffffff', 0);
+			// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+		// let style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "bottom" };
+		style.align = "center";
+		style.boundsAlignH = "center";
+		posX = game.world.width / 2 - this.BOTTOM_BAR_NAME_OFFSET_RIGHT;
+		this.centerText = this.game.add.text(0, this.bottomAreaPositionY, "", style)
+			.setTextBounds(0, 0, game.world.width, this.BOTTOM_BAR_HEIGHT)
+			.addColor('#ffffff', 0);
+			// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+		// let style = { font: "32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "bottom" };
+
+		style.align = "right";
+		style.boundsAlignH = "right";
+		posX = game.world.width - this.BOTTOM_BAR_NAME_WIDTH - this.BOTTOM_BAR_TEXT_OFFSET;
+		this.rightText = this.game.add.text(posX, this.bottomAreaPositionY, "", style)
+			.setTextBounds(0, 0, this.BOTTOM_BAR_NAME_WIDTH, this.BOTTOM_BAR_HEIGHT)
+			.addColor('#ffffff', 0);
+			// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 	}
 
 	makeBottomLine() {
@@ -25,33 +52,15 @@ class ScreenBottom {
 	}
 
 	printBottomLeftText(text) {
-		let style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" };
-
-		let posX = this.BOTTOM_BAR_TEXT_OFFSET;
-		this.game.add.text(posX, this.bottomAreaPositionY, text, style)
-			.setTextBounds(0, 0, this.BOTTOM_BAR_NAME_WIDTH, this.BOTTOM_BAR_HEIGHT)
-			.addColor('#ffffff', 0);
-			// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+		this.leftText.text = text;
 	}
 
 	printBottomCenterText(text) {
-		let style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "bottom" };
-
-		let posX = game.world.width / 2 - this.BOTTOM_BAR_NAME_OFFSET_RIGHT;
-		this.game.add.text(0, this.bottomAreaPositionY, text, style)
-			.setTextBounds(0, 0, game.world.width, this.BOTTOM_BAR_HEIGHT)
-			.addColor('#ffffff', 0);
-			// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+		this.centerText.text = text;
 	}
 
 	printBottomRightText(text) {
-		let style = { font: "32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "bottom" };
-
-		let posX = game.world.width - this.BOTTOM_BAR_NAME_WIDTH - this.BOTTOM_BAR_TEXT_OFFSET;
-		this.game.add.text(posX, this.bottomAreaPositionY, text, style)
-			.setTextBounds(0, 0, this.BOTTOM_BAR_NAME_WIDTH, this.BOTTOM_BAR_HEIGHT)
-			.addColor('#ffffff', 0);
-			// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+		this.rightText.text = text;
 	}
 
 }

src/game/mouse/space_invaders/game.js

@@ -11,6 +11,8 @@ class Game {
 			location.href = '../../web/client/menu_app.html';
 		});
 
+		let scoreBoard = new ScoreBoard();
+
 		let fullscreenButton = new FullscreenButton(this.game);
 
 
@@ -36,11 +38,22 @@ class Game {
 		// bottom
 		let screenBottom = new ScreenBottom(game);
 		screenBottom.makeBottomLine();
-		screenBottom.printBottomLeftText("게임 진행 정보");
+		let highScore = NumberUtil.numberWithCommas(scoreManager.getHighScore());
+		screenBottom.printBottomLeftText("최고 기록 : " + highScore);
 		let playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
 		screenBottom.printBottomCenterText(playingAppName);
 		screenBottom.printBottomRightText(sessionStorageManager.playerName);
 
+
+		scoreManager.addOnChangeScoreFunctions( score => {
+			console.log("onChangeScore : " + score);
+			scoreBoard.printScore(NumberUtil.numberWithCommas(score));
+		});
+		scoreManager.addOnChangeHighScoreFunctions( highScore => {
+			console.log("onChangeHighScore : " + highScore);
+			screenBottom.printBottomLeftText("최고 기록 : " + NumberUtil.numberWithCommas(highScore));
+		});
+
 		this.startGame();
 		// this.countDown();
 	}
@@ -90,9 +103,8 @@ class Game {
 	}
 
 	onAlienFired(sprite) {
-		console.log("onAlienFired");
-		console.log("x : " + sprite.x + ", y : " + sprite.y);
-		let scoreText = new ScoreText(sprite.x, sprite.y, 30);
+		scoreManager.plusScore(3000);
+		let scoreText = new ScoreText(sprite.x, sprite.y, 3000);
 	}
 
 	onAlienEscaped() {

src/web/client/space_invaders.html

@@ -12,12 +12,14 @@
 		<!-- global source files -->
 		<script src="../../game/lib/app_info_manager.js"></script>
 		<script src="../../game/lib/session_storage_manager.js"></script>
+		<script src="../../game/lib/score_manager.js"></script>
 		<script src="../../game/global/global_variables.js"></script>
 
 		<!-- library source files -->
 		<script src="../../game/lib/number_util.js"></script>
 		<script src="../../game/lib/history_record_manager.js"></script>
 		<script src="../../game/lib/input_type_text.js"></script>
+		<script src="../../game/lib/score_board.js"></script>
 		<script src="../../game/lib/score_text.js"></script>
 		<script src="../../game/lib/round_rect_button.js"></script>
 		<script src="../../game/lib/back_button.js"></script>

test/score_manager.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>QUnit Example</title>
+  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.6.0.css">
+</head>
+<body>
+  <div id="qunit"></div>
+  <div id="qunit-fixture"></div>
+  <script src="https://code.jquery.com/qunit/qunit-2.6.0.js"></script>
+  <script src="../src/game/lib/score_manager.js"></script>
+  <script src="test_score_manager.js"></script>
+</body>
+</html>

test/test_score_manager.js

@@ -0,0 +1,9 @@
+let scoreManager = new ScoreManager();
+
+QUnit.test( "plusScore", function( assert ) {
+	assert.equal(scoreManager.score, 0);
+	scoreManager.plusScore(10);
+	assert.equal(scoreManager.score, 10);
+	scoreManager.minusScore(10);
+	assert.equal(scoreManager.score, 0);
+});