add bg movie support

detail  https://www.ani-nya.com/wordpress/archives/468
This commit is contained in:
u0_ani-nya.com
2024-12-16 21:50:45 +08:00
committed by GitHub
parent d8e52b9294
commit 60be4b967e
3 changed files with 68 additions and 36 deletions

View File

@@ -83,9 +83,6 @@ class Controller{
this.game = new Game(this, this.selectedSong, this.parsedSongData) this.game = new Game(this, this.selectedSong, this.parsedSongData)
this.view = new View(this) this.view = new View(this)
if (parseFloat(localStorage.getItem("baisoku") ?? "1", 10) !== 1) {
this.saveScore = false;
}
this.mekadon = new Mekadon(this, this.game) this.mekadon = new Mekadon(this, this.game)
this.keyboard = new GameInput(this) this.keyboard = new GameInput(this)
if(!autoPlayEnabled && this.multiplayer !== 2){ if(!autoPlayEnabled && this.multiplayer !== 2){
@@ -123,6 +120,7 @@ class Controller{
} }
startMainLoop(){ startMainLoop(){
this.mainLoopRunning = true this.mainLoopRunning = true
window.gamestatus = 'start'
this.gameLoop() this.gameLoop()
this.viewLoop() this.viewLoop()
if(this.multiplayer !== 2){ if(this.multiplayer !== 2){
@@ -137,6 +135,20 @@ class Controller{
} }
stopMainLoop(){ stopMainLoop(){
this.mainLoopRunning = false this.mainLoopRunning = false
window.gamestatus = 'stop'
if (window.videoElement) {
// 停止视频播放
window.videoElement.pause();
// 移除视频元素
document.body.removeChild(window.videoElement);
// 解除引用,允许垃圾回收
window.videoElement = null;
}
if(this.game.mainAsset){ if(this.game.mainAsset){
this.game.mainAsset.stop() this.game.mainAsset.stop()
} }
@@ -266,7 +278,7 @@ class Controller{
var chartDiff = this.selectedSong.difficulty var chartDiff = this.selectedSong.difficulty
chart = chart[chartDiff] 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") this.songData = data.replace(/\0/g, "").split("\n")
return Promise.resolve() return Promise.resolve()
}), chart.url) }), chart.url)
@@ -276,6 +288,9 @@ class Controller{
songObj.lyricsData = result songObj.lyricsData = result
}, () => Promise.resolve()), songObj.lyricsFile.url) }, () => Promise.resolve()), songObj.lyricsFile.url)
} }
if(songObj && songObj.category_id === 9){
LoadSong.insertBackgroundVideo(songObj.id)
}
Promise.all(promises).then(resolve) Promise.all(promises).then(resolve)
} }
}).then(() => { }).then(() => {
@@ -325,6 +340,8 @@ class Controller{
this.syncWith.game.togglePause(forcePause, pauseMove, noSound) this.syncWith.game.togglePause(forcePause, pauseMove, noSound)
} }
this.game.togglePause(forcePause, pauseMove, noSound) this.game.togglePause(forcePause, pauseMove, noSound)
} }
getKeys(){ getKeys(){
return this.keyboard.getKeys() return this.keyboard.getKeys()

View File

@@ -59,11 +59,12 @@ class LoadSong{
} }
} }
this.songObj = songObj this.songObj = songObj
song.songBg = this.randInt(1, 5) song.songBg = this.randInt(1, 5)
song.songStage = this.randInt(1, 3) song.songStage = this.randInt(1, 3)
song.donBg = this.randInt(1, 6) 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){ if(song.songSkin && song.songSkin.name){
var imgLoad = [] var imgLoad = []
for(var type in song.songSkin){ for(var type in song.songSkin){
@@ -134,7 +135,7 @@ class LoadSong{
chart = chart[chartDiff] chart = chart[chartDiff]
} }
if(chart){ 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") this.songData = data.replace(/\0/g, "").split("\n")
}), chart.url) }), chart.url)
}else{ }else{
@@ -308,7 +309,7 @@ class LoadSong{
if(song.type === "tja" || !chart || !chart.separateDiff || !chart[chartDiff]){ if(song.type === "tja" || !chart || !chart.separateDiff || !chart[chartDiff]){
this.startMultiplayer() this.startMultiplayer()
}else{ }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") this.song2Data = data.replace(/\0/g, "").split("\n")
}, () => {}).then(() => { }, () => {}).then(() => {
this.startMultiplayer() this.startMultiplayer()
@@ -368,10 +369,29 @@ class LoadSong{
clean(){ clean(){
delete this.promises delete this.promises
delete this.songObj delete this.songObj
delete this.videoElement
pageEvents.remove(p2, "message") pageEvents.remove(p2, "message")
if(this.cancelButton){ if(this.cancelButton){
pageEvents.remove(this.cancelButton, ["mousedown", "touchstart"]) pageEvents.remove(this.cancelButton, ["mousedown", "touchstart"])
delete this.cancelButton 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;
}
} }

View File

@@ -1487,11 +1487,11 @@
var measureH = 130 * mul var measureH = 130 * mul
measures.forEach(measure => { 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 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){ 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.strokeStyle = measure.branchFirst ? "#ff0" : "#bdbdbd"
this.ctx.lineWidth = 3 this.ctx.lineWidth = 3
this.ctx.beginPath() this.ctx.beginPath()
@@ -1537,7 +1537,7 @@
for(var i = circles.length; i--;){ for(var i = circles.length; i--;){
var circle = circles[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 timeForDistance = this.posToMs(distanceForCircle + this.slotPos.size / 2, speed)
var startingTime = circle.ms - timeForDistance + this.controller.videoLatency var startingTime = circle.ms - timeForDistance + this.controller.videoLatency
@@ -1626,13 +1626,11 @@
var circleMs = circle.ms var circleMs = circle.ms
var endTime = circle.endTime var endTime = circle.endTime
var animated = circle.animating var animated = circle.animating
var speed = circle.speed * parseFloat(localStorage.getItem("baisoku") ?? "1", 10) var speed = circle.speed
var played = circle.isPlayed var played = circle.isPlayed
var drumroll = 0 var drumroll = 0
var endX = 0 var endX = 0
const doron = localStorage.getItem("doron") ?? "false";
if(!circlePos){ if(!circlePos){
circlePos = { circlePos = {
x: this.slotPos.x + this.msToPos(circleMs - ms + this.controller.videoLatency, speed), x: this.slotPos.x + this.msToPos(circleMs - ms + this.controller.videoLatency, speed),
@@ -1678,14 +1676,12 @@
}else if(ms > endTime + this.controller.audioLatency){ }else if(ms > endTime + this.controller.audioLatency){
circlePos.x = this.slotPos.x + this.msToPos(endTime - ms + this.controller.audioLatency, speed) circlePos.x = this.slotPos.x + this.msToPos(endTime - ms + this.controller.audioLatency, speed)
} }
if (doron !== "true") { ctx.drawImage(assets.image["balloon"],
ctx.drawImage(assets.image["balloon"], circlePos.x + size - 4,
circlePos.x + size - 4, circlePos.y - h / 2 + 2,
circlePos.y - h / 2 + 2, h / 61 * 115,
h / 61 * 115, h
h )
)
}
} }
}else if(type === "drumroll" || type === "daiDrumroll"){ }else if(type === "drumroll" || type === "daiDrumroll"){
fill = "#f3b500" fill = "#f3b500"
@@ -1699,20 +1695,17 @@
endX = this.msToPos(endTime - circleMs, speed) endX = this.msToPos(endTime - circleMs, speed)
drumroll = endX > 50 ? 2 : 1 drumroll = endX > 50 ? 2 : 1
if (doron !== "true") { ctx.fillStyle = fill
ctx.fillStyle = fill ctx.strokeStyle = "#000"
ctx.strokeStyle = "#000" ctx.lineWidth = 3
ctx.lineWidth = 3 ctx.beginPath()
ctx.beginPath() ctx.moveTo(circlePos.x, circlePos.y - size + 1.5)
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.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.lineTo(circlePos.x, circlePos.y + size - 1.5) ctx.fill()
ctx.fill() ctx.stroke()
ctx.stroke()
}
} }
if(!fade || fade < 1){
if((!fade || fade < 1) && doron !== "true"){
// Main circle // Main circle
ctx.fillStyle = fill ctx.fillStyle = fill
ctx.beginPath() ctx.beginPath()
@@ -1893,6 +1886,8 @@
if(this.gogoTime){ if(this.gogoTime){
this.assets.fireworks.forEach(fireworksAsset => { this.assets.fireworks.forEach(fireworksAsset => {
fireworksAsset.z-index=1
fireworksAsset.position='absolute'
fireworksAsset.setAnimation("normal") fireworksAsset.setAnimation("normal")
fireworksAsset.setAnimationStart(startMS) fireworksAsset.setAnimationStart(startMS)
var length = fireworksAsset.getAnimationLength("normal") var length = fireworksAsset.getAnimationLength("normal")