Add: stop watch

resources/image/object/spaceship.piskel

@@ -0,0 +1 @@
+{"modelVersion":2,"piskel":{"name":"spaceship","description":"","fps":12,"height":32,"width":32,"layers":["{\"name\":\"Layer 1\",\"opacity\":1,\"frameCount\":1,\"chunks\":[{\"layout\":[[0]],\"base64PNG\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACYElEQVRYR+1WsW4aQRCd/YekcMuVdPkFsECWuCZVCldWRIFkPsHkE0CiQFYqF67S3EkRCPiFdJRH6yL+h7XeWA8Ny/luT4llKc40e+zu7bx98+YdThpGlmV+MBiIc87ZV733Ps9zSdP0aL7u+Eabcdh/AO+bAd/t+vz6WqpEOJjNxG020dqK3ggBvjmAiYj/lGWVDPxKU5mIRF8seiMYeFMARVH4VqslMBtqAHMAliSJoxFhbb/f61ydCWE9ahM2lgFAUj3EudcFwORIRgZwSzCC4DPXOBfDQhQDIYD5fC7L5VLBIEB7v9+X0Wikz/8eAKsB3BRRxgDnX0WEFgS1YFXelHq+G6UBbj4R48WjLuU/PzSu/QEAWgmUMaqUqwCGQ5H1+rkbQgDn57JfLCo9gN6BfOgi7V9L5Utg8OJdkuhW2DHi98NnHT+e/dARNoy4LIojEGFSm8+RVisubrBgrAvi9kzOvQABHVif4Br9Ar9tHpyvGrC15QardAqMh8cAoFDpEQSD7kGwUw4itCAsRdbd8AwTguEgvt9+0fHq672OXAsB2/NscjwfdUFZOQjAUkfXswfTHUOfsAzg9qFHnLRhyETIAG9nQTC5pT18Dm9O8KU+UKba0OurAFhAdS1ea0S2LPZjEwMgxpJrAdguseWoK0FM8hMRhmq1v8HEbrc7WC5rjJG64Fy73f77/4gOTAyH8m2zUTdErREoDVzwptutteLwklElCJmAJQPAdrvVpU6nowBCC65itLIL6l5EOfDRGo/H+h2ZTqdq6TF/wf6YAXtAr9dTAKvVqjGTPOcJJYkuzTOjI5gAAAAASUVORK5CYII=\"}]}"],"hiddenFrames":[""]}}

resources/image/weapon/missile.piskel

@@ -0,0 +1 @@
+{"modelVersion":2,"piskel":{"name":"missile","description":"","fps":12,"height":32,"width":6,"layers":["{\"name\":\"Layer 1\",\"opacity\":1,\"frameCount\":1,\"chunks\":[{\"layout\":[[0]],\"base64PNG\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAgCAYAAAAxOQljAAAAR0lEQVQ4T2P8////fwYsgHFUAj1UcAfJ48ePsQci6RLHjx/HbhTpEkuXLsVuFOkSFRUV2I0iXcLb2xu7UaRLqKurYzeKehIA/spkUGhIJjkAAAAASUVORK5CYII=\"}]}"],"hiddenFrames":[]}}

src/game/lib/string_util.js

