add bg movie support

detail https://www.ani-nya.com/wordpress/archives/468
2024-12-16 21:50:45 +08:00
parent d8e52b9294
commit 60be4b967e
3 changed files with 68 additions and 36 deletions
--- a/public/src/js/controller.js
+++ b/public/src/js/controller.js
@@ -83,9 +83,6 @@ class Controller{
 		
 		this.game = new Game(this, this.selectedSong, this.parsedSongData)
 		this.view = new View(this)
-		if (parseFloat(localStorage.getItem("baisoku") ?? "1", 10) !== 1) {
-			this.saveScore = false;
-		}
 		this.mekadon = new Mekadon(this, this.game)
 		this.keyboard = new GameInput(this)
 		if(!autoPlayEnabled && this.multiplayer !== 2){
@@ -123,6 +120,7 @@ class Controller{
 	}
 	startMainLoop(){
 		this.mainLoopRunning = true
+		window.gamestatus = 'start'
 		this.gameLoop()
 		this.viewLoop()
 		if(this.multiplayer !== 2){
@@ -137,6 +135,20 @@ class Controller{
 	}
 	stopMainLoop(){
 		this.mainLoopRunning = false
+		window.gamestatus = 'stop'
+		
+		if (window.videoElement) {
+        // 停止视频播放
+        window.videoElement.pause();
+        
+        // 移除视频元素
+        document.body.removeChild(window.videoElement);
+        
+        // 解除引用，允许垃圾回收
+        window.videoElement = null;
+    }
+		
+		
 		if(this.game.mainAsset){
 			this.game.mainAsset.stop()
 		}
@@ -266,7 +278,7 @@ class Controller{
 							var chartDiff = this.selectedSong.difficulty
 							chart = chart[chartDiff]
 						}
-						this.addPromise(promises, chart.read(this.selectedSong.type === "tja" ? "utf-8" : undefined).then(data => {
+						this.addPromise(promises, chart.read(this.selectedSong.type === "tja" ? "sjis" : undefined).then(data => {
 							this.songData = data.replace(/\0/g, "").split("\n")
 							return Promise.resolve()
 						}), chart.url)
@@ -276,6 +288,9 @@ class Controller{
 							songObj.lyricsData = result
 						}, () => Promise.resolve()), songObj.lyricsFile.url)
 					}
+					if(songObj && songObj.category_id === 9){
+					    LoadSong.insertBackgroundVideo(songObj.id)
+					}
 					Promise.all(promises).then(resolve)
 				}
 			}).then(() => {
@@ -325,6 +340,8 @@ class Controller{
 			this.syncWith.game.togglePause(forcePause, pauseMove, noSound)
 		}
 		this.game.togglePause(forcePause, pauseMove, noSound)
+		
+		
 	}
 	getKeys(){
 		return this.keyboard.getKeys()
--- a/public/src/js/loadsong.js
+++ b/public/src/js/loadsong.js
@@ -59,11 +59,12 @@ class LoadSong{
 			}
 		}
 		this.songObj = songObj
-		
 		song.songBg = this.randInt(1, 5)
 		song.songStage = this.randInt(1, 3)
 		song.donBg = this.randInt(1, 6)
-		
+		if(this.songObj && this.songObj.category_id === 9){
+			 LoadSong.insertBackgroundVideo(this.songObj.id)
+				}
 		if(song.songSkin && song.songSkin.name){
 			var imgLoad = []
 			for(var type in song.songSkin){
@@ -134,7 +135,7 @@ class LoadSong{
 			chart = chart[chartDiff]
 		}
 		if(chart){
-			this.addPromise(chart.read(song.type === "tja" ? "utf-8" : "").then(data => {
+			this.addPromise(chart.read(song.type === "tja" ? "sjis" : "").then(data => {
 				this.songData = data.replace(/\0/g, "").split("\n")
 			}), chart.url)
 		}else{
@@ -308,7 +309,7 @@ class LoadSong{
 						if(song.type === "tja" || !chart || !chart.separateDiff || !chart[chartDiff]){
 							this.startMultiplayer()
 						}else{
-							chart[chartDiff].read(song.type === "tja" ? "utf-8" : "").then(data => {
+							chart[chartDiff].read(song.type === "tja" ? "sjis" : "").then(data => {
 								this.song2Data = data.replace(/\0/g, "").split("\n")
 							}, () => {}).then(() => {
 								this.startMultiplayer()
@@ -368,10 +369,29 @@ class LoadSong{
 	clean(){
 		delete this.promises
 		delete this.songObj
+        delete this.videoElement
 		pageEvents.remove(p2, "message")
 		if(this.cancelButton){
 			pageEvents.remove(this.cancelButton, ["mousedown", "touchstart"])
 			delete this.cancelButton
 		}
 	}
+	
+	static insertBackgroundVideo(songId) {
+        const video = document.createElement("video");
+        video.src = `songs/${songId}/main.mp4`; 
+        video.autoplay = true;
+        video.muted = true;  // 可选：静音
+        video.style.objectFit = 'cover';
+        video.style.position = 'fixed';
+        video.style.top = "0";
+        video.style.left = "0";
+        video.style.zIndex = "0";  // 背景视频
+        video.style.width = "100vw";
+        video.style.height = "100vh";
+        document.body.appendChild(video);
+        window.videoElement = video;
+    }
+
+	
 }
--- a/public/src/js/view.js
+++ b/public/src/js/view.js
@@ -1487,11 +1487,11 @@
 		var measureH = 130 * mul
 		
 		measures.forEach(measure => {
-			var timeForDistance = this.posToMs(distanceForCircle, measure.speed * parseFloat(localStorage.getItem("baisoku") ?? "1", 10))
+			var timeForDistance = this.posToMs(distanceForCircle, measure.speed)
 			var startingTime = measure.ms - timeForDistance + this.controller.videoLatency
-			var finishTime = measure.ms + this.posToMs(this.slotPos.x - this.slotPos.paddingLeft + 3, measure.speed * parseFloat(localStorage.getItem("baisoku") ?? "1", 10)) + this.controller.videoLatency
+			var finishTime = measure.ms + this.posToMs(this.slotPos.x - this.slotPos.paddingLeft + 3, measure.speed) + this.controller.videoLatency
 			if(measure.visible && (!measure.branch || measure.branch.active) && ms >= startingTime && ms <= finishTime){
-				var measureX = this.slotPos.x + this.msToPos(measure.ms - ms + this.controller.videoLatency, measure.speed * parseFloat(localStorage.getItem("baisoku") ?? "1", 10))
+				var measureX = this.slotPos.x + this.msToPos(measure.ms - ms + this.controller.videoLatency, measure.speed)
 				this.ctx.strokeStyle = measure.branchFirst ? "#ff0" : "#bdbdbd"
 				this.ctx.lineWidth = 3
 				this.ctx.beginPath()
@@ -1537,7 +1537,7 @@
 		
 		for(var i = circles.length; i--;){
 			var circle = circles[i]
-			var speed = circle.speed * parseFloat(localStorage.getItem("baisoku") ?? "1", 10)
+			var speed = circle.speed
 			
 			var timeForDistance = this.posToMs(distanceForCircle + this.slotPos.size / 2, speed)
 			var startingTime = circle.ms - timeForDistance + this.controller.videoLatency
@@ -1626,13 +1626,11 @@
 		var circleMs = circle.ms
 		var endTime = circle.endTime
 		var animated = circle.animating
-		var speed = circle.speed * parseFloat(localStorage.getItem("baisoku") ?? "1", 10)
+		var speed = circle.speed
 		var played = circle.isPlayed
 		var drumroll = 0
 		var endX = 0
 		
-		const doron = localStorage.getItem("doron") ?? "false";
-
 		if(!circlePos){
 			circlePos = {
 				x: this.slotPos.x + this.msToPos(circleMs - ms + this.controller.videoLatency, speed),
@@ -1678,14 +1676,12 @@
 				}else if(ms > endTime + this.controller.audioLatency){
 					circlePos.x = this.slotPos.x + this.msToPos(endTime - ms + this.controller.audioLatency, speed)
 				}
-				if (doron !== "true") {
-					ctx.drawImage(assets.image["balloon"],
-						circlePos.x + size - 4,
-						circlePos.y - h / 2 + 2,
-						h / 61 * 115,
-						h
-					)
-				}
+				ctx.drawImage(assets.image["balloon"],
+					circlePos.x + size - 4,
+					circlePos.y - h / 2 + 2,
+					h / 61 * 115,
+					h
+				)
 			}
 		}else if(type === "drumroll" || type === "daiDrumroll"){
 			fill = "#f3b500"
@@ -1699,20 +1695,17 @@
 			endX = this.msToPos(endTime - circleMs, speed)
 			drumroll = endX > 50 ? 2 : 1
 			
-			if (doron !== "true") {
-				ctx.fillStyle = fill
-				ctx.strokeStyle = "#000"
-				ctx.lineWidth = 3
-				ctx.beginPath()
-				ctx.moveTo(circlePos.x, circlePos.y - size + 1.5)
-				ctx.arc(circlePos.x + endX, circlePos.y, size - 1.5, Math.PI / -2, Math.PI / 2)
-				ctx.lineTo(circlePos.x, circlePos.y + size - 1.5)
-				ctx.fill()
-				ctx.stroke()
-			}
+			ctx.fillStyle = fill
+			ctx.strokeStyle = "#000"
+			ctx.lineWidth = 3
+			ctx.beginPath()
+			ctx.moveTo(circlePos.x, circlePos.y - size + 1.5)
+			ctx.arc(circlePos.x + endX, circlePos.y, size - 1.5, Math.PI / -2, Math.PI / 2)
+			ctx.lineTo(circlePos.x, circlePos.y + size - 1.5)
+			ctx.fill()
+			ctx.stroke()
 		}
-
-		if((!fade || fade < 1) && doron !== "true"){
+		if(!fade || fade < 1){
 			// Main circle
 			ctx.fillStyle = fill
 			ctx.beginPath()
@@ -1893,6 +1886,8 @@
 		
 		if(this.gogoTime){
 			this.assets.fireworks.forEach(fireworksAsset => {
+			    fireworksAsset.z-index=1
+			    fireworksAsset.position='absolute'
 				fireworksAsset.setAnimation("normal")
 				fireworksAsset.setAnimationStart(startMS)
 				var length = fireworksAsset.getAnimationLength("normal")