From d8e52b92949ec4a31686b7d592a120452d473cce Mon Sep 17 00:00:00 2001 From: "u0_ani-nya.com" <89579156+u0-ani-nya@users.noreply.github.com> Date: Mon, 16 Dec 2024 21:43:56 +0800 Subject: [PATCH 1/3] fix taiko mobile virtual taiko --- public/src/css/game.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/src/css/game.css b/public/src/css/game.css index faa56b5..82a4e5b 100644 --- a/public/src/css/game.css +++ b/public/src/css/game.css @@ -30,6 +30,8 @@ overflow: hidden; } #touch-drum-img{ + position: absolute; + z-index: 1; width: 100%; height: 100%; background-position: top; From 60be4b967e3d74927a9e2d25aa727b8528f3623d Mon Sep 17 00:00:00 2001 From: "u0_ani-nya.com" <89579156+u0-ani-nya@users.noreply.github.com> Date: Mon, 16 Dec 2024 21:50:45 +0800 Subject: [PATCH 2/3] add bg movie support detail https://www.ani-nya.com/wordpress/archives/468 --- public/src/js/controller.js | 25 +++++++++++++++--- public/src/js/loadsong.js | 28 +++++++++++++++++--- public/src/js/view.js | 51 +++++++++++++++++-------------------- 3 files changed, 68 insertions(+), 36 deletions(-) diff --git a/public/src/js/controller.js b/public/src/js/controller.js index 7482c25..3373236 100644 --- 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() diff --git a/public/src/js/loadsong.js b/public/src/js/loadsong.js index ec127e1..b793f49 100644 --- 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; + } + + } diff --git a/public/src/js/view.js b/public/src/js/view.js index 8d87e36..0f38a7d 100644 --- 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") From d23e63791d26180c267467637632bf71634fd036 Mon Sep 17 00:00:00 2001 From: "u0_ani-nya.com" <89579156+u0-ani-nya@users.noreply.github.com> Date: Mon, 16 Dec 2024 23:16:17 +0800 Subject: [PATCH 3/3] Update view.js --- public/src/js/view.js | 60 ++++++++++++++++++++++--------------------- 1 file changed, 31 insertions(+), 29 deletions(-) diff --git a/public/src/js/view.js b/public/src/js/view.js index 0f38a7d..ef0ba62 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -1877,35 +1877,37 @@ }) } } - toggleGogoTime(circle){ - var startMS = circle.ms + this.controller.audioLatency - this.gogoTime = circle.gogoTime - if(circle.gogoTime || this.gogoTimeStarted !== -Infinity){ - this.gogoTimeStarted = startMS - } - - 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") - fireworksAsset.setAnimationEnd(length, () => { - fireworksAsset.setAnimation(false) - }) - }) - this.assets.fire.setAnimation("normal") - var don = this.assets.don - don.setAnimation("gogostart") - var length = don.getAnimationLength("gogo") - don.setUpdateSpeed(4 / length) - var start = startMS - (startMS % this.beatInterval) - don.setAnimationStart(start) - var length = don.getAnimationLength("gogostart") - don.setAnimationEnd(length, don.normalAnimation) - } - } + toggleGogoTime(circle) { + var startMS = circle.ms + this.controller.audioLatency; + this.gogoTime = circle.gogoTime; + if (circle.gogoTime || this.gogoTimeStarted !== -Infinity) { + this.gogoTimeStarted = startMS; + } + + if (this.gogoTime) { + this.assets.fireworks.forEach(fireworksAsset => { + fireworksAsset.zIndex = 10; + fireworksAsset.setAnimation("normal"); + fireworksAsset.setAnimationStart(startMS); + var length = fireworksAsset.getAnimationLength("normal"); + fireworksAsset.setAnimationEnd(length, () => { + fireworksAsset.setAnimation(false); + }); + }); + + this.assets.fireworks.sort((a, b) => a.zIndex - b.zIndex); + + this.assets.fire.setAnimation("normal"); + var don = this.assets.don; + don.setAnimation("gogostart"); + var length = don.getAnimationLength("gogo"); + don.setUpdateSpeed(4 / length); + var start = startMS - (startMS % this.beatInterval); + don.setAnimationStart(start); + var length = don.getAnimationLength("gogostart"); + don.setAnimationEnd(length, don.normalAnimation); + } +} drawGogoTime(){ var ms = this.getMS()