Add: hint particle effect

src/game/mouse/one_to_fifty/game.js

@@ -42,10 +42,6 @@ var Game = {
 		screenBottomUI.printLeftTextWithAppHighestRecord(sessionStorageManager.getAppHighestRecord());
 		screenBottomUI.printCenterText(sessionStorageManager.getPlayingAppKoreanName());
 		screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
-
-
-		this.startGame();
-		// // this.countDown();
 	},
 
 	initVariables: function() {
@@ -64,6 +60,8 @@ var Game = {
 
 		this.firstChocoballArray = this.makeChocoballArray(1, 25);
 		this.secondChocoballArray = this.makeChocoballArray(26, 50);
+
+		this.timerEvent = null;
 	},
 
 	drawObjects: function() {
@@ -86,14 +84,14 @@ var Game = {
 			this.chocoballs.push(chocoball);
 		}
 
-		this.hintBubble = new HintBubble(God.POSITION_X, God.POSITION_Y - 260);
+		this.nextChocoballBubble = new NextChocoballBubble(God.POSITION_X, God.POSITION_Y - 260);
 		this.nextChocoball = new Chocoball(
 			100,
 			this.difficulty,
 			(function(chocoball) { console.log("no event") }).bind(this)
 		);
 		this.nextChocoball.setNumber(this.nextNumber);
-		this.hintBubble.addChild(this.nextChocoball.body);
+		this.nextChocoballBubble.addChild(this.nextChocoball.body);
 
 		this.god = new God(God.POSITION_X, God.POSITION_Y, this);
 	},
@@ -125,6 +123,7 @@ var Game = {
 
 		if(chocoball.number == 50) {
 			// console.log("game clear");
+			this.cancelHintTimer();
 			chocoball.setVisible(false);
 			this.gameClear();
 			return;
@@ -136,13 +135,14 @@ var Game = {
 
 		this.nextNumber++;
 		this.god.animateHappy();
+		this.startHintTimer();
 
 		if(chocoball.number <= 25)
 			chocoball.setNumber(this.secondChocoballArray[chocoball.index]);
 		else
 			chocoball.setVisible(false);
 		this.nextChocoball.setNumber(this.nextNumber);
-		this.hintBubble.animateNextHint();
+		this.nextChocoballBubble.animateNextHint();
 
 		if(this.mode == "test" && this.nextNumber == 3) {
 			console.log("time over");
@@ -150,8 +150,40 @@ var Game = {
 		}
 	},
 
+	cancelHintTimer: function() {
+		if(this.timerEvent) {
+			game.time.events.remove(this.timerEvent);
+			this.timerEvent = null;
+		}
+	},
 
-	startGame: function() {
+	startHintTimer: function() {
+		this.cancelHintTimer();
+		this.timerEvent = game.time.events.loop(Game.SHOW_HINT_INTERVAL_MS, this.showHint, this);
+	},
+
+	showHint: function() {
+		// console.log("show hint for " + this.nextNumber);
+		for(var i = 0; i < 25; i++) {
+			if(this.chocoballs[i].number == this.nextNumber) {
+				// console.log("index : " + this.chocoballs[i].index);
+				var chocoball = this.chocoballs[i].body;
+				// console.log("x : " + chocoball.x + ", y : " + chocoball.y);
+				this.showExplosionParticle(chocoball.x - 11, chocoball.y - 19);
+				break;
+			}
+		}
+	},
+
+	showExplosionParticle: function(x, y) {
+		var hitStarEmitter = game.add.emitter(x, y, 1);
+		hitStarEmitter.makeParticles('star');
+		hitStarEmitter.gravity = 0;
+		hitStarEmitter.setAlpha(0.5, 0, Phaser.Timer.SECOND);
+		hitStarEmitter.setScale(0.5, 1.5, 0.5, 1.5, Phaser.Timer.SECOND, Phaser.Easing.Quintic.Out);
+		hitStarEmitter.setXSpeed(0, 0);
+		hitStarEmitter.setYSpeed(0, 0);
+		hitStarEmitter.start(true, 500, null, 10);
 	},
 
 	gameClear: function() {
@@ -193,5 +225,5 @@ var Game = {
 
 
 Game.GAME_OVER_WAIT_TIME_MS		= 3000;
-// Game.GAME_TIME_SEC				= 60;
+
-// Game.NEXT_STAGE_DELAY_MS		= 500;
+Game.SHOW_HINT_INTERVAL_MS		= 3000;

src/game/mouse/one_to_fifty/hint_bubble.js

@@ -1,76 +0,0 @@
-function HintBubble(x, y) {
-	this.posY = y;
-
-	this.bubble = this.makeBubbleSprite(x, y);
-}
-
-HintBubble.prototype.makeBubbleSprite = function(x, y) {
-	var graphics = new Phaser.Graphics(game, 0, 0);
-
-	var triangleStartX = 0;
-	var triangleStartY = HintBubble.RADIUS / 7 * 4;
-	var triangleHalfWidth = HintBubble.TRIANGLE_WIDTH / 2;
-
-	// tail outline
-	graphics.lineStyle(HintBubble.STROKE_WIDTH, HintBubble.COLOR_BUBBLE_STROKE);
-	graphics.beginFill(HintBubble.COLOR_BUBBLE_FILL);
-	graphics.moveTo(triangleStartX, triangleStartY);
-	graphics.lineTo(triangleStartX + triangleHalfWidth, triangleStartY - HintBubble.TRIANGLE_HEIGHT);
-	graphics.lineTo(triangleStartX - triangleHalfWidth, triangleStartY - HintBubble.TRIANGLE_HEIGHT);
-	graphics.lineTo(triangleStartX, triangleStartY);
-	graphics.endFill();
-
-	// circle
-	graphics.lineStyle(HintBubble.STROKE_WIDTH / 2, HintBubble.COLOR_BUBBLE_STROKE);
-	graphics.beginFill(HintBubble.COLOR_BUBBLE_FILL);
-	graphics.drawCircle(0, 0, HintBubble.RADIUS);
-	graphics.endFill();
-
-	// tail body
-	graphics.lineStyle(0);
-	graphics.beginFill(HintBubble.COLOR_BUBBLE_FILL);
-	graphics.moveTo(triangleStartX, triangleStartY);
-	graphics.lineTo(triangleStartX + triangleHalfWidth, triangleStartY - HintBubble.TRIANGLE_HEIGHT);
-	graphics.lineTo(triangleStartX - triangleHalfWidth, triangleStartY - HintBubble.TRIANGLE_HEIGHT);
-	graphics.lineTo(triangleStartX, triangleStartY);
-	graphics.endFill();
-
-	texture = graphics.generateTexture();
-
-	sprite = game.add.sprite(x, y, texture);
-	sprite.anchor.set(0.5);
-	return sprite;
-}
-
-HintBubble.prototype.addChild = function(chocoball) {
-	this.bubble.addChild(chocoball);
-	chocoball.y -= HintBubble.TRIANGLE_HEIGHT / 9 * 2;
-}
-
-
-HintBubble.prototype.animateNextHint = function() {
-	this.bubble.y = this.posY + HintBubble.ANIMATION_HEIGHT;
-
-	var tween = game.add.tween(this.bubble);
-	tween.to({y:this.posY}, 500, Phaser.Easing.Quadratic.Out, true, 0);
-	tween.onComplete.add(this.animateReset, this);
-	tween.start();
-}
-
-HintBubble.prototype.animateReset = function() {
-	this.bubble.y = this.posY;
-}
-
-
-
-HintBubble.RADIUS			= 110;
-HintBubble.TRIANGLE_HEIGHT	= 40;
-HintBubble.TRIANGLE_WIDTH	= 40;
-
-HintBubble.STROKE_WIDTH		= 10;
-HintBubble.OFFSET_Y			= 240;
-
-HintBubble.ANIMATION_HEIGHT	= 20;
-
-HintBubble.COLOR_BUBBLE_FILL	= 0xFFEEEE;
-HintBubble.COLOR_BUBBLE_STROKE	= 0x331122;

src/game/mouse/one_to_fifty/loading.js

@@ -29,10 +29,9 @@ var Loading = {
 	startLoading: function() {
 		game.load.image('icon_fullscreen',	'../../../resources/image/icon/fullscreen_white.png');
 
-		// card
+		// hint effect
-		game.load.image('card_back', '../../../resources/image/ui/card_back.png');
+		// game.load.image('star', '../../../resources/image/background/star_7x7.png');
-		game.load.image('card_front', '../../../resources/image/ui/card_front.png');
+		game.load.image('star', '../../../resources/image/ui/star_particle.png');
-		game.load.image('card_edge', '../../../resources/image/ui/card_selected.png');
 
 		Chocoball.loadResources();
 		God.loadResources();

src/game/mouse/one_to_fifty/next_chocoball_bubble.js

@@ -0,0 +1,76 @@
+function NextChocoballBubble(x, y) {
+	this.posY = y;
+
+	this.bubble = this.makeBubbleSprite(x, y);
+}
+
+NextChocoballBubble.prototype.makeBubbleSprite = function(x, y) {
+	var graphics = new Phaser.Graphics(game, 0, 0);
+
+	var triangleStartX = 0;
+	var triangleStartY = NextChocoballBubble.RADIUS / 7 * 4;
+	var triangleHalfWidth = NextChocoballBubble.TRIANGLE_WIDTH / 2;
+
+	// tail outline
+	graphics.lineStyle(NextChocoballBubble.STROKE_WIDTH, NextChocoballBubble.COLOR_BUBBLE_STROKE);
+	graphics.beginFill(NextChocoballBubble.COLOR_BUBBLE_FILL);
+	graphics.moveTo(triangleStartX, triangleStartY);
+	graphics.lineTo(triangleStartX + triangleHalfWidth, triangleStartY - NextChocoballBubble.TRIANGLE_HEIGHT);
+	graphics.lineTo(triangleStartX - triangleHalfWidth, triangleStartY - NextChocoballBubble.TRIANGLE_HEIGHT);
+	graphics.lineTo(triangleStartX, triangleStartY);
+	graphics.endFill();
+
+	// circle
+	graphics.lineStyle(NextChocoballBubble.STROKE_WIDTH / 2, NextChocoballBubble.COLOR_BUBBLE_STROKE);
+	graphics.beginFill(NextChocoballBubble.COLOR_BUBBLE_FILL);
+	graphics.drawCircle(0, 0, NextChocoballBubble.RADIUS);
+	graphics.endFill();
+
+	// tail body
+	graphics.lineStyle(0);
+	graphics.beginFill(NextChocoballBubble.COLOR_BUBBLE_FILL);
+	graphics.moveTo(triangleStartX, triangleStartY);
+	graphics.lineTo(triangleStartX + triangleHalfWidth, triangleStartY - NextChocoballBubble.TRIANGLE_HEIGHT);
+	graphics.lineTo(triangleStartX - triangleHalfWidth, triangleStartY - NextChocoballBubble.TRIANGLE_HEIGHT);
+	graphics.lineTo(triangleStartX, triangleStartY);
+	graphics.endFill();
+
+	texture = graphics.generateTexture();
+
+	sprite = game.add.sprite(x, y, texture);
+	sprite.anchor.set(0.5);
+	return sprite;
+}
+
+NextChocoballBubble.prototype.addChild = function(chocoball) {
+	this.bubble.addChild(chocoball);
+	chocoball.y -= NextChocoballBubble.TRIANGLE_HEIGHT / 9 * 2;
+}
+
+
+NextChocoballBubble.prototype.animateNextHint = function() {
+	this.bubble.y = this.posY + NextChocoballBubble.ANIMATION_HEIGHT;
+
+	var tween = game.add.tween(this.bubble);
+	tween.to({y:this.posY}, 500, Phaser.Easing.Quadratic.Out, true, 0);
+	tween.onComplete.add(this.animateReset, this);
+	tween.start();
+}
+
+NextChocoballBubble.prototype.animateReset = function() {
+	this.bubble.y = this.posY;
+}
+
+
+
+NextChocoballBubble.RADIUS			= 110;
+NextChocoballBubble.TRIANGLE_HEIGHT	= 40;
+NextChocoballBubble.TRIANGLE_WIDTH	= 40;
+
+NextChocoballBubble.STROKE_WIDTH		= 10;
+NextChocoballBubble.OFFSET_Y			= 240;
+
+NextChocoballBubble.ANIMATION_HEIGHT	= 20;
+
+NextChocoballBubble.COLOR_BUBBLE_FILL	= 0xFFEEEE;
+NextChocoballBubble.COLOR_BUBBLE_STROKE	= 0x331122;

src/game/mouse/one_to_fifty/stop_watch.js

@@ -3,39 +3,23 @@ function StopWatch() {
 	this.ellapsedTime = 0;
 	this.isPaused = true;
 
-	var fontStyle = StopWatch.DEFAULT_TEXT_FONT;
+	this.timerEvent = null;
 
+	var fontStyle = StopWatch.DEFAULT_TEXT_FONT;
 	this.timerText = game.add.text(game.world.centerX, 35, "", fontStyle);
 	this.timerText.anchor.set(0.5);
 	this.printTime();
-
-	// 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.isPaused = false;
 	this.startTime = game.time.totalElapsedSeconds();
 
-	// this.startTime = new Date();
-	console.log(this.startTime);
-
 	this.ellapsedTimer = game.time.create(false);
 	this.timerEvent = this.ellapsedTimer.loop(10, this.updateTimer, this);
 	this.ellapsedTimer.start();
 
 	this.printTime();
-
-	// this.timerEvent = game.time.events.loop(Phaser.Timer.SECOND / 100, this.updateTimer, this);
 }
 
 StopWatch.prototype.pause = function() {
@@ -51,7 +35,6 @@ StopWatch.prototype.stop = function() {
 	this.removeTimer();
 
 	return recordTime;
-	// return this.ellapsedTime;
 }
 
 StopWatch.prototype.updateTimer = function() {
@@ -59,9 +42,6 @@ StopWatch.prototype.updateTimer = function() {
 		return;
 
 	this.ellapsedTime = game.time.totalElapsedSeconds() - this.startTime;
-	// console.log(this.ellapsedTime);
-	// this.ellapsedTime += 0.01;
-
 	this.printTime();
 }
 

src/game/result/result.js

@@ -120,11 +120,9 @@ var Result = {
 		}
 
 		if(this.isHighestRecordPreferApp()) {
-			console.log("highest record prefer");
 			if(prevRecord > appHighestRecord)
 				this.showHighestRecordEffect(prevRecord);
 		} else {
-			console.log("lowest record prefer");
 			if(appHighestRecord == 0)
 				this.showHighestRecordEffect(prevRecord);
 			else if(prevRecord < appHighestRecord)

src/web/client/onetofifty.html

@@ -69,7 +69,7 @@
 		<script src="../../game/mouse/one_to_fifty/stop_watch.js"></script>
 		<script src="../../game/mouse/one_to_fifty/chocoball.js"></script>
 		<script src="../../game/mouse/one_to_fifty/god.js"></script>
-		<script src="../../game/mouse/one_to_fifty/hint_bubble.js"></script>
+		<script src="../../game/mouse/one_to_fifty/next_chocoball_bubble.js"></script>
 
 		<script src="../../game/mouse/one_to_fifty/game.js"></script>
 		<script src="../../game/mouse/one_to_fifty/main.js"></script>