Fix: ES6 -> ES5 (imcompleted)

src/game/global/global_variables.js

@@ -3,7 +3,7 @@ const LANGUAGE_ENGLISH		= "english";
 
 const MODE_RELEASE			= "release";
 const MODE_DEBUG			= "debug";
-const runMode = MODE_RELEASE;
+const runMode = MODE_DEBUG;
 
 function isDebugMode() {
 	// console.log("debug mode ? " + runMode);

src/game/lib/button/back_button.js

@@ -1,30 +1,34 @@
-class BackButton extends RoundRectButton {
+BackButton.prototype = Object.create(RoundRectButton);
+BackButton.constructor = BackButton;
 
-	constructor(clickEvent) {
-		let setting = new RoundRectButtonSetting(30, 30, 50, 50);
-		setting.fontStyle.boundsAlignH = "center";	// left, center. right
-		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
-		setting.strokeWidthPx = 3;
-		setting.setStrokeColor(
-			0xaa6666,
-			0x884444,
-			0x884444,
-			0x333333
-		);
-		setting.setButtonColor(
-			0xffdddd,
-			0xddaaaa,
-			0xddaaaa,
-			0x666666
-		);
-		setting.setTextColor(
-			"#a66",
-			"#844",
-			"#844",
-			"#333"
-		);
+function BackButton(clickEvent) {
+	let setting = new RoundRectButtonSetting(30, 30, 50, 50);
+	setting.fontStyle.boundsAlignH = "center";	// left, center. right
+	setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+	setting.strokeWidthPx = 3;
+	setting.setStrokeColor(
+		0xaa6666,
+		0x884444,
+		0x884444,
+		0x333333
+	);
+	setting.setButtonColor(
+		0xffdddd,
+		0xddaaaa,
+		0xddaaaa,
+		0x666666
+	);
+	setting.setTextColor(
+		"#a66",
+		"#844",
+		"#844",
+		"#333"
+	);
 
-		super(setting, RoundRectButton.NONE_ICON, "<", clickEvent);
-	}
+	new RoundRectButton(setting, RoundRectButton.NONE_ICON, "<", clickEvent);
+}
 
+BackButton.prototype.startState = function(stateName) {
+    var game = this.backButton.parent.game;
+    game.state.start(stateName);
 }

src/game/lib/button/fullscreen_button.js

@@ -1,47 +1,46 @@
-class FullscreenButton extends RoundRectButton {
+FullscreenButton.prototype = Object.create(RoundRectButton);
+FullscreenButton.constructor = BackButton;
 
-	constructor() {
-		game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;
+function FullscreenButton() {
+	game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;
 
-		let setting = new RoundRectButtonSetting(game.world.width - 30, 30, 50, 50);
-		setting.fontStyle.boundsAlignH = "center";	// left, center. right
-		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
-		setting.strokeWidthPx = 3;
-		setting.setStrokeColor(
-			0x444488,
-			0x6666aa,
-			0x6666aa,
-			0x333333
-		);
-		setting.setButtonColor(
-			0xaaaadd,
-			0xddddff,
-			0xddddff,
-			0x666666
-		);
-		setting.setTextColor(
-			"#844",
-			"#a66",
-			"#a66",
-			"#333"
-		);
+	var setting = new RoundRectButtonSetting(game.world.width - 30, 30, 50, 50);
+	setting.fontStyle.boundsAlignH = "center";	// left, center. right
+	setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+	setting.strokeWidthPx = 3;
+	setting.setStrokeColor(
+		0x444488,
+		0x6666aa,
+		0x6666aa,
+		0x333333
+	);
+	setting.setButtonColor(
+		0xaaaadd,
+		0xddddff,
+		0xddddff,
+		0x666666
+	);
+	setting.setTextColor(
+		"#844",
+		"#a66",
+		"#a66",
+		"#333"
+	);
 
-		super(
-			setting,
-			RoundRectButton.NONE_ICON, RoundRectButton.NONE_BUTTON_TEXT,
-			(function() {
-				if(game.scale.isFullScreen) {
-					game.scale.stopFullScreen();
-				} else {
-					game.scale.startFullScreen();
-				}
-			})
-		);
-
-		let icon_fullscreen = game.add.sprite(0, 0, 'icon_fullscreen');
-		icon_fullscreen.width = 20;
-		icon_fullscreen.height = 20;
-		this.setIcon(icon_fullscreen);
-	}
+	var button = new RoundRectButton(
+		setting,
+		RoundRectButton.NONE_ICON, RoundRectButton.NONE_BUTTON_TEXT,
+		(function() {
+			if(game.scale.isFullScreen) {
+				game.scale.stopFullScreen();
+			} else {
+				game.scale.startFullScreen();
+			}
+		})
+	);
 
+	var icon_fullscreen = game.add.sprite(0, 0, 'icon_fullscreen');
+	icon_fullscreen.width = 20;
+	icon_fullscreen.height = 20;
+	button.setIcon(icon_fullscreen);
 }

src/game/lib/button/game_app_button.js

@@ -1,78 +1,92 @@
-class GameAppButton extends RoundRectButton {
+GameAppButton.prototype = Object.create(RoundRectButton.prototype);
+GameAppButton.constructor = GameAppButton;
 
-	constructor(x, y, type, iconName, buttonText, clickEvent) {
-		let setting = new RoundRectButtonSetting(
-			x, y,
-			GameAppButton.BUTTON_WIDTH, GameAppButton.BUTTON_HEIGHT
+function GameAppButton(x, y, type, iconName, buttonText, appInfo) {
+	var setting = new RoundRectButtonSetting(
+		x, y,
+		GameAppButton.BUTTON_WIDTH, GameAppButton.BUTTON_HEIGHT
+	);
+	setting.fontStyle.boundsAlignH = "center";	// left, center. right
+	setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+	setting.strokeWidthPx = 5;
+
+	switch(type) {
+		case GameAppButton.TYPE_MOUSE_APP:
+		setting.setStrokeColor(
+			0xaa6666,
+			0x884444,
+			0x884444,
+			0x333333
 		);
-		setting.fontStyle.boundsAlignH = "center";	// left, center. right
-		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
-		setting.strokeWidthPx = 5;
-
-		switch(type) {
-			case GameAppButton.TYPE_MOUSE_APP:
-			setting.setStrokeColor(
-				0xaa6666,
-				0x884444,
-				0x884444,
-				0x333333
-			);
-			setting.setButtonColor(
-				0xffdddd,
-				0xddaaaa,
-				0xddaaaa,
-				0x666666
-			);
-			setting.setTextColor(
-				"#a66",
-				"#844",
-				"#844",
-				"#333"
-			);
-			break;
-			case GameAppButton.TYPE_TYPING_PRACTICE:
-			case GameAppButton.TYPE_TYPING_APP:
-			setting.setStrokeColor(
-				0x444488,
-				0x6666aa,
-				0x6666aa,
-				0x333333
-			);
-			setting.setButtonColor(
-				0xaaaadd,
-				0xddddff,
-				0xddddff,
-				0x666666
-			);
-			setting.setTextColor(
-				"#844",
-				"#a66",
-				"#a66",
-				"#333"
-			);
-			break;
-		}
-
-		setting.fontStyle = {
-			font: "24px Arial",
-			boundsAlignH: "center",		// left, center. right
-			boundsAlignV: "middle", 	// top, middle, bottom
-			fill: "#fff"
-		};
-
-		let textCount = buttonText.length;
-		if(textCount > 7)
-			setting.fontStyle.font = "18px Arial";
-		else if(textCount > 5)
-			setting.fontStyle.font = "22px Arial";
-		else
-			setting.fontStyle.font = "24px Arial";
-
-		super(setting, iconName, buttonText, clickEvent);
+		setting.setButtonColor(
+			0xffdddd,
+			0xddaaaa,
+			0xddaaaa,
+			0x666666
+		);
+		setting.setTextColor(
+			"#a66",
+			"#844",
+			"#844",
+			"#333"
+		);
+		break;
+		case GameAppButton.TYPE_TYPING_PRACTICE:
+		case GameAppButton.TYPE_TYPING_APP:
+		setting.setStrokeColor(
+			0x444488,
+			0x6666aa,
+			0x6666aa,
+			0x333333
+		);
+		setting.setButtonColor(
+			0xaaaadd,
+			0xddddff,
+			0xddddff,
+			0x666666
+		);
+		setting.setTextColor(
+			"#844",
+			"#a66",
+			"#a66",
+			"#333"
+		);
+		break;
 	}
 
+	setting.fontStyle = {
+		font: "24px Arial",
+		boundsAlignH: "center",		// left, center. right
+		boundsAlignV: "middle", 	// top, middle, bottom
+		fill: "#fff"
+	};
+
+	var textCount = buttonText.length;
+	if(textCount > 7)
+		setting.fontStyle.font = "18px Arial";
+	else if(textCount > 5)
+		setting.fontStyle.font = "22px Arial";
+	else
+		setting.fontStyle.font = "24px Arial";
+
+	this.appInfo = appInfo;
+	RoundRectButton.call(
+		this, setting,
+		iconName, buttonText,
+		this.clickEvent
+	);
 }
 
+
+GameAppButton.prototype.clickEvent = function() {
+	sessionStorageManager.playingAppID = this.appInfo.AppID;
+	sessionStorageManager.playingAppName = this.appInfo.AppName;
+	sessionStorageManager.playingAppKoreanName = this.appInfo.KoreanName;
+
+	location.href = '../../web/client/start.html';
+}
+
+
 GameAppButton.TYPE_MOUSE_APP		= 0;
 GameAppButton.TYPE_TYPING_PRACTICE	= 1;
 GameAppButton.TYPE_TYPING_APP		= 2;

src/game/lib/button/round_rect_button.js

@@ -1,52 +1,49 @@
-class RoundRectButtonSetting {
-
-	constructor(x, y, width, height, roundAmount) {
-		this.x = x;
-		this.y = y;
-		this.width = width;
-		this.height = height;
-		this.roundAmount = 0;
-		if(typeof roundAmount === "undefined") {
-			let shorterSide = width > height ? height : width;
-			this.roundAmount = shorterSide * 0.1;
-		} else {
-			this.roundAmount = roundAmount;
-		}
-		this.strokeWidthPx = RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX;
-
-
-		this.strokeColors = RoundRectButtonSetting.DEFAULT_STROKE_COLORS;
-		this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS;
-		this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS;
-		this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT;
-	};
-
-	setStrokeColor(out, over, down, disabled) {
-		this.strokeColors = { };
-		this.strokeColors.out = out;
-		this.strokeColors.over = over;
-		this.strokeColors.down = down;
-		this.strokeColors.disabled = disabled;
+function RoundRectButtonSetting(x, y, width, height, roundAmount) {
+	this.x = x;
+	this.y = y;
+	this.width = width;
+	this.height = height;
+	this.roundAmount = 0;
+	if(typeof roundAmount === "undefined") {
+		var shorterSide = width > height ? height : width;
+		this.roundAmount = shorterSide * 0.1;
+	} else {
+		this.roundAmount = roundAmount;
 	}
+	this.strokeWidthPx = RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX;
 
-	setButtonColor(out, over, down, disabled) {
-		this.buttonColors = { };
-		this.buttonColors.out = out;
-		this.buttonColors.over = over;
-		this.buttonColors.down = down;
-		this.buttonColors.disabled = disabled;
-	}
 
-	setTextColor(out, over, down, disabled) {
-		this.textColors = { };
-		this.textColors.out = out;
-		this.textColors.over = over;
-		this.textColors.down = down;
-		this.textColors.disabled = disabled;
-	}
+	this.strokeColors = RoundRectButtonSetting.DEFAULT_STROKE_COLORS;
+	this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS;
+	this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS;
+	this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT;
+};
 
+RoundRectButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled) {
+	this.strokeColors = { };
+	this.strokeColors.out = out;
+	this.strokeColors.over = over;
+	this.strokeColors.down = down;
+	this.strokeColors.disabled = disabled;
 }
 
+RoundRectButtonSetting.prototype.setButtonColor = function(out, over, down, disabled) {
+	this.buttonColors = { };
+	this.buttonColors.out = out;
+	this.buttonColors.over = over;
+	this.buttonColors.down = down;
+	this.buttonColors.disabled = disabled;
+}
+
+RoundRectButtonSetting.prototype.setTextColor = function(out, over, down, disabled) {
+	this.textColors = { };
+	this.textColors.out = out;
+	this.textColors.over = over;
+	this.textColors.down = down;
+	this.textColors.disabled = disabled;
+}
+
+
 RoundRectButtonSetting.DEFAULT_STROKE_COLORS = {
 	out: 0x666666,
 	over: 0x333333,
@@ -80,176 +77,175 @@ RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX		= 5;	// in pixel
 
 
 
-class RoundRectButton {
-	constructor(roundRectSetting, iconName, buttonText, clickEvent) {
-		this.setting = roundRectSetting;
-		this.clickEvent = clickEvent;
 
-		this.buttonStroke = this.makeButtonStroke();
-		// this.buttonStroke.anchor.setTo(0.5, 0.5);
-		this.buttonStroke.inputEnabled = true;
-		this.setEventMethod(this.buttonStroke);
+function RoundRectButton(roundRectSetting, iconName, buttonText, clickEvent) {
+	this.setting = roundRectSetting;
+	this.clickEvent = clickEvent;
 
-		this.button = this.makeButtonSprite();
+	this.buttonStroke = this.makeButtonStroke();
+	// this.buttonStroke.anchor.setTo(0.5, 0.5);
+	this.buttonStroke.inputEnabled = true;
+	this.setEventMethod(this.buttonStroke);
 
-		this.text = this.makeText(buttonText);
-		if(buttonText.length > 0) {
-			this.button.addChild(this.text);
+	this.button = this.makeButtonSprite();
+
+	this.text = this.makeText(buttonText);
+	if(buttonText.length > 0) {
+		this.button.addChild(this.text);
+	}
+
+	if(iconName.length > 0) {
+		this.icon = this.makeIcon(iconName);
+		this.setIcon(this.icon);
+	}
+
+	// this.button.anchor.setTo(0.5, 0.5);
+	this.button.inputEnabled = true;
+	this.setEventMethod(this.button);
+
+	this.mouseOut();
+}
+
+RoundRectButton.prototype.setEventMethod = function(target) {
+	target.events.onInputOver.add(function() { this.mouseOver(); }, this);
+	target.events.onInputOut.add(function() { this.mouseOut(); }, this);
+	target.events.onInputDown.add(function() {
+		this.mouseDown();
+
+		if(this.clickEvent) {
+			this.clickEvent();
 		}
+	}, this);
+	target.events.onInputUp.add(function() { this.mouseOver(); }, this);
+}
 
-		if(iconName.length > 0) {
-			this.icon = this.makeIcon(iconName);
-			this.setIcon(this.icon);
-		}
+RoundRectButton.prototype.makeButtonStroke = function() {	// outter(bigger) round rect sprite
+	var btnTexture = new Phaser.Graphics()
+		.beginFill(0xffffff)
+		.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
+		.endFill()
+		.generateTexture();
 
-		// this.button.anchor.setTo(0.5, 0.5);
-		this.button.inputEnabled = true;
-		this.setEventMethod(this.button);
+	return game.add.sprite(
+		this.setting.x - this.setting.width / 2,
+		this.setting.y - this.setting.height / 2,
+		btnTexture
+	);
+}
 
+RoundRectButton.prototype.makeButtonSprite = function() {	// inner(smaller) round rect sprite
+	var width = this.setting.width - this.setting.strokeWidthPx * 2;
+	var height = this.setting.height - this.setting.strokeWidthPx * 2;
+	var innerRoundAmount = this.setting.roundAmount * (width / this.setting.width / 1.5);
+
+	var btnTexture = new Phaser.Graphics()
+		.beginFill(0xffffff)
+		.drawRoundedRect(this.setting.strokeWidthPx, this.setting.strokeWidthPx, width, height, innerRoundAmount)
+		.endFill()
+		.generateTexture();
+
+	// return game.add.sprite(0, 0, btnTexture);
+	return game.add.sprite(
+		this.setting.x - this.setting.width / 2 + this.setting.strokeWidthPx,
+		this.setting.y - this.setting.height / 2 + this.setting.strokeWidthPx,
+		btnTexture
+	);
+}
+
+RoundRectButton.prototype.makeIcon = function(iconName) {
+	var icon = game.add.sprite(0, 0, iconName);
+	icon.width = 80;
+	icon.height = 80;
+
+	return icon;
+}
+
+RoundRectButton.prototype.makeText = function(textContent) {
+	var width = this.setting.width - this.setting.strokeWidthPx * 2;
+	var height = this.setting.height - this.setting.strokeWidthPx * 2;
+
+	var btnText = game.add.text(0, 0, textContent, this.setting.fontStyle)
+		.setTextBounds(0, 0, width, this.setting.height);
+
+	btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
+	// btnText.anchor.setTo(0.5);
+
+	return btnText;
+}
+
+RoundRectButton.prototype.setIcon = function(icon) {
+	this.buttonIcon = this.button.addChild(icon);
+	this.buttonIcon.x = this.button.width / 2;
+	this.buttonIcon.y = this.button.height / 2;
+	this.buttonIcon.anchor.setTo(0.5, 0.5);
+
+	this.mouseOut();
+}
+
+
+RoundRectButton.prototype.mouseOut = function() {
+	this.text.fill = this.setting.textColors.out;
+	this.buttonStroke.tint = this.setting.strokeColors.out;
+	this.button.tint = this.setting.buttonColors.out;
+	if(typeof this.buttonIcon !== "undefined") {
+		this.buttonIcon.tint = this.setting.strokeColors.out;
+	}
+}
+
+RoundRectButton.prototype.mouseOver = function() {
+	this.text.fill = this.setting.textColors.over;
+	this.buttonStroke.tint = this.setting.strokeColors.over;
+	this.button.tint = this.setting.buttonColors.over;
+	if(typeof this.buttonIcon !== "undefined") {
+		this.buttonIcon.tint = this.setting.strokeColors.over;
+	}
+}
+
+RoundRectButton.prototype.mouseDown = function() {
+	this.text.fill = this.setting.textColors.down;
+	this.buttonStroke.tint = this.setting.strokeColors.down;
+	this.button.tint = this.setting.buttonColors.down;
+	if(typeof this.buttonIcon !== "undefined") {
+		this.buttonIcon.tint = this.setting.strokeColors.down;
+	}
+}
+
+RoundRectButton.prototype.buttonDisabled = function() {
+	this.text.fill = this.setting.textColors.disabled;
+	this.buttonStroke.tint = this.setting.strokeColors.disabled;
+	this.button.tint = this.setting.buttonColors.disabled;
+	if(typeof this.buttonIcon !== "undefined") {
+		this.buttonIcon.tint = this.setting.strokeColors.disabled;
+	}
+}
+
+
+
+RoundRectButton.prototype.move = function(x, y) {
+	this.buttonStroke.x = x - this.setting.width / 2;
+	this.buttonStroke.y = y - this.setting.height / 2;
+
+	this.button.x = x  - this.setting.width / 2+ this.setting.strokeWidthPx;
+	this.button.y = y  - this.setting.height / 2+ this.setting.strokeWidthPx;
+}
+
+RoundRectButton.prototype.getInputEnabled = function() {
+	return this.button.inputEnabled;
+}
+
+RoundRectButton.prototype.setInputEnabled = function(isEnabled) {
+	this.buttonStroke.inputEnabled = isEnabled;
+	this.button.inputEnabled = isEnabled;
+
+	if(isEnabled === true) {
 		this.mouseOut();
+	} else {
+		this.buttonDisabled();
 	}
+}
 
-	setEventMethod(target) {
-		target.events.onInputOver.add(function() { this.mouseOver(); }, this);
-		target.events.onInputOut.add(function() { this.mouseOut(); }, this);
-		target.events.onInputDown.add(function() {
-			this.mouseDown();
-
-			if(this.clickEvent) {
-				this.clickEvent();
-			}
-		}, this);
-		target.events.onInputUp.add(function() { this.mouseOver(); }, this);
-	}
-
-	makeButtonStroke() {	// outter(bigger) round rect sprite
-		let btnTexture = new Phaser.Graphics()
-			.beginFill(0xffffff)
-			.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
-			.endFill()
-			.generateTexture();
-
-		return game.add.sprite(
-			this.setting.x - this.setting.width / 2,
-			this.setting.y - this.setting.height / 2,
-			btnTexture
-		);
-	}
-
-	makeButtonSprite() {	// inner(smaller) round rect sprite
-		let width = this.setting.width - this.setting.strokeWidthPx * 2;
-		let height = this.setting.height - this.setting.strokeWidthPx * 2;
-		let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width / 1.5);
-
-		let btnTexture = new Phaser.Graphics()
-			.beginFill(0xffffff)
-			.drawRoundedRect(this.setting.strokeWidthPx, this.setting.strokeWidthPx, width, height, innerRoundAmount)
-			.endFill()
-			.generateTexture();
-
-		// return game.add.sprite(0, 0, btnTexture);
-		return game.add.sprite(
-			this.setting.x - this.setting.width / 2 + this.setting.strokeWidthPx,
-			this.setting.y - this.setting.height / 2 + this.setting.strokeWidthPx,
-			btnTexture
-		);
-	}
-
-	makeIcon(iconName) {
-		let icon = game.add.sprite(0, 0, iconName);
-		icon.width = 80;
-		icon.height = 80;
-
-		return icon;
-	}
-
-	makeText(textContent) {
-		let width = this.setting.width - this.setting.strokeWidthPx * 2;
-		let height = this.setting.height - this.setting.strokeWidthPx * 2;
-
-		let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle)
-			.setTextBounds(0, 0, width, this.setting.height);
-
-		btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
-		// btnText.anchor.setTo(0.5);
-
-		return btnText;
-	}
-
-	setIcon(icon) {
-		this.buttonIcon = this.button.addChild(icon);
-		this.buttonIcon.x = this.button.width / 2;
-		this.buttonIcon.y = this.button.height / 2;
-		this.buttonIcon.anchor.setTo(0.5, 0.5);
-
-		this.mouseOut();
-	}
-
-
-	mouseOut() {
-		this.text.fill = this.setting.textColors.out;
-		this.buttonStroke.tint = this.setting.strokeColors.out;
-		this.button.tint = this.setting.buttonColors.out;
-		if(typeof this.buttonIcon !== "undefined") {
-			this.buttonIcon.tint = this.setting.strokeColors.out;
-		}
-	}
-
-	mouseOver() {
-		this.text.fill = this.setting.textColors.over;
-		this.buttonStroke.tint = this.setting.strokeColors.over;
-		this.button.tint = this.setting.buttonColors.over;
-		if(typeof this.buttonIcon !== "undefined") {
-			this.buttonIcon.tint = this.setting.strokeColors.over;
-		}
-	}
-
-	mouseDown() {
-		this.text.fill = this.setting.textColors.down;
-		this.buttonStroke.tint = this.setting.strokeColors.down;
-		this.button.tint = this.setting.buttonColors.down;
-		if(typeof this.buttonIcon !== "undefined") {
-			this.buttonIcon.tint = this.setting.strokeColors.down;
-		}
-	}
-
-	buttonDisabled() {
-		this.text.fill = this.setting.textColors.disabled;
-		this.buttonStroke.tint = this.setting.strokeColors.disabled;
-		this.button.tint = this.setting.buttonColors.disabled;
-		if(typeof this.buttonIcon !== "undefined") {
-			this.buttonIcon.tint = this.setting.strokeColors.disabled;
-		}
-	}
-
-
-
-	move(x, y) {
-		this.buttonStroke.x = x - this.setting.width / 2;
-		this.buttonStroke.y = y - this.setting.height / 2;
-
-		this.button.x = x  - this.setting.width / 2+ this.setting.strokeWidthPx;
-		this.button.y = y  - this.setting.height / 2+ this.setting.strokeWidthPx;
-	}
-
-	get inputEnabled() {
-		return this.button.inputEnabled;
-	}
-
-	set inputEnabled(isEnabled) {
-		this.buttonStroke.inputEnabled = isEnabled;
-		this.button.inputEnabled = isEnabled;
-
-		if(isEnabled === true) {
-			this.mouseOut();
-		} else {
-			this.buttonDisabled();
-		}
-	}
-
-	set lineSpacing(spacingInPixels) {
-		this.text.lineSpacing = spacingInPixels;
-	}
+RoundRectButton.prototype.setLineSpacing = function(spacingInPixels) {
+	this.text.lineSpacing = spacingInPixels;
 }
 
 RoundRectButton.NONE_ICON			= "";

src/game/lib/button/typing_app_button.js

@@ -1,98 +1,111 @@
-class TypingAppButton extends RoundRectButton {
+TypingAppButton.prototype = Object.create(RoundRectButton.prototype);
+TypingAppButton.constructor = TypingAppButton;
 
-	constructor(type, x, y, iconName, buttonText, clickEvent) {
-		let setting = new RoundRectButtonSetting(x, y, TypingAppButton.BUTTON_WIDTH, TypingAppButton.BUTTON_HEIGHT);
-		setting.fontStyle.boundsAlignH = "center";	// left, center. right
-		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
-		setting.strokeWidthPx = 5;
+function TypingAppButton(type, x, y, iconName, buttonText, appInfo) {
+	var setting = new RoundRectButtonSetting(x, y, TypingAppButton.BUTTON_WIDTH, TypingAppButton.BUTTON_HEIGHT);
+	setting.fontStyle.boundsAlignH = "center";	// left, center. right
+	setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+	setting.strokeWidthPx = 5;
 
-		switch(type) {
-			case TypingAppButton.TYPE_PRACTICE_KOREAN:
-			case TypingAppButton.TYPE_TEST_KOREAN:
-			setting.setStrokeColor(
-				0xffffff,
-				0xeeeeff,
-				0xccccdd,
-				0x333333
-			);
-			setting.setButtonColor(
-				0xeeeeff,
-				0xddddee,
-				0xccccdd,
-				0x666666
-			);
-			setting.setTextColor(
-				"#66c",
-				"#66c",
-				"#66c",
-				"#333"
-			);
-			break;
-
-			case TypingAppButton.TYPE_PRACTICE_ENGLISH:
-			case TypingAppButton.TYPE_TEST_ENGLISH:
-			setting.setStrokeColor(
-				0xffffff,
-				0xffeeee,
-				0xddcccc,
-				0x333333
-			);
-			setting.setButtonColor(
-				0xffeeee,
-				0xeedddd,
-				0xddcccc,
-				0x666666
-			);
-			setting.setTextColor(
-				"#a66",
-				"#a66",
-				"#a66",
-				"#333"
-			);
-			break;
-		}
-		/*
+	switch(type) {
+		case TypingAppButton.TYPE_PRACTICE_KOREAN:
+		case TypingAppButton.TYPE_TEST_KOREAN:
 		setting.setStrokeColor(
-			0xffffff, //0x444488,
-			0x6666aa,
-			0x6666aa,
+			0xffffff,
+			0xeeeeff,
+			0xccccdd,
 			0x333333
 		);
 		setting.setButtonColor(
-			0xaaaadd,
-			0xddddff,
-			0xddddff,
+			0xeeeeff,
+			0xddddee,
+			0xccccdd,
 			0x666666
 		);
 		setting.setTextColor(
-			"#844",
+			"#66c",
+			"#66c",
+			"#66c",
+			"#333"
+		);
+		break;
+
+		case TypingAppButton.TYPE_PRACTICE_ENGLISH:
+		case TypingAppButton.TYPE_TEST_ENGLISH:
+		setting.setStrokeColor(
+			0xffffff,
+			0xffeeee,
+			0xddcccc,
+			0x333333
+		);
+		setting.setButtonColor(
+			0xffeeee,
+			0xeedddd,
+			0xddcccc,
+			0x666666
+		);
+		setting.setTextColor(
+			"#a66",
 			"#a66",
 			"#a66",
 			"#333"
 		);
-		*/
+		break;
+	}
+	/*
+	setting.setStrokeColor(
+		0xffffff, //0x444488,
+		0x6666aa,
+		0x6666aa,
+		0x333333
+	);
+	setting.setButtonColor(
+		0xaaaadd,
+		0xddddff,
+		0xddddff,
+		0x666666
+	);
+	setting.setTextColor(
+		"#844",
+		"#a66",
+		"#a66",
+		"#333"
+	);
+	*/
 
-		setting.fontStyle = {
-			font: "22px Arial",
-			boundsAlignH: "center",		// left, center. right
-			boundsAlignV: "middle", 	// top, middle, bottom
-			fill: "#fff"
-		};
+	setting.fontStyle = {
+		font: "22px Arial",
+		boundsAlignH: "center",		// left, center. right
+		boundsAlignV: "middle", 	// top, middle, bottom
+		fill: "#fff"
+	};
 
-		super(setting, iconName, buttonText, clickEvent);
+	this.appInfo = appInfo;
+	RoundRectButton.call(
+		this, setting,
+		iconName, buttonText,
+		this.clickEvent
+	);
 
-		this.text.x = 30;
-
-		if(iconName.length > 0) {
-			this.icon.x = 40;
-			this.icon.width = 100;
-			this.icon.height = 100;
-		}
+	this.text.x = 30;
 
+	if(iconName.length > 0) {
+		this.icon.x = 40;
+		this.icon.width = 100;
+		this.icon.height = 100;
 	}
 
 }
 
+TypingAppButton.prototype.clickEvent = function() {
+	sessionStorageManager.playingAppID = this.appInfo.AppID;
+	sessionStorageManager.playingAppName = this.appInfo.AppName;
+	sessionStorageManager.playingAppKoreanName = this.appInfo.KoreanName;
+
+	location.href = '../../web/client/start.html';
+}
+
+
 TypingAppButton.TYPE_PRACTICE_KOREAN	= 0;
 TypingAppButton.TYPE_PRACTICE_ENGLISH	= 1;
 TypingAppButton.TYPE_TEST_KOREAN		= 2;

src/game/lib/button/typing_tab_button.js

@@ -1,46 +1,38 @@
-class TypingTabButton extends RoundRectButton {
+TypingTabButton.prototype = Object.create(RoundRectButton.prototype);
+TypingTabButton.constructor = TypingTabButton;
 
-	constructor(x, y, iconName, buttonText, clickEvent) {
-		let setting = new RoundRectButtonSetting(
-			x, y,
-			TypingTabButton.BUTTON_WIDTH, TypingTabButton.BUTTON_HEIGHT
-		);
-		setting.fontStyle.boundsAlignH = "center";	// left, center. right
-		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
-		setting.strokeWidthPx = 5;
+function TypingTabButton(x, y, iconName, buttonText, clickEvent) {
+	var setting = new RoundRectButtonSetting(
+		x, y,
+		TypingTabButton.BUTTON_WIDTH, TypingTabButton.BUTTON_HEIGHT
+	);
+	setting.fontStyle.boundsAlignH = "center";	// left, center. right
+	setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+	setting.strokeWidthPx = 5;
 
-		setting.setStrokeColor(
-			0x446688,
-			0x6688aa,
-			0x6688aa,
-			0x333333
-		);
-		setting.setButtonColor(
-			0xaabbdd,
-			0xddeeff,
-			0xddeeff,
-			0x666666
-		);
-		setting.setTextColor(
-			"#468",
-			"#68a",
-			"#68a",
-			"#333"
-		);
-
-		super(setting, iconName, buttonText, clickEvent);
-
-
-		if(iconName.length > 0) {
-			let icon_fullscreen = game.add.sprite(0, 0, iconName);
-			icon_fullscreen.width = 80;
-			icon_fullscreen.height = 80;
-			this.button.setIcon(icon_fullscreen);
-		}
-	}
+	setting.setStrokeColor(
+		0x446688,
+		0x6688aa,
+		0x6688aa,
+		0x333333
+	);
+	setting.setButtonColor(
+		0xaabbdd,
+		0xddeeff,
+		0xddeeff,
+		0x666666
+	);
+	setting.setTextColor(
+		"#468",
+		"#68a",
+		"#68a",
+		"#333"
+	);
 
+	RoundRectButton.call(this, setting, iconName, buttonText, clickEvent);
 }
 
+
 TypingTabButton.BUTTON_WIDTH		= 490;
 TypingTabButton.BUTTON_HEIGHT		= 80;
 

src/game/login/login.js

@@ -8,15 +8,13 @@ class Login {
 	}
 
 	create() {
-		self = this;
-
 		sessionStorageManager.clear();
 
 		this.game.stage.backgroundColor = '#4d4d4d';
 		this.textStyle = { font: "bold 32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "middle" };
 
 		// top ui
-		let screenTopUI = new ScreenTopUI();
+		var screenTopUI = new ScreenTopUI();
 		screenTopUI.makeBackButton( function() {
 			sessionStorageManager.clear();
 			location.href = '../../web/main/index.html';
@@ -25,7 +23,7 @@ class Login {
 
 
 
-		let textX = this.game.world.centerX - 320;
+		var textX = this.game.world.centerX - 320;
 		if(sessionStorageManager.maestroID === null)
 			this.makeMaestroNameText(textX, 200);
 		this.makeNameText(textX, 300);
@@ -64,7 +62,7 @@ class Login {
 	}
 
 	makeInputTypeText(x, y, text) {
-		let inputText = new InputTypeText(x + 420, y);
+		var inputText = new InputTypeText(x + 420, y);
 		inputText.anchor.set(0.5);
 		inputText.canvasInput.value('');
 		if(isDebugMode()) {
@@ -72,7 +70,7 @@ class Login {
 		}
 		inputText.canvasInput._onkeyup = function() {
 			if(event.keyCode == Phaser.Keyboard.ENTER) {
-				self.startMenu();
+				(function() { this.startMenu(); }).bind(this)
 			}
 		}
 
@@ -80,10 +78,14 @@ class Login {
 	}
 
 	makeStartButton(x, y) {
-		let setting = new RoundRectButtonSetting(x, y, 200, 100);
+		var setting = new RoundRectButtonSetting(x, y, 200, 100);
 		setting.fontStyle.fontWeight = "bold";
 
-		let startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "시작", this.startMenu);
+		var startButton = new RoundRectButton(
+			setting,
+			RoundRectButton.NONE_ICON, "시작",
+			(function() { this.startMenu(); }).bind(this)
+		);
 	}
 
 	makeInfoText(x, y) {
@@ -96,17 +98,21 @@ class Login {
 
 
 	startMenu() {
-		let maestroName = self.inputTextMaestroName.canvasInput._value;
-		sessionStorageManager.playerName = self.inputTextName.canvasInput._value;
-		let enterCode = self.inputTextEnterCode.canvasInput._value;
+		var maestroName = this.inputTextMaestroName.canvasInput._value;
+		sessionStorageManager.playerName = this.inputTextName.canvasInput._value;
+		var enterCode = this.inputTextEnterCode.canvasInput._value;
 
-		let dbConnectManager = new DBConnectManager();
+		var dbConnectManager = new DBConnectManager();
 		dbConnectManager.requestCheckPlayerLogin(
 			maestroName,
 			sessionStorageManager.playerName,
 			enterCode,
-			self.loginSucceeded,
-			self.loginFailed
+			(function(jsonData) {
+				this.loginSucceeded(jsonData);
+			}).bind(this),
+			(function(jsonData) {
+				this.loginFailed(jsonData);
+			}).bind(this)
 		);
 	}
 
@@ -131,7 +137,7 @@ class Login {
 		console.log('login failed, jsonData : ' + JSON.stringify(jsonData));
 
 		if(jsonData["error"] !== null) {
-			self.infoText.text = jsonData["error"];
+			this.infoText.text = jsonData["error"];
 		}
 	}
 

src/game/menu/app_area_bg.js

@@ -1,21 +1,17 @@
-class AppAreaBG {
+function AppAreaBG(color, alpha, x, y, width, height) {
+	game.add.graphics()
+		.beginFill(color, alpha)
+		.drawRect(x, y, width, height);
+}
 
-	constructor(color, alpha, x, y, width, height) {
-		game.add.graphics()
-			.beginFill(color, alpha)
-			.drawRect(x, y, width, height);
-	}
-
-	printText(text, x, y, size, color, alpha) {
-		let fontStyle = { font: "36px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" };
-		let titleText = game.add.text(x, y, text, fontStyle);
-		titleText.anchor.set(0.5);
-		titleText.fontSize = size;
-		titleText.addColor(color, 0);
-		titleText.alpha = alpha;
-	}
-
-};
+AppAreaBG.prototype.printText = function(text, x, y, size, color, alpha) {
+	let fontStyle = { font: "36px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" };
+	let titleText = game.add.text(x, y, text, fontStyle);
+	titleText.anchor.set(0.5);
+	titleText.fontSize = size;
+	titleText.addColor(color, 0);
+	titleText.alpha = alpha;
+}
 
 AppAreaBG.COLOR_MOUSE_APP		= 0xffce54;
 AppAreaBG.COLOR_TYPING_APP		= 0x99ccff;

src/game/menu/menu_app.js

@@ -1,18 +1,15 @@
-/////////////////////////////
-// MenuApp
+var MenuApp = {
 
-class MenuApp {
-
-	preload() {
+	preload: function() {
 		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
-	}
+	},
 
-	create() {
-		self = this;
-		this.game.stage.backgroundColor = '#4d4d4d';
+	create: function() {
+		game.stage.backgroundColor = '#4d4d4d';
 
 		// mouse app area
-		let mouseBG = new AppAreaBG(AppAreaBG.COLOR_MOUSE_APP, 1,
+		var mouseBG = new AppAreaBG(
+			AppAreaBG.COLOR_MOUSE_APP, 1,
 			0, 60,
 			GAME_SCREEN_SIZE.x, 280
 		);
@@ -23,7 +20,8 @@ class MenuApp {
 		);
 
 		// typing app area
-		let typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1,
+		var typingBG = new AppAreaBG(
+			AppAreaBG.COLOR_TYPING_APP, 1,
 			0, 340,
 			GAME_SCREEN_SIZE.x, 378
 		);
@@ -35,7 +33,7 @@ class MenuApp {
 
 
 		// top ui
-		let screenTopUI = new ScreenTopUI();
+		var screenTopUI = new ScreenTopUI();
 		screenTopUI.makeBackButton( function() {
 			sessionStorageManager.clear();
 			location.href = '../../web/client/login.html';
@@ -44,9 +42,9 @@ class MenuApp {
 
 
 		// bottom ui
-		let screenBottomUI = new ScreenBottomUI();
+		var screenBottomUI = new ScreenBottomUI();
 		// ScreenBottomUI.printLeftText("게임 진행 정보");
-		// let playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
+		// var playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
 		// ScreenBottomUI.printCenterText(playingAppName);
 		screenBottomUI.printCenterText("메뉴");
 		screenBottomUI.printRightText(sessionStorageManager.playerName);
@@ -55,83 +53,87 @@ class MenuApp {
 
 
 		this.loadAppData();
-	}
+	},
 
 
-	loadAppData() {
-		let dbConnectManager = new DBConnectManager();
+
+	loadAppData: function() {
+		var dbConnectManager = new DBConnectManager();
 		dbConnectManager.requestMenuAppList(
 			sessionStorageManager.maestroID,
-			self.loadSucceeded,
-			self.loadFailed
+			(function(replyJSON) {
+				this.loadSucceeded(replyJSON);
+			}).bind(this),
+			(function(replyJSON) {
+				this.loadFailed(replyJSON);
+			}).bind(this)
 		);
-	}
+	},
 
-	loadSucceeded(replyJSON) {
+	loadSucceeded: function(replyJSON) {
 		// console.log(replyJSON);
 
-		self.makeMouseAppButtons(
+		this.makeMouseAppButtons(
 			replyJSON.MouseAppList,
 			replyJSON.MouseActiveAppList
 		);
-		self.makeTypingButtons(
+		this.makeTypingButtons(
 			replyJSON.TypingPracticeAppCount,
 			replyJSON.TypingTestAppCount,
 			replyJSON.TypingAppList,
 			replyJSON.TypingActiveAppList
 		);
-	}
+	},
 
-	hasApp(appID, appList) {
-		for(let i = 0; i < appList.length; i++) {
+	hasApp: function(appID, appList) {
+		for(var i = 0; i < appList.length; i++) {
 			if(appList[i].AppID === appID)
 				return true;
 		}
 
 		return false;
-	}
+	},
 
-	makeMouseAppButtons(appList, activeAppList) {
+	makeMouseAppButtons: function(appList, activeAppList) {
 		// console.log(appList);
 
-		let mouseAppCount = Object.keys(appList).length;
+		var mouseAppCount = Object.keys(appList).length;
 
-		for(let i = 0; i < mouseAppCount; i++) {
-			let posX = self.getButtonPosX(i, mouseAppCount);
-			let posY = self.getButtonPosY(i, mouseAppCount, GameAppButton.BUTTON_UPPER_POS_Y);
+		for(var i = 0; i < mouseAppCount; i++) {
+			var posX = this.getButtonPosX(i, mouseAppCount);
+			var posY = this.getButtonPosY(i, mouseAppCount, GameAppButton.BUTTON_UPPER_POS_Y);
 
-			let app = appList[i];
-			let gameAppButton = new GameAppButton(
-				posX, posY, GameAppButton.TYPE_MOUSE_APP,
-				RoundRectButton.NONE_ICON,	// "icon_fullscreen",
-				app.KoreanName,
-				(function() {
-					sessionStorageManager.playingAppID = app.AppID;
-					sessionStorageManager.playingAppName = app.AppName;
-					sessionStorageManager.playingAppKoreanName = app.KoreanName;
-					location.href = '../../web/client/start.html';
-				})
+			var app = appList[i];
+			var gameAppButton = new GameAppButton(
+				posX, posY,
+				GameAppButton.TYPE_MOUSE_APP,
+				RoundRectButton.NONE_ICON,	app.KoreanName,
+				{
+					AppID: app.AppID,
+					AppName: app.AppName,
+					KoreanName: app.KoreanName
+				}
 			);
 
-			if(!self.hasApp(app.AppID, activeAppList))
-				gameAppButton.inputEnabled = false;
+			if(!this.hasApp(app.AppID, activeAppList))
+				gameAppButton.setInputEnabled(false);
 		}
-	}
+	},
 
-	makeTypingButtons(typingPracticeAppCount, typingTestAppCount, appList, activeAppList) {
+	makeTypingButtons: function(typingPracticeAppCount, typingTestAppCount, appList, activeAppList) {
 		// console.log(typingPracticeAppCount);
 		// console.log(typingTestAppCount);
 		// console.log(appList);
 
-		let isTypingPracticeAppExist = typingPracticeAppCount > 0 ? true : false;
-		let isTypingTestAppExist = typingTestAppCount > 0 ? true : false;
+		var isTypingPracticeAppExist = typingPracticeAppCount > 0 ? true : false;
+		var isTypingTestAppExist = typingTestAppCount > 0 ? true : false;
 
-		let typingAppTotalCount = Object.keys(appList).length;
-		let typingAppIndex = 0;
+		var typingAppTotalCount = Object.keys(appList).length;
+		var typingAppIndex = 0;
 
 
 		// typing tab buttons
-		let typingPracticeTabButton = new TypingTabButton(
+		var typingPracticeTabButton = new TypingTabButton(
 			TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
 			"", "타자 연습",
 			(function() {
@@ -139,9 +141,9 @@ class MenuApp {
 			})
 		);
 		if(typingPracticeAppCount === 0)
-			typingPracticeTabButton.inputEnabled = false;
+			typingPracticeTabButton.setInputEnabled(false);
 
-		let typingTestTabButton = new TypingTabButton(
+		var typingTestTabButton = new TypingTabButton(
 			TypingTabButton.TEST_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
 			"", "타자 시험",
 			(function() {
@@ -149,81 +151,79 @@ class MenuApp {
 			})
 		);
 		if(typingTestAppCount === 0)
-			typingTestTabButton.inputEnabled = false;
+			typingTestTabButton.setInputEnabled(false);
 
 
 		// typing app buttons
-		for(let typingButtonIndex = 0; typingButtonIndex < typingAppTotalCount; typingButtonIndex++) {
+		for(var typingButtonIndex = 0; typingButtonIndex < typingAppTotalCount; typingButtonIndex++) {
 
-			let posX = self.getButtonPosX(
+			var posX = this.getButtonPosX(
 				typingButtonIndex, typingAppTotalCount
 			);
-			let posY = self.getButtonPosY(
+			var posY = this.getButtonPosY(
 				typingButtonIndex, typingAppTotalCount, GameAppButton.BUTTON_LOWER_POS_Y
 			);
 
-			let app = appList[typingAppIndex];
-			let isKoreanTypingApp = app.AppID < 32 ? true : false;
+			var app = appList[typingAppIndex];
+			var isKoreanTypingApp = app.AppID < 32 ? true : false;
 
-			let gameAppButton = new GameAppButton(
+			var gameAppButton = new GameAppButton(
 				posX, posY, GameAppButton.TYPE_TYPING_APP,
 				RoundRectButton.NONE_ICON,	// "icon_fullscreen",
 				// (isKoreanTypingApp ? "(한글)" : "(영문)") + "\n" + app.KoreanName,
 				app.KoreanName,
-				(function() {
-					sessionStorageManager.playingAppID = app.AppID;
-					sessionStorageManager.playingAppName = app.AppName;
-					sessionStorageManager.playingAppKoreanName = app.KoreanName;
-					location.href = '../../web/client/start.html';
-				})
+				{
+					AppID: app.AppID,
+					AppName: app.AppName,
+					KoreanName: app.KoreanName
+				}
 			);
 
-			if(!self.hasApp(app.AppID, activeAppList))
-				gameAppButton.inputEnabled = false;
+			if(!this.hasApp(app.AppID, activeAppList))
+				gameAppButton.setInputEnabled(false);
 
 			typingAppIndex++;
 		}
-	}
+	},
 
-	getButtonPosX(index, buttonCount) {
-		let gap = GameAppButton.BUTTON_WIDTH + GameAppButton.BUTTON_GAP;
-		let maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap );
+	getButtonPosX: function(index, buttonCount) {
+		var gap = GameAppButton.BUTTON_WIDTH + GameAppButton.BUTTON_GAP;
+		var maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap );
 		// console.log("maxColumnNum : " + maxColumnNum);
-		let rowCount = Math.ceil(buttonCount / maxColumnNum);
+		var rowCount = Math.ceil(buttonCount / maxColumnNum);
 		// console.log("rowCount : " + rowCount);
 
-		let columnIndex = index % maxColumnNum;
+		var columnIndex = index % maxColumnNum;
 		// console.log("columnIndex : " + columnIndex);
-		let rowIndex = Math.floor(index / maxColumnNum);
+		var rowIndex = Math.floor(index / maxColumnNum);
 		// console.log("rowIndex : " + rowIndex);
 
-		let columnCountForThisRow = 0;
+		var columnCountForThisRow = 0;
 		if(rowIndex < rowCount - 1)
 			columnCountForThisRow = maxColumnNum;
 		else
 			columnCountForThisRow = buttonCount - (maxColumnNum * rowIndex);
 		// console.log("columnCountForThisRow : " + columnCountForThisRow);
 
-		let startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) );
+		var startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) );
 		return startX + gap * columnIndex;
-	}
+	},
 
-	getButtonPosY(index, buttonCount, startPosY) {
-		let gap = GameAppButton.BUTTON_HEIGHT + GameAppButton.BUTTON_GAP;
-		let maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap );
+	getButtonPosY: function(index, buttonCount, startPosY) {
+		var gap = GameAppButton.BUTTON_HEIGHT + GameAppButton.BUTTON_GAP;
+		var maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap );
 		// console.log("maxColumnNum : " + maxColumnNum);
-		let rowCount = Math.ceil(buttonCount / maxColumnNum);
+		var rowCount = Math.ceil(buttonCount / maxColumnNum);
 		// console.log("rowCount : " + rowCount);
 
-		let rowIndex = Math.floor(index / maxColumnNum);
+		var rowIndex = Math.floor(index / maxColumnNum);
 		// console.log("rowIndex : " + rowIndex);
 
-		let startY = startPosY - ( (gap / 2) * (rowCount - 1) );
+		var startY = startPosY - ( (gap / 2) * (rowCount - 1) );
 		return startY + gap * rowIndex;
-	}
+	},
 
-	loadFailed(replyJSON) {
+	loadFailed: function(replyJSON) {
 		// console.log('login failed, jsonData : ' + JSON.stringify(replyJSON));
 	}
-
 }

src/game/menu/menu_typing_practice.js

@@ -1,27 +1,22 @@
-/////////////////////////////
-// MenuTypingPractice
-
-class MenuTypingPractice {
-
+var MenuTypingPractice = {
 	preload() {
 		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
 		game.load.image('space_invaders', '../../../resources/image/icon/space_invaders.png');
 
 		Animal.loadResources();
-	}
+	},
 
 	create() {
-		self = this;
-		this.game.stage.backgroundColor = '#4d4d4d';
+		game.stage.backgroundColor = '#4d4d4d';
 
 		// typing app area
-		let typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1,
+		var typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1,
 			0, 60,
 			GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y - 110
 		);
 
 		// korean app area
-		// let koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1,
+		// var koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1,
 		// 	AppAreaBG.MARGIN_X, 60 + AppAreaBG.GAP_Y,
 		// 	GAME_SCREEN_SIZE.x - AppAreaBG.MARGIN_X * 2, 270
 		// );
@@ -32,7 +27,7 @@ class MenuTypingPractice {
 		// );
 
 		// english app area
-		// let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
+		// var englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
 		// 	AppAreaBG.MARGIN_X, 340,
 		// 	GAME_SCREEN_SIZE.x - AppAreaBG.MARGIN_X * 2, 270
 		// );
@@ -44,7 +39,7 @@ class MenuTypingPractice {
 
 
 		// top ui
-		let screenTopUI = new ScreenTopUI();
+		var screenTopUI = new ScreenTopUI();
 		screenTopUI.makeBackButton( function() {
 			location.href = '../../web/client/menu_app.html';
 		});
@@ -52,178 +47,179 @@ class MenuTypingPractice {
 
 
 		// typing tab buttons
-		let typingPracticeTabButton = new TypingTabButton(
+		var typingPracticeTabButton = new TypingTabButton(
 			TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
 			"", "타자 연습",
 			(function() {
 				location.href = '../../web/client/menu_typing_practice.html';
 			})
 		);
-		typingPracticeTabButton.inputEnabled = false;
+		typingPracticeTabButton.setInputEnabled(false);
 
-		let typingTestTabButton = new TypingTabButton(
+		var typingTestTabButton = new TypingTabButton(
 			TypingTabButton.TEST_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
 			"", "타자 시험",
 			(function() {
 				location.href = '../../web/client/menu_typing_test.html';
 			})
 		);
-		// typingTestTabButton.inputEnabled = false;
+		// typingTestTabButton.setInputEnabled(false);
 
 		// bottom ui
-		let screenBottomUI = new ScreenBottomUI();
+		var screenBottomUI = new ScreenBottomUI();
 		// screenBottomUI.printLeftText("게임 진행 정보");
 		screenBottomUI.printCenterText("메뉴 > 타자 연습");
 		screenBottomUI.printRightText(sessionStorageManager.playerName);
 
 
 		this.makeActiveTypingPracticeAppButtons();
-	}
+	},
 
 
-	makeActiveTypingPracticeAppButtons() {
-		let dbConnectManager = new DBConnectManager();
+	makeActiveTypingPracticeAppButtons: function() {
+		var dbConnectManager = new DBConnectManager();
 		dbConnectManager.requestTypingPracticeAppList(
 			sessionStorageManager.maestroID,
 			sessionStorageManager.playerID,
-			self.downloadListSucceeded,
-			self.downloadListFailed
+			(function(replyJSON) {
+				this.downloadListSucceeded(replyJSON);
+			}).bind(this),
+			(function(replyJSON) {
+				this.downloadListFailed(replyJSON);
+			}).bind(this)
 		);
 
-	}
+	},
 
-	hasApp(appID, appList) {
-		for(let i = 0; i < appList.length; i++) {
+	hasApp: function(appID, appList) {
+		for(var i = 0; i < appList.length; i++) {
 			if(appList[i].AppID === appID)
 				return true;
 		}
 
 		return false;
-	}
+	},
 
-	getBestRecord(jsonList, appID) {
-		let count = Object.keys(jsonList).length;
+	getBestRecord: function(jsonList, appID) {
+		var count = Object.keys(jsonList).length;
 
-		for(let i = 0; i < count; i++) {
+		for(var i = 0; i < count; i++) {
 			if(jsonList[i].AppID === appID)
 				return jsonList[i].BestRecord;
 		}
 
 		return 0;
-	}
+	},
 
-	getIconImage(jsonList, appID) {
-		let bestRecord = this.getBestRecord(jsonList, appID);
+	getIconImage: function(jsonList, appID) {
+		var bestRecord = this.getBestRecord(jsonList, appID);
 
 		if(bestRecord === 0)
 			return "snail_shadow";
 
-		let animalLevel = Animal.animalLevelIDByRecord(bestRecord, Animal.TYPE_PRACTICE);
+		var animalLevel = Animal.animalLevelIDByRecord(bestRecord, Animal.TYPE_PRACTICE);
 		return Animal.SPECIES_DATA[animalLevel].species + Animal.SPRITE_NAMES.icon;
-	}
+	},
 
-	downloadListSucceeded(replyJSON) {
+	downloadListSucceeded: function(replyJSON) {
 		// console.log(replyJSON);
 
-		let buttonWidthGap = TypingAppButton.BUTTON_WIDTH + MenuTypingPractice.BUTTON_GAP;
+		var buttonWidthGap = TypingAppButton.BUTTON_WIDTH + MenuTypingPractice.BUTTON_GAP;
 
-		let koreanTypingPracticeAppCount = Object.keys(replyJSON.KoreanAppList).length;
-		let englishTypingPracticeAppCount = Object.keys(replyJSON.EnglishAppList).length;
+		var koreanTypingPracticeAppCount = Object.keys(replyJSON.KoreanAppList).length;
+		var englishTypingPracticeAppCount = Object.keys(replyJSON.EnglishAppList).length;
 
-		for(let i = 0; i < koreanTypingPracticeAppCount; i++) {
-			let activeApp = replyJSON.KoreanAppList[i];
+		for(var i = 0; i < koreanTypingPracticeAppCount; i++) {
+			var activeApp = replyJSON.KoreanAppList[i];
 
-			let posX = self.getButtonPosX(i, koreanTypingPracticeAppCount);
-			let posY = self.getButtonPosY(i, koreanTypingPracticeAppCount,
+			var posX = this.getButtonPosX(i, koreanTypingPracticeAppCount);
+			var posY = this.getButtonPosY(i, koreanTypingPracticeAppCount,
 				TypingAppButton.BUTTON_UPPER_POS_Y
 			);
 
-			let typingPracticeButton = new TypingAppButton(
+			var typingPracticeButton = new TypingAppButton(
 				TypingAppButton.TYPE_PRACTICE_KOREAN,
 				posX, posY,
-				self.getIconImage(replyJSON.KoreanHighScoreList, activeApp.AppID),
+				this.getIconImage(replyJSON.KoreanHighScoreList, activeApp.AppID),
 				activeApp.KoreanName,
-				(function() {
-					sessionStorageManager.playingAppID = activeApp.AppID;
-					sessionStorageManager.playingAppName = activeApp.AppName;
-					sessionStorageManager.playingAppKoreanName = activeApp.KoreanName;
-					location.href = '../../web/client/start.html';
-				})
+				{
+					AppID: activeApp.AppID,
+					AppName: activeApp.AppName,
+					KoreanName: activeApp.KoreanName
+				}
 			);
 
-			if(!self.hasApp(activeApp.AppID, replyJSON.KoreanActiveAppList))
-				typingPracticeButton.inputEnabled = false;
+			if(!this.hasApp(activeApp.AppID, replyJSON.KoreanActiveAppList))
+				typingPracticeButton.setInputEnabled(false);
 		}
 
-		for(let i = 0; i < englishTypingPracticeAppCount; i++) {
-			let activeApp = replyJSON.EnglishAppList[i];
+		for(var i = 0; i < englishTypingPracticeAppCount; i++) {
+			var activeApp = replyJSON.EnglishAppList[i];
 
-			let posX = self.getButtonPosX(i, englishTypingPracticeAppCount);
-			let posY = self.getButtonPosY(i, englishTypingPracticeAppCount,
+			var posX = this.getButtonPosX(i, englishTypingPracticeAppCount);
+			var posY = this.getButtonPosY(i, englishTypingPracticeAppCount,
 				TypingAppButton.BUTTON_LOWER_POS_Y
 			);
 
-			let typingPracticeButton = new TypingAppButton(
+			var typingPracticeButton = new TypingAppButton(
 				TypingAppButton.TYPE_PRACTICE_ENGLISH,
 				posX, posY,
-				self.getIconImage(activeApp.AppID),
+				this.getIconImage(activeApp.AppID),
 				activeApp.KoreanName,
-				(function() {
-					sessionStorageManager.playingAppID = activeApp.AppID;
-					sessionStorageManager.playingAppName = activeApp.AppName;
-					sessionStorageManager.playingAppKoreanName = activeApp.KoreanName;
-					location.href = '../../web/client/start.html';
-				})
+				{
+					AppID: activeApp.AppID,
+					AppName: activeApp.AppName,
+					KoreanName: activeApp.KoreanName
+				}
 			);
 
-			if(!self.hasApp(activeApp.AppID, replyJSON.EnglishActiveAppList))
-				typingPracticeButton.inputEnabled = false;
+			if(!this.hasApp(activeApp.AppID, replyJSON.EnglishActiveAppList))
+				typingPracticeButton.setInputEnabled(false);
 		}
-	}
+	},
 
-	getButtonPosX(index, buttonCount) {
-		let gap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
-		let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / gap );
+	getButtonPosX: function(index, buttonCount) {
+		var gap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
+		var maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / gap );
 		// console.log("maxColumnNum : " + maxColumnNum);
-		let rowCount = Math.ceil(buttonCount / maxColumnNum);
+		var rowCount = Math.ceil(buttonCount / maxColumnNum);
 		// console.log("rowCount : " + rowCount);
 
-		let columnIndex = index % maxColumnNum;
+		var columnIndex = index % maxColumnNum;
 		// console.log("columnIndex : " + columnIndex);
-		let rowIndex = Math.floor(index / maxColumnNum);
+		var rowIndex = Math.floor(index / maxColumnNum);
 		// console.log("rowIndex : " + rowIndex);
 
-		let columnCountForThisRow = 0;
+		var columnCountForThisRow = 0;
 		if(rowIndex < rowCount - 1)
 			columnCountForThisRow = maxColumnNum;
 		else
 			columnCountForThisRow = buttonCount - (maxColumnNum * rowIndex);
 		// console.log("columnCountForThisRow : " + columnCountForThisRow);
 
-		let startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) );
+		var startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) );
 		return startX + gap * columnIndex;
-	}
+	},
 
-	getButtonPosY(index, buttonCount, startPosY) {
-		let rowGap = TypingAppButton.BUTTON_HEIGHT + TypingAppButton.BUTTON_GAP;
+	getButtonPosY: function(index, buttonCount, startPosY) {
+		var rowGap = TypingAppButton.BUTTON_HEIGHT + TypingAppButton.BUTTON_GAP;
 
-		let columnGap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
-		let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / columnGap );
+		var columnGap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
+		var maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / columnGap );
 		// console.log("maxColumnNum : " + maxColumnNum);
 		// console.log("buttonCount : " + buttonCount);
-		let rowCount = Math.ceil(buttonCount / maxColumnNum);
+		var rowCount = Math.ceil(buttonCount / maxColumnNum);
 		// console.log("rowCount : " + rowCount);
 
-		let rowIndex = Math.floor(index / maxColumnNum);
+		var rowIndex = Math.floor(index / maxColumnNum);
 		// console.log("rowIndex : " + rowIndex);
 
-		let startY = startPosY - ( (rowGap / 2) * (rowCount - 1) );
+		var startY = startPosY - ( (rowGap / 2) * (rowCount - 1) );
 		return startY + rowGap * rowIndex;
-	}
+	},
 
 
-	downloadListFailed(replyJSON) {
+	downloadListFailed: function(replyJSON) {
 		console.log('download app list failed, jsonData : ' + JSON.stringify(replyJSON));
 	}
-
 }

src/game/menu/menu_typing_test.js

@@ -1,27 +1,22 @@
-/////////////////////////////
-// MenuTypingTest
-
-class MenuTypingTest {
-
+var MenuTypingTest = {
 	preload() {
 		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
 		game.load.image('space_invaders', '../../../resources/image/icon/space_invaders.png');
 
 		Animal.loadResources();
-	}
+	},
 
 	create() {
-		self = this;
-		this.game.stage.backgroundColor = '#4d4d4d';
+		game.stage.backgroundColor = '#4d4d4d';
 
 		// typing app area
-		let typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1,
+		var typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1,
 			0, 60,
 			GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y - 110
 		);
 
 		// korean app area
-		// let koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1,
+		// var koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1,
 		// 	0, 60 + AppAreaBG.GAP_Y,
 		// 	GAME_SCREEN_SIZE.x, 270
 		// );
@@ -32,7 +27,7 @@ class MenuTypingTest {
 		// );
 
 		// english app area
-		// let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
+		// var englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
 		// 	0, 340,
 		// 	GAME_SCREEN_SIZE.x, 270
 		// );
@@ -44,7 +39,7 @@ class MenuTypingTest {
 
 
 		// top ui
-		let screenTopUI = new ScreenTopUI();
+		var screenTopUI = new ScreenTopUI();
 		screenTopUI.makeBackButton( function() {
 			location.href = '../../web/client/menu_app.html';
 		});
@@ -52,177 +47,181 @@ class MenuTypingTest {
 
 
 		// typing tab buttons
-		let typingPracticeTabButton = new TypingTabButton(
+		var typingPracticeTabButton = new TypingTabButton(
 			TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
 			"", "타자 연습",
 			(function() {
 				location.href = '../../web/client/menu_typing_practice.html';
 			})
 		);
-		// typingPracticeTabButton.inputEnabled = false;
+		// typingPracticeTabButton.setInputEnabled(false);
 
-		let typingTestTabButton = new TypingTabButton(
+		var typingTestTabButton = new TypingTabButton(
 			TypingTabButton.TEST_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
 			"", "타자 시험",
 			(function() {
 				location.href = '../../web/client/menu_typing_test.html';
 			})
 		);
-		typingTestTabButton.inputEnabled = false;
+		typingTestTabButton.setInputEnabled(false);
 
 		this.makeActiveTypingTestAppButtons();
 
 
 		// bottom ui
-		let screenBottomUI = new ScreenBottomUI();
+		var screenBottomUI = new ScreenBottomUI();
 		// screenBottomUI.printLeftText("게임 진행 정보");
 		screenBottomUI.printCenterText("메뉴 > 타자 시험");
 		screenBottomUI.printRightText(sessionStorageManager.playerName);
-	}
+	},
 
 
-	makeActiveTypingTestAppButtons() {
-		let dbConnectManager = new DBConnectManager();
+	makeActiveTypingTestAppButtons: function() {
+		var dbConnectManager = new DBConnectManager();
 		dbConnectManager.requestTypingTestAppList(
 			sessionStorageManager.maestroID,
 			sessionStorageManager.playerID,
-			self.downloadListSucceeded,
-			self.downloadListFailed
+			// self.downloadListSucceeded,
+			// self.downloadListFailed
+			(function(replyJSON) {
+				this.downloadListSucceeded(replyJSON);
+			}).bind(this),
+			(function(replyJSON) {
+				this.downloadListFailed(replyJSON);
+			}).bind(this)
 		);
 
-	}
+	},
 
-	hasApp(appID, appList) {
-		for(let i = 0; i < appList.length; i++) {
+	hasApp: function(appID, appList) {
+		for(var i = 0; i < appList.length; i++) {
 			if(appList[i].AppID === appID)
 				return true;
 		}
 
 		return false;
-	}
+	},
 
-	getBestRecord(jsonList, appID) {
-		let count = Object.keys(jsonList).length;
+	getBestRecord: function(jsonList, appID) {
+		var count = Object.keys(jsonList).length;
 
-		for(let i = 0; i < count; i++) {
+		for(var i = 0; i < count; i++) {
 			if(jsonList[i].AppID === appID)
 				return jsonList[i].BestRecord;
 		}
 
 		return 0;
-	}
+	},
 
-	getIconImage(jsonList, appID) {
-		let bestRecord = this.getBestRecord(jsonList, appID);
+	getIconImage: function(jsonList, appID) {
+		var bestRecord = this.getBestRecord(jsonList, appID);
 
 		if(bestRecord === 0)
 			return "snail_shadow";
 
-		let animalLevel = Animal.animalLevelIDByRecord(bestRecord, Animal.TYPE_TEST);
+		var animalLevel = Animal.animalLevelIDByRecord(bestRecord, Animal.TYPE_TEST);
 		return Animal.SPECIES_DATA[animalLevel].species + Animal.SPRITE_NAMES.icon;
-	}
+	},
 
-	downloadListSucceeded(replyJSON) {
+	downloadListSucceeded: function(replyJSON) {
 		// console.log(replyJSON);
 
-		let buttonWidthGap = TypingAppButton.BUTTON_WIDTH + MenuTypingTest.BUTTON_GAP;
+		var buttonWidthGap = TypingAppButton.BUTTON_WIDTH + MenuTypingTest.BUTTON_GAP;
 
-		let koreanTypingPracticeAppCount = Object.keys(replyJSON.KoreanAppList).length;
-		let englishTypingPracticeAppCount = Object.keys(replyJSON.EnglishAppList).length;
+		var koreanTypingPracticeAppCount = Object.keys(replyJSON.KoreanAppList).length;
+		var englishTypingPracticeAppCount = Object.keys(replyJSON.EnglishAppList).length;
 
-		for(let i = 0; i < koreanTypingPracticeAppCount; i++) {
-			let activeApp = replyJSON.KoreanAppList[i];
+		for(var i = 0; i < koreanTypingPracticeAppCount; i++) {
+			var activeApp = replyJSON.KoreanAppList[i];
 
-			let posX = self.getButtonPosX(i, koreanTypingPracticeAppCount);
-			let posY = self.getButtonPosY(i, koreanTypingPracticeAppCount,
+			var posX = this.getButtonPosX(i, koreanTypingPracticeAppCount);
+			var posY = this.getButtonPosY(i, koreanTypingPracticeAppCount,
 				TypingAppButton.BUTTON_UPPER_POS_Y
 			);
 
-			let typingTestButton = new TypingAppButton(
+			var typingTestButton = new TypingAppButton(
 				TypingAppButton.TYPE_TEST_KOREAN,
 				posX, posY,
-				self.getIconImage(replyJSON.KoreanHighScoreList, activeApp.AppID),
+				this.getIconImage(replyJSON.KoreanHighScoreList, activeApp.AppID),
 				activeApp.KoreanName,
-				(function() {
-					sessionStorageManager.playingAppID = activeApp.AppID;
-					sessionStorageManager.playingAppName = activeApp.AppName;
-					sessionStorageManager.playingAppKoreanName = activeApp.KoreanName;
-					location.href = '../../web/client/start.html';
-				})
+				{
+					AppID: activeApp.AppID,
+					AppName: activeApp.AppName,
+					KoreanName: activeApp.KoreanName
+				}
 			);
 
-			if(!self.hasApp(activeApp.AppID, replyJSON.KoreanActiveAppList))
-				typingTestButton.inputEnabled = false;
+			if(!this.hasApp(activeApp.AppID, replyJSON.KoreanActiveAppList))
+				typingTestButton.setInputEnabled(false);
 		}
 
-		for(let i = 0; i < englishTypingPracticeAppCount; i++) {
-			let activeApp = replyJSON.EnglishAppList[i];
+		for(var i = 0; i < englishTypingPracticeAppCount; i++) {
+			var activeApp = replyJSON.EnglishAppList[i];
 
-			let posX = self.getButtonPosX(i, englishTypingPracticeAppCount);
-			let posY = self.getButtonPosY(i, englishTypingPracticeAppCount,
+			var posX = this.getButtonPosX(i, englishTypingPracticeAppCount);
+			var posY = this.getButtonPosY(i, englishTypingPracticeAppCount,
 				TypingAppButton.BUTTON_LOWER_POS_Y
 			);
 
-			let typingTestButton = new TypingAppButton(
+			var typingTestButton = new TypingAppButton(
 				TypingAppButton.TYPE_TEST_ENGLISH,
 				posX, posY,
-				self.getIconImage(replyJSON.KoreanHighScoreList, activeApp.AppID),
+				this.getIconImage(replyJSON.KoreanHighScoreList, activeApp.AppID),
 				activeApp.KoreanName,
-				(function() {
-					sessionStorageManager.playingAppID = activeApp.AppID;
-					sessionStorageManager.playingAppName = activeApp.AppName;
-					sessionStorageManager.playingAppKoreanName = activeApp.KoreanName;
-					location.href = '../../web/client/start.html';
-				})
+				{
+					AppID: activeApp.AppID,
+					AppName: activeApp.AppName,
+					KoreanName: activeApp.KoreanName
+				}
 			);
 
-			if(!self.hasApp(activeApp.AppID, replyJSON.EnglishActiveAppList))
-				typingTestButton.inputEnabled = false;
+			if(!this.hasApp(activeApp.AppID, replyJSON.EnglishActiveAppList))
+				typingTestButton.setInputEnabled(false);
 		}
-	}
+	},
 
-	getButtonPosX(index, buttonCount) {
-		let gap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
-		let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / gap );
+	getButtonPosX: function(index, buttonCount) {
+		var gap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
+		var maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / gap );
 		// console.log("maxColumnNum : " + maxColumnNum);
-		let rowCount = Math.ceil(buttonCount / maxColumnNum);
+		var rowCount = Math.ceil(buttonCount / maxColumnNum);
 		// console.log("rowCount : " + rowCount);
 
-		let columnIndex = index % maxColumnNum;
+		var columnIndex = index % maxColumnNum;
 		// console.log("columnIndex : " + columnIndex);
-		let rowIndex = Math.floor(index / maxColumnNum);
+		var rowIndex = Math.floor(index / maxColumnNum);
 		// console.log("rowIndex : " + rowIndex);
 
-		let columnCountForThisRow = 0;
+		var columnCountForThisRow = 0;
 		if(rowIndex < rowCount - 1)
 			columnCountForThisRow = maxColumnNum;
 		else
 			columnCountForThisRow = buttonCount - (maxColumnNum * rowIndex);
 		// console.log("columnCountForThisRow : " + columnCountForThisRow);
 
-		let startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) );
+		var startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) );
 		return startX + gap * columnIndex;
-	}
+	},
 
-	getButtonPosY(index, buttonCount, startPosY) {
-		let rowGap = TypingAppButton.BUTTON_HEIGHT + TypingAppButton.BUTTON_GAP;
+	getButtonPosY: function(index, buttonCount, startPosY) {
+		var rowGap = TypingAppButton.BUTTON_HEIGHT + TypingAppButton.BUTTON_GAP;
 
-		let columnGap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
-		let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / columnGap );
+		var columnGap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
+		var maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / columnGap );
 		// console.log("maxColumnNum : " + maxColumnNum);
 		// console.log("buttonCount : " + buttonCount);
-		let rowCount = Math.ceil(buttonCount / maxColumnNum);
+		var rowCount = Math.ceil(buttonCount / maxColumnNum);
 		// console.log("rowCount : " + rowCount);
 
-		let rowIndex = Math.floor(index / maxColumnNum);
+		var rowIndex = Math.floor(index / maxColumnNum);
 		// console.log("rowIndex : " + rowIndex);
 
-		let startY = startPosY - ( (rowGap / 2) * (rowCount - 1) );
+		var startY = startPosY - ( (rowGap / 2) * (rowCount - 1) );
 		return startY + rowGap * rowIndex;
-	}
+	},
 
 
-	downloadListFailed(replyJSON) {
+	downloadListFailed: function(replyJSON) {
 		console.log('download app list failed, jsonData : ' + JSON.stringify(replyJSON));
 	}
 

src/game/menu/welcome_player_text.js

@@ -1,30 +1,34 @@
-class WelcomePlayerText extends Phaser.Text {
+WelcomePlayerText.prototype = Object.create(Phaser.Text.prototype);
+WelcomePlayerText.constructor = WelcomePlayerText;
 
-	constructor(playerName) {
-		super(game, game.world.width / 2, game.world.height / 2 - 40, "어서오세요, " + playerName + "님", WelcomePlayerText.DEFAULT_TEXT_FONT);
+function WelcomePlayerText(playerName) {
+	Phaser.Text.call(
+		this, game,
+		game.world.width / 2, game.world.height / 2 - 40,
+		"어서오세요, " + playerName + "님",
+		WelcomePlayerText.DEFAULT_TEXT_FONT
+	);
 
-		this.anchor.set(0.5);
-		this.inputEnabled = false;
+	this.anchor.set(0.5);
+	this.inputEnabled = false;
 
-		var grd = this.context.createLinearGradient(0, 0, 0, this.height);
-		grd.addColorStop(0, '#8ED6FF');
-		grd.addColorStop(1, '#4C6CB3');
-		this.fill = grd;
-		this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-		this.stroke = '#000';
-		this.strokeThickness = 5;
+	var grd = this.context.createLinearGradient(0, 0, 0, this.height);
+	grd.addColorStop(0, '#8ED6FF');
+	grd.addColorStop(1, '#4C6CB3');
+	this.fill = grd;
+	this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+	this.stroke = '#000';
+	this.strokeThickness = 5;
 
-		this.alpha = 1;
-		let tweenAlpha = game.add.tween(this);
-		tweenAlpha.to( { alpha: 0 }, 2000, Phaser.Easing.Back.In, true);
+	this.alpha = 1;
+	let tweenAlpha = game.add.tween(this);
+	tweenAlpha.to( { alpha: 0 }, 2000, Phaser.Easing.Back.In, true);
 
-		game.add.existing(this);
-	};
-
-	destroySelf() {
-		this.destroy();
-	}
+	game.add.existing(this);
+}
 
+WelcomePlayerText.prototype.destroySelf = function() {
+	this.destroy();
 }
 
 WelcomePlayerText.DEFAULT_TEXT_FONT = {
@@ -32,4 +36,4 @@ WelcomePlayerText.DEFAULT_TEXT_FONT = {
 	boundsAlignH: "center",		// left, center. right
 	boundsAlignV: "middle", 	// top, middle, bottom
 	fill: "#fff"
-};
+}

src/game/mouse/space_invaders/game.js

@@ -4,21 +4,19 @@
 class Game {
 
 	create() {
-		let self = this;
-
 		this.game.stage.backgroundColor = "#000000";	// '#4d4d4d';
 
 		sessionStorageManager.isNewBestRecrd = false;
 
 		// top ui
-		let screenTopUI = new ScreenTopUI();
+		var screenTopUI = new ScreenTopUI();
 		screenTopUI.makeBackButton( function() {
 			sessionStorageManager.resetPlayingAppData();
 			location.href = '../../web/client/menu_app.html';
 		});
 		screenTopUI.makeFullScreenButton();
 
-		let scoreBoard = new ScoreBoard();
+		var scoreBoard = new ScoreBoard();
 		scoreManager.addOnChangeScoreListener( function(score) {
 			sessionStorageManager.record = score;
 			scoreBoard.printScore(NumberUtil.numberWithCommas(score));
@@ -30,19 +28,19 @@ class Game {
 			screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord);
 		});
 
-		let heartGauge = new HeartGauge(heartManager);
+		var heartGauge = new HeartGauge(heartManager);
 		heartManager.addOnChangeGameOverListener(
-			function() { self.gameOver(); }
+			(function() { this.gameOver(); }).bind(this)
 		);
 		heartGauge.start();
 
 
 		// game stage
-		let stars = game.add.group();
+		var stars = game.add.group();
 
-		for (let i = 0; i < 128; i++)
+		for (var i = 0; i < 128; i++)
 		{
-			let randomY = game.rnd.integerInRange(60, GAME_SCREEN_SIZE.y - 80);
+			var randomY = game.rnd.integerInRange(60, GAME_SCREEN_SIZE.y - 80);
 			stars.create(game.world.randomX, randomY, 'star');
 		}
 
@@ -55,13 +53,13 @@ class Game {
 
 		// contents
 		this.aliens = [];
-		for(let i = 0; i < 10; i++) {
-			let alien = new Alien(150 + 80 * i, 150,
-				(function() { self.activateNextAlien(); }),	// onGoOnstage
+		for(var i = 0; i < 10; i++) {
+			var alien = new Alien(150 + 80 * i, 150,
+				(function() { this.activateNextAlien(); }).bind(this),	// onGoOnstage
 				(function(sprite) {
-					scoreManager.plusScore(self.getScore());
-					let scoreText = new ScoreText(sprite.x, sprite.y, self.getScore());
-				}),		// this.onAlienFired,
+					scoreManager.plusScore(this.getScore());
+					var scoreText = new ScoreText(sprite.x, sprite.y, this.getScore());
+				}).bind(this),		// this.onAlienFired,
 				this.onAlienEscaped
 			);
 			alien.goWaitingRoom();
@@ -73,7 +71,7 @@ class Game {
 
 
 		// bottom ui
-		let screenBottomUI = new ScreenBottomUI();
+		var screenBottomUI = new ScreenBottomUI();
 		screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord);
 		screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
 		screenBottomUI.printRightText(sessionStorageManager.playerName);
@@ -109,7 +107,7 @@ class Game {
 		this.countDownText.text = this.countDownNumber.toString();
 		this.countDownText.alpha = 1;
 
-		let countDownTween = game.add.tween(this.countDownText);
+		var countDownTween = game.add.tween(this.countDownText);
 		countDownTween.to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true);
 		countDownTween.onComplete.add(this.tweenCountDown, this);
 
@@ -125,7 +123,7 @@ class Game {
 	gameOver() {
 		this.alienTimer.stop();
 
-		let gameOverText = new GameOverText();
+		var gameOverText = new GameOverText();
 
 		game.time.events.add(Phaser.Timer.SECOND * 2, this.goResult, this);
 	}

src/game/start/start.js

@@ -16,7 +16,7 @@ class Start {
 
 
 		// top ui
-		let screenTopUI = new ScreenTopUI();
+		var screenTopUI = new ScreenTopUI();
 		screenTopUI.makeBackButton( function() {
 			if(isTypingPracticeStage())
 				location.href = '../../web/client/menu_typing_practice.html';
@@ -45,7 +45,7 @@ class Start {
 
 
 		// bottom ui
-		let screenBottomUI = new ScreenBottomUI();
+		var screenBottomUI = new ScreenBottomUI();
 		screenBottomUI.printLeftText("오늘의 최고 기록 : ");
 		screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
 		screenBottomUI.printRightText(sessionStorageManager.playerName);
@@ -54,38 +54,34 @@ class Start {
 			sessionStorageManager.maestroID,
 			sessionStorageManager.playerID,
 			sessionStorageManager.playingAppID,
-			function(replyJSON) {
+			(function(replyJSON) {
 				sessionStorageManager.bestRecord = Number(replyJSON["BestRecord"]);
 				screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord);
-			},
-			function(replyJSON) {	// no data
+			}).bind(this),
+			(function(replyJSON) {	// no data
 				sessionStorageManager.bestRecord = 0;
 				screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord);
-			}
+			}).bind(this)
 		);
 	}
 
 	loadHowToPlay(appID) {
-		let self = this;
-
 		this.dbConnectManager.requestHowToPlay(
 			sessionStorageManager.playingAppID,	// space_invaders app ID
-			function(jsonData) {
-				let howToPlayText = jsonData["HowToPlay"].replace(/\\n/g, "\n");
-				self.howToPlay.printHowToPlay(howToPlayText);
-			},
-			function(jsonData) {
-				self.howToPlay.printHowToPlay("No data");
-			}
+			(function(jsonData) {
+				var howToPlayText = jsonData["HowToPlay"].replace(/\\n/g, "\n");
+				this.howToPlay.printHowToPlay(howToPlayText);
+			}).bind(this),
+			(function(jsonData) {
+				this.howToPlay.printHowToPlay("No data");
+			}).bind(this)
 		);
 
 	}
 
 	loadChart() {
-		let self = this;
-
-		let today = new Date();
-		let date = DateUtil.getYYYYMMDD(today);
+		var today = new Date();
+		var date = DateUtil.getYYYYMMDD(today);
 		this.dbConnectManager.requestPlayerHistory(
 			sessionStorageManager.maestroID,
 			date,
@@ -95,19 +91,19 @@ class Start {
 					return;
 				}
 
-				let underValue = historyRecordManager.underValueForGraph();
-				let upperValue = historyRecordManager.upperValueForGraph();
+				var underValue = historyRecordManager.underValueForGraph();
+				var upperValue = historyRecordManager.upperValueForGraph();
 
-				let minValue = underValue - (upperValue - underValue) / 10;
-				let maxValue = upperValue;// + (upperValue - underValue) / 10;
+				var minValue = underValue - (upperValue - underValue) / 10;
+				var maxValue = upperValue;// + (upperValue - underValue) / 10;
 
-				let countRecord = historyRecordManager.count;
-				for(let i = 0; i < Chart.CHART_COUNT; i++) {
+				var countRecord = historyRecordManager.count;
+				for(var i = 0; i < Chart.CHART_COUNT; i++) {
 					// if(i > 6)
 					// 	break;
 
-					let historyRecord = historyRecordManager.getAt(i);
-					self.chart.drawRecordGraph(
+					var historyRecord = historyRecordManager.getAt(i);
+					this.chart.drawRecordGraph(
 						i,
 						historyRecord === undefined ? "-" : historyRecord.date,
 						historyRecord === undefined ? "" : historyRecord.bestRecord,
@@ -115,20 +111,20 @@ class Start {
 					);
 				}
 
-				self.chart.printChartBaseLine();
+				this.chart.printChartBaseLine();
 			})
 		);
 	}
 
 	calcDate(daysBefore) {
-		let date = new Date();
+		var date = new Date();
 		date.setDate(date.getDate() - daysBefore);
 		return date;
 	}
 
 	printSampleChart() {
-		let minValue = 0;
-		let maxValue = 1000;
+		var minValue = 0;
+		var maxValue = 1000;
 		this.chart.drawRecordGraph(0, this.calcDate(1), 980, minValue, maxValue);
 		this.chart.drawRecordGraph(1, this.calcDate(2), 760, minValue, maxValue);
 		this.chart.drawRecordGraph(2, this.calcDate(5), 740, minValue, maxValue);
@@ -141,14 +137,14 @@ class Start {
 	}
 
 	makeStartButton() {
-		let setting = new RoundRectButtonSetting(game.world.centerX, game.world.centerY, 200, 100);
+		var setting = new RoundRectButtonSetting(game.world.centerX, game.world.centerY, 200, 100);
 		setting.fontStyle.fontWeight = "bold";
 
-		let startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "시작", this.startStage);
+		var startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "시작", this.startStage);
 	}
 
 	makeRankingButton() {
-		let setting = new RoundRectButtonSetting(game.world.centerX + 160, game.world.centerY, 60, 60);
+		var setting = new RoundRectButtonSetting(game.world.centerX + 160, game.world.centerY, 60, 60);
 		setting.fontStyle = {
 			font: "18px Arial",
 			boundsAlignH: "center",		// left, center. right
@@ -156,7 +152,7 @@ class Start {
 			fill: "#fff"
 		};
 
-		let rankingButton = new RoundRectButton(
+		var rankingButton = new RoundRectButton(
 			setting, RoundRectButton.NONE_ICON, "순위\n보기",
 			(function() {
 				location.href = '../../web/client/ranking.html';