add bg movie support
detail https://www.ani-nya.com/wordpress/archives/468
This commit is contained in:
@@ -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()
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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")
|
||||||
|
|||||||
Reference in New Issue
Block a user