@@ -92,7 +92,9 @@ StringUtil.getUnicodeAlphabetCount = function(text) {
 };
 
 StringUtil.getScoreUnit = function(playingAppID) {
-	if(playingAppID < 100)
+	if(playingAppID == 104)
+		return " 초";
+	else if(playingAppID < 100)
 		return " 타";
 	else
 		return " 점";

src/game/mouse/dodge/alien.js

@@ -1,9 +1,11 @@
 Alien.prototype = Object.create(Phaser.Sprite.prototype);
 Alien.constructor = Alien;
 
-function Alien(spaceship) {
+function Alien(spaceship, onCollisionFunction) {
 	this.spaceship = spaceship;
 
+	this.onCollisionFunction = onCollisionFunction;
+
 	this.isActivated = false;
 	this.speed = Alien.DEFAULT_SPEED_DOT_PER_SEC;
 	this.boostSpeed = Alien.DEFAULT_SPEED_DOT_PER_SEC / 10;
@@ -16,7 +18,7 @@ function Alien(spaceship) {
 	this.speedLevel = 0;
 
 
-	Phaser.Sprite.call(this, game, 0, 0, 'alien_normal');
+	Phaser.Sprite.call(this, game, 0, 0, 'alien');
 	this.anchor.set(0.5);
 
 	game.add.existing(this);
@@ -45,10 +47,10 @@ Alien.prototype.moveRandomPosition = function() {
 	// this.y = this.spaceship.y + posY;
 
 
-	var alienAngle = this.getAngle(this.spaceship.x, this.spaceship.y, this.x, this.y);
+	var AlienAngle = this.getAngle(this.spaceship.x, this.spaceship.y, this.x, this.y);
-	this.angle = this.getSpriteAngle(alienAngle);
+	this.angle = this.getSpriteAngle(AlienAngle);
 
-	this.angleFromAlien = alienAngle;
+	this.angleFromAlien = AlienAngle;
 
 	this.upgradeLevel();
 }
@@ -77,11 +79,14 @@ Alien.prototype.update = function() {
 
 
 Alien.prototype.collisionHandler = function() {
-	console.log("collision");
+	this.stop();
+	this.onCollisionFunction();
 }
 
 Alien.prototype.stop = function() {
 	this.setActive(false);
+	this.body.enable = false;
+	this.alpha = 0;
 }
 
 Alien.prototype.setActive = function(isActivated) {
@@ -148,19 +153,19 @@ Alien.prototype.speedUp = function() {
 		break;
 
 		case 2:
-		this.tint = 0xff0000;
+		this.tint = 0xffaaaa;
 		break;
 
 		case 3:
-		this.tint = 0x00ff00;
+		this.tint = 0xaaffaa;
 		break;
 
 		case 4:
-		this.tint = 0x0000ff;
+		this.tint = 0xaaaaff;
 		break;
 
 		case 5:
-		this.tint = 0x888888;
+		this.tint = 0xaaaaaa;
 		break;
 	}
 }

src/game/mouse/dodge/game.js

@@ -5,7 +5,7 @@ var Game = {
 
 		this.game.stage.backgroundColor = "#000000";	// '#4d4d4d';
 
-		this.scoreManager = new ScoreManager();
+		// this.scoreManager = new ScoreManager();
 
 		sessionStorageManager.setIsNewAppHighestRecord(false);
 
@@ -39,7 +39,16 @@ var Game = {
 
 		this.aliens = [];
 		for(var i = 0; i < 100; i++) {
-			var alien = new Alien(this.spaceship);
+			var alien = new Alien(this.spaceship,
+				(function() {
+					this.spaceship.alpha = 0;
+					this.spaceship.body.enable = false;
+
+					this.showExplosionParticle();
+
+					this.gameOver();
+				}).bind(this)	// onCollisionHandler
+			);
 			this.aliens.push(alien);
 		}
 
@@ -49,6 +58,7 @@ var Game = {
 		screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) );
 		screenTopUI.makeFullScreenButton();
 
+		/*
 		var scoreBoard = new ScoreBoard();
 		this.scoreManager.addOnChangeScoreListener( function(score) {
 			sessionStorageManager.setRecord(score);
@@ -60,6 +70,16 @@ var Game = {
 			sessionStorageManager.setIsNewBestRecrd(true);
 			// screenBottomUI.printLeftTextWithAppHighestRecord(sessionStorageManager.getAppHighestRecord());
 		});
+		*/
+
+		this.stopWatch = new StopWatch(
+			60,	// sec
+			(function() {
+				this.setClickEnable(false);
+
+				this.gameOver();
+			}).bind(this)
+		);
 
 
 		// bottom ui
@@ -69,8 +89,10 @@ var Game = {
 		screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
 
 
-		this.startGame();
+		// this.startGame();
-		// this.countDown();
+
+		this.spaceship.setActive(true);
+		this.countDown();
 	},
 
 
@@ -82,11 +104,11 @@ var Game = {
 	initListeners: function() {
 	},
 
-	/*
+	countDown: function() {
-	countDown() {
+		var style = { font: "bold 200px Arial", fill: "#fff", wordWrap: true, wordWrapWidth: game.world.centerX, align: "center" };
-		var style = { font: "bold 200px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };
+		this.countDownText = game.add.text(game.world.centerX, game.world.centerY, "", style);
-		this.countDownText = game.add.text(0, 0, "", style);
+		// this.countDownText.setTextBounds(0, 0, game.world.width, game.world.height);
-		this.countDownText.setTextBounds(0, 0, game.world.width, game.world.height);
+		this.countDownText.anchor.set(0.5);
 		this.countDownText.stroke = "#333";
 		this.countDownText.strokeThickness = 50;
 
@@ -94,9 +116,9 @@ var Game = {
 		if(isDebugMode())
 			this.countDownNumber = 1;
 		this.tweenCountDown();
-	}
+	},
 
-	tweenCountDown() {
+	tweenCountDown: function() {
 		if(this.countDownNumber === 0) {
 			this.startGame();
 			return;
@@ -110,10 +132,10 @@ var Game = {
 		countDownTween.onComplete.add(this.tweenCountDown, this);
 
 		this.countDownNumber--;
-	}
+	},
-	*/
 
 	startGame: function() {
+		this.stopWatch.start();
 		this.ellapsedTime = 0;
 		this.timerEvent = game.time.events.loop(Phaser.Timer.SECOND, this.updateTimer, this);
 	},
@@ -159,17 +181,34 @@ var Game = {
 	gameOver: function() {
 		var gameOverText = new GameOverText();
 
-		game.time.events.add(GAME_OVER_WAIT_TIME_MS, this.goResult, this);
+		var recordTime = this.stopWatch.stop();
+		sessionStorageManager.setRecord(recordTime);
+
+		game.time.events.add(Game.GAME_OVER_WAIT_TIME_MS, this.goResult, this);
 	},
 
 	goResult: function() {
 		location.href = '../../web/client/result.html';
 	},
 
-	getScore: function() {
+	showExplosionParticle: function() {
-		return (this.alienTimer.activatedAlienIndex) * 2;
+		var hitStarEmitter = game.add.emitter(
-	},
+			this.spaceship.x,
+			this.spaceship.y,
+			10
+		);
+		hitStarEmitter.makeParticles('star');
+		hitStarEmitter.minParticleScale = 1;
+		hitStarEmitter.maxParticleScale = 3;
+		hitStarEmitter.forEach(
+			function(particle) {
+				particle.tint = 0xFFd700;
+			}
+		);
+		hitStarEmitter.gravity = 0;
+		hitStarEmitter.start(true, 1000, null, 100);
+	}
 
 }
 
-Game.GAME_OVER_WAIT_TIME_MS		= 2000;
+Game.GAME_OVER_WAIT_TIME_MS		= 3000;

src/game/mouse/dodge/loading.js

@@ -31,10 +31,10 @@ var Loading = {
 
 		game.load.image('star', '../../../resources/image/background/star_7x7.png');
 
-		game.load.image('alien_normal',	'../../../resources/image/character/alien/green_alien.png');
+		game.load.image('alien','../../../resources/image/character/alien/green_alien.png');
 
-		game.load.image('heart_full',		'../../../resources/image/ui/heart_full.png');
+		game.load.image('spaceship', '../../../resources/image/object/spaceship.png');
-		game.load.image('heart_empty',		'../../../resources/image/ui/heart_empty.png');
+		game.load.image('missile', '../../../resources/image/weapon/missile.png');
 		// game.load.image('a', '../../../resources/image/icon/fullscreen_white.png');
 		// game.load.image('b', '../../../resources/image/icon/fullscreen_white.png');
 		// game.load.image('c', '../../../resources/image/icon/fullscreen_white.png');

src/game/mouse/dodge/missile.js

@@ -0,0 +1,178 @@
+Missile.prototype = Object.create(Phaser.Sprite.prototype);
+Missile.constructor = Missile;
+
+function Missile(spaceship, onCollisionFunction) {
+	this.spaceship = spaceship;
+
+	this.onCollisionFunction = onCollisionFunction;
+
+	this.isActivated = false;
+	this.speed = Missile.DEFAULT_SPEED_DOT_PER_SEC;
+	this.boostSpeed = Missile.DEFAULT_SPEED_DOT_PER_SEC / 10;
+
+	this.angleFromSpaceship = 0;
+	this.angleFromMissile = 0;
+
+	this.responRadius = 0;
+
+	this.speedLevel = 0;
+
+
+	Phaser.Sprite.call(this, game, 0, 0, 'missile');
+	this.anchor.set(0.5);
+
+	game.add.existing(this);
+	// game.physics.enable(this, Phaser.Physics.ARCADE);
+	game.physics.arcade.enable(this);
+
+	this.moveRandomPosition();
+}
+
+
+
+
+Missile.prototype.moveRandomPosition = function() {
+	this.angleFromMissile = game.rnd.integerInRange(0, 360);
+	// console.log(this.angleFromMissile);
+
+	var radians = this.angleFromMissile * Math.PI / 180;
+
+	this.responRadius = Missile.START_Radius_PX * ( ( (100 + game.rnd.integerInRange(0, Missile.START_RANDOM_Radius_PERCENT) ) / 100) );
+	var posX = Math.sin(radians) * this.responRadius;
+	var posY = Math.cos(radians) * this.responRadius;
+
+	this.x = game.world.centerX + posX;
+	this.y = game.world.centerY + posY;
+	// this.x = this.spaceship.x + posX;
+	// this.y = this.spaceship.y + posY;
+
+
+	var MissileAngle = this.getAngle(this.spaceship.x, this.spaceship.y, this.x, this.y);
+	this.angle = this.getSpriteAngle(MissileAngle);
+
+	this.angleFromMissile = MissileAngle;
+
+	this.upgradeLevel();
+}
+
+Missile.prototype.update = function() {
+	if(!this.isActivated)
+		return;
+
+	// game.physics.arcade.overlap(this.spaceship, this, this.collisionHandler, null, this);
+	game.physics.arcade.collide(this.spaceship, this, this.collisionHandler, null, this);
+	var deltaTime = game.time.elapsed / 1000;
+
+	var radians = this.angleFromMissile * Math.PI / 180;
+	var moveX = Math.sin(radians) * this.speed * deltaTime;
+	var moveY = Math.cos(radians) * this.speed * deltaTime;
+
+	this.x -= moveX;
+	this.y -= moveY;
+
+	var distanceX = this.x - game.world.centerX;
+	var distanceY = this.y - game.world.centerY;
+	var distanceFromCenter = Math.sqrt(Math.abs(distanceX * distanceX) + Math.abs(distanceY * distanceY));
+	if(distanceFromCenter > this.responRadius)
+		this.moveRandomPosition();
+}
+
+
+Missile.prototype.collisionHandler = function() {
+	this.stop();
+	this.onCollisionFunction();
+}
+
+Missile.prototype.stop = function() {
+	this.setActive(false);
+	this.body.enable = false;
+	this.alpha = 0;
+}
+
+Missile.prototype.setActive = function(isActivated) {
+	this.isActivated = isActivated;
+}
+
+Missile.prototype.getSpriteAngle = function (angle){
+	return 360 - angle;
+}
+
+Missile.prototype.getAngle = function (x1, y1, x2, y2){
+	var dx = x2 - x1;
+	var dy = y2 - y1;
+
+	var rad= Math.atan2(dx, dy);
+	var degree = (rad * 180) / Math.PI ;
+	if(degree < 0)
+		degree += 360;
+
+	return degree;
+}
+
+Missile.prototype.upgradeLevel = function() {
+	if(this.speedLevel == 5)
+		return;
+
+	var rand = game.rnd.integerInRange(0, 100);
+
+	var successNumber = 0;
+	switch(this.speedLevel) {
+		case 0:
+		successNumber = 90;
+		break;
+
+		case 1:
+		successNumber = 80;
+		break;
+
+		case 2:
+		successNumber = 70;
+		break;
+
+		case 3:
+		successNumber = 60;
+		break;
+
+		case 4:
+		successNumber = 50;
+		break;
+	}
+
+	if(rand < successNumber)
+		this.speedUp();
+}
+
+Missile.prototype.speedUp = function() {
+	this.speedLevel++;
+
+	this.speed = Missile.DEFAULT_SPEED_DOT_PER_SEC + (this.boostSpeed * this.speedLevel);
+
+	switch(this.speedLevel) {
+		case 1:
+		this.tint = 0xffffff;
+		break;
+
+		case 2:
+		this.tint = 0xffaaaa;
+		break;
+
+		case 3:
+		this.tint = 0xaaffaa;
+		break;
+
+		case 4:
+		this.tint = 0xaaaaff;
+		break;
+
+		case 5:
+		this.tint = 0xaaaaaa;
+		break;
+	}
+}
+
+
+
+Missile.DEFAULT_SPEED_DOT_PER_SEC		= 150;
+
+Missile.START_Radius_PX				= 600;
+Missile.START_RANDOM_Radius_PERCENT	= 40;

src/game/mouse/dodge/spaceship.js

@@ -3,19 +3,17 @@ Spaceship.constructor = Spaceship;
 
 function Spaceship() {
 	this.isActivated = false;
-	this.isOnWaitingRoom = true;
 	this.speed = Spaceship.DEFAULT_SPEED;
 
-	Phaser.Sprite.call(this, game, game.world.centerX, game.world.centerY, 'heart_full');
+	Phaser.Sprite.call(this, game, game.world.centerX, game.world.centerY, 'spaceship');
 	game.add.existing(this);
-	this.scale.set(0.5);
+	this.scale.set(1);
 	this.anchor.set(0.5);
 	this.halfWidth = this.width / 2;
 
-	// game.physics.enable(this, Phaser.Physics.ARCADE);
 	game.physics.arcade.enable(this);
 
-	this.setActive(true);
+	// this.setActive(true);
 }
 
 
@@ -45,15 +43,15 @@ Spaceship.prototype.update = function() {
 Spaceship.prototype.setDirection = function(dir) {
 	switch(dir) {
 		case Spaceship.DIR_LEFT:
-		this.tint = 0x99ff99;
+		this.tint = 0xeeeeee;
 		break;
 
 		case Spaceship.DIR_MIDDLE:
-		this.tint = 0xffffff;
+		this.tint = 0xdddddd;
 		break;
 
 		case Spaceship.DIR_RIGHT:
-		this.tint = 0x9999ff;
+		this.tint = 0xcccccc;
 		break;
 	}
 }
@@ -86,7 +84,7 @@ Spaceship.prototype.goRandomPosition = function() {
 
 
 
-Spaceship.DEFAULT_SPEED		= 200;
+Spaceship.DEFAULT_SPEED		= 400;
 
 Spaceship.DIR_LEFT			= 0;
 Spaceship.DIR_MIDDLE		= 1;

src/game/mouse/dodge/stop_watch.js

@@ -0,0 +1,84 @@
+function StopWatch() {
+	this.ellpasedTime = 0;
+	this.startTime = 0;
+
+	var fontStyle = StopWatch.DEFAULT_TEXT_FONT;
+
+	fontStyle.align = "right";
+	fontStyle.boundsAlignH = "right";
+	this.timerText = game.add.text(game.world.width - 200, 35, "", fontStyle);
+	this.timerText.anchor.set(0, 0.5);
+
+	// var grd = this.label.context.createLinearGradient(0, 0, 0, StopWatch.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;
+
+	this.timerEvent = null;
+};
+
+StopWatch.prototype.start = function() {
+	this.startTime = game.time.totalElapsedSeconds();
+	console.log(this.startTime);
+	this.printTime();
+
+	if(this.timerEvent === null)
+		this.timerEvent = game.time.events.loop(Phaser.Timer.SECOND / 10, this.updateTimer, this);
+}
+
+StopWatch.prototype.pause = function() {
+	this.isPaused = true;
+}
+
+StopWatch.prototype.resume = function() {
+	this.isPaused = false;
+}
+
+StopWatch.prototype.stop = function() {
+	var recordTime = game.time.totalElapsedSeconds() - this.startTime;
+
+	if(this.timerEvent)
+		this.removeTimer();
+
+	return recordTime;
+}
+
+StopWatch.prototype.updateTimer = function() {
+	if(this.isPaused == true)
+		return;
+
+	this.ellpasedTime = game.time.totalElapsedSeconds() - this.startTime;
+	this.printTime();
+}
+
+StopWatch.prototype.printTime = function() {
+	var ellapsedTimeText = this.ellpasedTime.toString();
+	var timeText = "";
+	if(ellapsedTimeText.length == 1)
+		timeText = ellapsedTimeText + ".0";
+	else
+		timeText = ellapsedTimeText.substring(0, 3);
+	this.timerText.text = timeText + "초";
+}
+
+StopWatch.prototype.removeTimer = function() {
+	game.time.events.remove(this.timerEvent);
+	this.timerEvent = null;
+}
+
+
+
+StopWatch.FONT_HEIGHT_PX		= 70;
+
+StopWatch.DEFAULT_TEXT_FONT	= {
+	font: "38px Arial",
+	align: "center",
+	boundsAlignH: "center",		// left, center. right
+	boundsAlignV: "middle", 	// top, middle, bottom
+	fill: "#fff"
+};

src/game/result/result.js

@@ -86,7 +86,15 @@ var Result = {
 		var y = 150;
 		if(sessionStorageManager.getRecord() === null)
 			sessionStorageManager.setRecord(0);
-		var record = NumberUtil.numberWithCommas(Math.floor(sessionStorageManager.getRecord()));
+
+		var record = 0;
+		if(sessionStorageManager.getPlayingAppID() == 104) {
+			var recordTime = sessionStorageManager.getRecord();
+			record = recordTime.toFixed(3);
+		} else {
+			record = NumberUtil.numberWithCommas(Math.floor(sessionStorageManager.getRecord()));
+		}
+
 		style.font = "80px Arial";
 
 		if(isTypingPracticeApp() || isTypingTestApp()) {
@@ -112,13 +120,17 @@ var Result = {
 		scoreText.anchor.set(0.5);
 	},
 
+	/*
 	recordUnit: function() {
 		var recordUnit = "";
-		if(sessionStorageManager.getPlayingAppID() >= 100)
+		if(sessionStorageManager.getPlayingAppID() == 104)
+			return "초";
+		else if(sessionStorageManager.getPlayingAppID() >= 100)
 			return "점";
 		else
 			return "타";
 	},
+	*/
 
 	printTodayBestRecord: function() {
 		var newRecordEmitter = game.add.emitter(game.world.centerX, 140, 300);

src/web/client/dodge.html

@@ -22,8 +22,8 @@
 		})(window,document,'script','dataLayer','GTM-N8PB4F3');</script>
 		<!-- End Google Tag Manager -->
 
-		<title>미사일 피하기, 초코마에</title>
+		<title>외계인 피하기, 초코마에</title>
-		<meta name="description" CONTENT="외계인 침공 Space Invaders, 마우스 클릭 연습 앱 mouse click practice app, 초코마에 chcomae">
+		<meta name="description" CONTENT="외계인 피하기 - 마우스 움직임 연습 앱 | 초코마에, Dodge aliens - Mouse moving practice app | chcomae">
 
 		<link rel="icon" href="/favicon.ico" type="image/x-icon" />
 		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
@@ -58,6 +58,8 @@
 		<script src="../../game/mouse/dodge/loading.js"></script>
 		<script src="../../game/mouse/dodge/spaceship.js"></script>
 		<script src="../../game/mouse/dodge/alien.js"></script>
+		<!-- <script src="../../game/mouse/dodge/missile.js"></script> -->
+		<script src="../../game/mouse/dodge/stop_watch.js"></script>
 		<script src="../../game/mouse/dodge/game.js"></script>
 		<script src="../../game/mouse/dodge/main.js"></script>