Merge pull request #75 from LoveEevee/view-add-note-explosions

View: Add note explosions

public/src/js/assets.js

@@ -5,6 +5,7 @@ var assets = {
 		"notes.png",
 		"notes_drumroll.png",
 		"notes_hit.png",
+		"notes_explosion.png",
 		"balloon.png",
 		"taiko.png",
 		"dancing-don.gif",

public/src/js/canvasasset.js

@@ -14,14 +14,16 @@ class CanvasAsset{
 			var u = (a, b) => typeof a === "undefined" ? b : a
 			var frame = 0
 			var ms = this.controller.getElapsedTime()
+			var beatInterval = this.frameSpeed ? 1000 / 60 : this.beatInterval
+			
 			if(this.animationEnd){
-				if(ms > this.animationStart + this.animationEnd.frameCount * this.speed * this.beatInterval){
+				if(ms > this.animationStart + this.animationEnd.frameCount * this.speed * beatInterval){
 					this.animationEnd.callback()
 					this.animationEnd = false
 					return this.draw()
 				}
 			}
-			var index = Math.floor((ms - this.animationStart) / (this.speed * this.beatInterval))
+			var index = Math.floor((ms - this.animationStart) / (this.speed * beatInterval))
 			if(Array.isArray(this.animation)){
 				frame = this.animation[this.mod(this.animation.length, index)]
 			}else{
@@ -74,8 +76,9 @@ class CanvasAsset{
 			return frames
 		}
 	}
-	setUpdateSpeed(speed){
+	setUpdateSpeed(speed, frameSpeed){
 		this.speed = speed
+		this.frameSpeed = frameSpeed
 	}
 	setAnimationStart(ms){
 		this.animationStart = ms
@@ -91,8 +94,8 @@ class CanvasAsset{
 		}
 	}
 	changeBeatInterval(beatMS, initial){
-		var ms = this.controller.getElapsedTime()
+		if(!initial && !this.frameSpeed){
-		if(!initial){
+			var ms = this.controller.getElapsedTime()
 			this.animationStart = ms - (ms - this.animationStart) / this.beatInterval * beatMS
 		}
 		this.beatInterval = beatMS

public/src/js/mekadon.js

@@ -90,7 +90,7 @@ class Mekadon{
 		}else if(type === "drumroll" || type === "daiDrumroll"){
 			this.game.checkDrumroll(circle, score === 2)
 		}else{
-			this.controller.displayScore(score)
+			this.controller.displayScore(score, false, keyDai)
 			this.game.updateCombo(score)
 			this.game.updateGlobalScore(score, keyDai ? 2 : 1, circle.gogoTime)
 			this.game.updateCurrentCircle()

public/src/js/view.js

@@ -58,9 +58,8 @@
 				
 				if(this.controller.autoPlayEnabled){
 					this.touchDrumDiv.style.display = "none"
-				}else{
-					pageEvents.add(this.canvas, "touchstart", this.ontouch.bind(this))
 				}
+				pageEvents.add(this.canvas, "touchstart", this.ontouch.bind(this))
 				
 				this.gameDiv.classList.add("touch-visible")
 				document.getElementById("version").classList.add("version-hide")
@@ -727,7 +726,7 @@
 		ctx.restore()
 		
 		// Hit notes explosion
-		
+		this.assets.drawAssets("notes")
 		
 		// Good, OK, Bad
 		if(scoreMS < 300){
@@ -1319,6 +1318,16 @@
 			this.currentScore.ms = this.getMS()
 			this.currentScore.type = score
 			this.currentScore.bigNote = bigNote
+			
+			if(score > 0){
+				var explosion = this.assets.explosion
+				explosion.type = (bigNote ? 0 : 2) + (score === 450 ? 0 : 1)
+				explosion.setAnimation("normal")
+				explosion.setAnimationStart(this.getMS())
+				explosion.setAnimationEnd(bigNote ? 14 : 7, () => {
+					explosion.setAnimation(false)
+				})
+			}
 		}
 	}
 	posToMs(pos, speed){
@@ -1362,7 +1371,7 @@
 				if(moveTo !== null){
 					this.pauseConfirm(moveTo)
 				}
-			}else{
+			}else if(!this.controller.autoPlayEnabled){
 				var pageX = touch.pageX * this.pixelRatio
 				var pageY = touch.pageY * this.pixelRatio
 				

public/src/js/viewassets.js

@@ -5,6 +5,7 @@ class ViewAssets{
 		this.allAssets = []
 		this.ctx = this.view.ctx
 		
+		// Background
 		this.don = this.createAsset("background", frame => {
 			var imgw = 360
 			var imgh = 184
@@ -55,6 +56,8 @@ class ViewAssets{
 		}
 		this.don.addFrames("clear", 30, "don_anim_clear")
 		this.don.normalAnimation()
+		
+		// Bar
 		this.fire = this.createAsset("bar", frame => {
 			var imgw = 360
 			var imgh = 370
@@ -87,6 +90,42 @@ class ViewAssets{
 		})
 		this.fire.addFrames("normal", 7, "fire_anim")
 		this.fire.setUpdateSpeed(1 / 8)
+		
+		// Notes
+		this.explosion = this.createAsset("notes", frame => {
+			var w = 222
+			var h = 222
+			var mul = this.view.slotPos.size / 106
+			this.ctx.globalCompositeOperation = "screen"
+			var alpha = 1
+			if(this.explosion.type < 2){
+				if(frame < 2){
+					mul *= 1 - (frame + 1) * 0.2
+				}else if(frame > 9){
+					alpha = Math.max(0, 1 - (frame - 10) / 4)
+				}
+			}else if(frame > 5){
+				alpha = 0.5
+			}
+			if(alpha < 1 && !this.controller.touchEnabled){
+				this.ctx.globalAlpha = alpha
+			}
+			return {
+				sx: this.explosion.type * w,
+				sy: Math.min(3, Math.floor(frame / 2)) * h,
+				sw: w,
+				sh: h,
+				x: this.view.slotPos.x - w * mul / 2,
+				y: this.view.slotPos.y - h * mul / 2,
+				w: w * mul,
+				h: h * mul
+			}
+		})
+		this.explosion.type = null
+		this.explosion.addFrames("normal", 14, "notes_explosion")
+		this.explosion.setUpdateSpeed(1, true)
+		
+		// Foreground
 		this.fireworks = []
 		for(let i = 0; i < 5 ; i++){
 			var fireworksAsset = this.createAsset("foreground", frame => {
@@ -112,6 +151,7 @@ class ViewAssets{
 			fireworksAsset.setUpdateSpeed(1 / 16)
 			this.fireworks.push(fireworksAsset)
 		}
+		
 		this.changeBeatInterval(this.view.beatInterval, true)
 	}
 	createAsset(layer, position){