Fallback to wav if ogg is not supported, fix circles animation

public/src/js/assets.js

@@ -112,6 +112,7 @@ var assets = {
 		"bgm_result.ogg",
 		"bgm_setsume.ogg"
 	],
+	"audioOgg": "note_ka.ogg",
 	"fonts": [
 		"Kozuka",
 		"TnT"

public/src/js/circle.js

@@ -31,11 +31,9 @@ class Circle{
 	getLastFrame(){
 		return this.lastFrame
 	}
-	incFrame(){
-		this.lastFrame += 20
-	}
-	animate(){
+	animate(ms){
 		this.animating = true
+		this.animT = ms
 	}
 	isAnimated(){
 		return this.animating
@@ -43,9 +41,6 @@ class Circle{
 	getAnimT(){
 		return this.animT
 	}
-	incAnimT(){
-		this.animT += 0.05
-	}
 	getPlayed(){
 		return this.isPlayed
 	}

public/src/js/game.js

@@ -241,6 +241,7 @@ class Game{
 		this.globalScore.points += score
 	}
 	checkDrumroll(circle){
+		var ms = this.elapsedTime
 		var dai = circle.getType() === "daiDrumroll"
 		var score = 100
 		circle.hit()
@@ -252,14 +253,14 @@ class Game{
 		}
 		var circleAnim = new Circle({
 			id: 0,
-			start: this.elapsedTime,
+			start: ms,
 			type: sound,
 			txt: "",
 			speed: circle.speed,
 			gogoTime: circle.gogoTime
 		})
 		circleAnim.played(score, dai)
-		circleAnim.animate()
+		circleAnim.animate(ms)
 		this.controller.view.drumroll.push(circleAnim)
 		this.globalScore.drumroll++
 		this.globalScore.points += score * (dai ? 2 : 1)

public/src/js/loader.js

@@ -12,6 +12,26 @@ class Loader{
 		this.loaderPercentage = document.querySelector("#loader .percentage")
 		this.loaderProgress = document.querySelector("#loader .progress")
 			
+		snd.buffer = new SoundBuffer()
+		snd.musicGain = snd.buffer.createGain()
+		snd.sfxGain = snd.buffer.createGain()
+		snd.previewGain = snd.buffer.createGain()
+		snd.sfxGainL = snd.buffer.createGain("left")
+		snd.sfxGainR = snd.buffer.createGain("right")
+		snd.sfxLoudGain = snd.buffer.createGain()
+		snd.buffer.setCrossfade(
+			[snd.musicGain, snd.previewGain],
+			[snd.sfxGain, snd.sfxGainL, snd.sfxGainR],
+			0.5
+		)
+		snd.sfxLoudGain.setVolume(1.2)
+		
+		snd.buffer.load("/assets/audio/" + assets.audioOgg).then(() => {
+			this.oggNotSupported = false
+		}, () => {
+			this.oggNotSupported = true
+		}).then(() => {
+			
 			assets.fonts.forEach(name => {
 				var font = document.createElement("h1")
 				font.style.fontFamily = name
@@ -34,20 +54,6 @@ class Loader{
 				assets.image[id] = image
 			})
 			
-		snd.buffer = new SoundBuffer()
-		snd.musicGain = snd.buffer.createGain()
-		snd.sfxGain = snd.buffer.createGain()
-		snd.previewGain = snd.buffer.createGain()
-		snd.sfxGainL = snd.buffer.createGain("left")
-		snd.sfxGainR = snd.buffer.createGain("right")
-		snd.sfxLoudGain = snd.buffer.createGain()
-		snd.buffer.setCrossfade(
-			[snd.musicGain, snd.previewGain],
-			[snd.sfxGain, snd.sfxGainL, snd.sfxGainR],
-			0.5
-		)
-		snd.sfxLoudGain.setVolume(1.2)
-		
 			assets.audioSfx.forEach(name => {
 				this.promises.push(this.loadSound(name, snd.sfxGain))
 			})
@@ -86,8 +92,13 @@ class Loader{
 				this.clean()
 				this.callback()
 			}, this.errorMsg.bind(this))
+			
+		})
 	}
 	loadSound(name, gain){
+		if(this.oggNotSupported && name.endsWith(".ogg")){
+			name = name.slice(0, -4) + ".wav"
+		}
 		var id = this.getFilename(name)
 		return gain.load("/assets/audio/" + name).then(sound => {
 			assets.sounds[id] = sound

public/src/js/view.js

@@ -498,7 +498,7 @@ class View{
 				}
 			}else if(!circle.isAnimated()){
 				// Start animation to HP bar
-				circle.animate()
+				circle.animate(ms)
 			}
 			if(ms >= circle.ms && !circle.gogoChecked){
 				if(this.gogoTime != circle.gogoTime){
@@ -507,10 +507,12 @@ class View{
 				circle.gogoChecked = true
 			}
 			if(circle.isAnimated()){
-				var animationDuration = 470
-				if(ms <= finishTime + animationDuration){
-					var curveDistance = this.HPBarX + this.HPBarW - this.slotX
-					var bezierPoint = this.calcBezierPoint(circle.getAnimT(), [{
+				var animT = circle.getAnimT()
+				var animationDuration = 400
+				if(ms <= animT + animationDuration){
+					var curveDistance = this.HPBarX + this.HPBarW - this.slotX - this.HPBarColH / 2
+					var animPoint = (ms - animT) / animationDuration
+					var bezierPoint = this.calcBezierPoint(this.easeOut(animPoint), [{
 						x: this.slotX + this.circleSize * 0.4,
 						y: this.circleY - this.circleSize * 0.8
 					}, {
@@ -521,13 +523,9 @@ class View{
 						y: 0
 					}, {
 						x: this.slotX + curveDistance,
-						y: this.HPbarColY
+						y: this.HPbarColY + this.HPBarColH / 2
 					}])
 					this.drawCircle(circle, {x: bezierPoint.x, y: bezierPoint.y})
-					
-					// Update animation frame
-					circle.incAnimT()
-					circle.incFrame()
 				}
 				else{
 					circle.endAnimation()
@@ -548,6 +546,9 @@ class View{
 		}
 		return data[0]
 	}
+	easeOut(pos){
+		return Math.sin(Math.PI / 2 * pos)
+	}
 	drawCircle(circle, circlePos){
 		var z = this.canvas.scale
 		var fill, size, faceID