Skip to content

Commit ffa71fc

Browse files
CHCAT1320CHCAT1320
committed
更新
1 parent 714ac71 commit ffa71fc

File tree

4 files changed

+287
-0
lines changed

4 files changed

+287
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# CHCAT_Phi

‎index.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-cn">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CHCAT'Phi</title>
7+
<style>
8+
#PlaybackWindow {
9+
position: relative;
10+
width: 720px;
11+
height: 540px;
12+
border: 1px solid black;
13+
background-color: darkgrey;
14+
margin: 20px auto;
15+
z-index: -999999;
16+
overflow: hidden;
17+
}
18+
.line {
19+
position: absolute;
20+
top: 50%;
21+
width: 2160px;
22+
height: 5px;
23+
background-color: white;
24+
text-align: center;
25+
}
26+
</style>
27+
</head>
28+
<body style="background-color: azure;">
29+
<div id="body">
30+
导入谱面<input type="file" onchange="ChartFiles(this.files)">
31+
导入音乐<input type="file" onchange="bgm(this.files)">
32+
<audio id="audio" src=""></audio>
33+
<button type="button" onclick="StartPlay()">开始</button>
34+
<div id="PlaybackWindow">
35+
<div id="chartTime">谱面时间：-114514.191</div>
36+
<!-- <div id="line"></div> -->
37+
<div style="z-index: 9999999999;position: absolute;top: 95%;">code by CHCAT1320</div>
38+
</div>
39+
</div>
40+
<script src="js.js"></script>
41+
</body>
42+
</html>

‎js.js

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
var lineList;
2+
var lineNumber;
3+
let formattedDuration = 0;
4+
5+
// 读取判定线JSON
6+
function ChartFiles(files) {
7+
// 获取文件
8+
var file = files[0];
9+
10+
// 创建FileReader对象
11+
var reader = new FileReader();
12+
13+
// 文件读取完毕
14+
reader.onload = function(e) {
15+
// 解析JSON
16+
try {
17+
var json = JSON.parse(e.target.result);
18+
// console.log(json.judgeLineList);
19+
// console.log(json.judgeLineList.length)
20+
lineList = json.judgeLineList;
21+
lineNumber = lineList.length;
22+
console.log(lineList);
23+
console.log(lineNumber);
24+
} catch (error) {
25+
console.error("?", error);
26+
}
27+
};
28+
29+
// 读取文件内容
30+
reader.readAsText(file);
31+
}
32+
function bgm(files) {
33+
var file = files[0];
34+
var reader = new FileReader();
35+
reader.onload = function(e) {
36+
try {
37+
var audio = document.getElementById("audio")
38+
audio.src = URL.createObjectURL(file);
39+
} catch (error) {
40+
console.error("?", error);
41+
}
42+
};
43+
reader.readAsText(file);
44+
}
45+
46+
function BpmToTime(time, bpm) {
47+
return (time / bpm) * 1.875;
48+
}
49+
50+
function LinearInterpolation(s, e, sT, eT, NowTime) {
51+
return s + (e - s) * ((NowTime - sT) / (eT - sT));
52+
}
53+
54+
class Lines {
55+
constructor() {
56+
this.linesData = {}; // 创建一个对象来存储每条线的数据
57+
}
58+
59+
CreateLine() {
60+
var PlaybackWindow = document.getElementById("PlaybackWindow");
61+
for (var i = 0; i < lineNumber; i++) {
62+
var newLine = document.createElement('div');
63+
newLine.className = 'line';
64+
newLine.innerHTML = i;
65+
newLine.id = 'line' + i;
66+
PlaybackWindow.appendChild(newLine);
67+
68+
this.linesData[i] = {
69+
index: i,
70+
element: newLine,
71+
bpm: lineList[i].bpm,
72+
lineMoveEventsList: lineList[i].judgeLineMoveEvents,
73+
lineMoveEventsValueList: Object.values(lineList[i].judgeLineMoveEvents[0]) || [],
74+
LineMoveNumber: 0,
75+
LineX: 0,
76+
LineY: 0,
77+
lineRotateEventsList: lineList[i].judgeLineRotateEvents,
78+
lineRotateEventsValueList: Object.values(lineList[i].judgeLineRotateEvents[0]) || [],
79+
LineRotateumber: 0,
80+
LineR: 0,
81+
lineDisappearEventsList: lineList[i].judgeLineDisappearEvents,
82+
lineDisappearEventsValueList: Object.values(lineList[i].judgeLineDisappearEvents[0]) || [],
83+
LineDisappearumber: 0,
84+
LineD: 0,
85+
};
86+
}
87+
}
88+
89+
GetLineMove() {
90+
for (let i = 0; i < lineNumber; i++) {
91+
let lineData = this.linesData[i];
92+
if (formattedDuration > BpmToTime(lineData.lineMoveEventsValueList[1], lineData.bpm)) {
93+
lineData.LineX = 0-(lineData.lineMoveEventsValueList[3] - 0.5) * 720;
94+
lineData.LineY = 0-(lineData.lineMoveEventsValueList[5] - 0.5) * 540;
95+
lineData.LineMoveNumber += 1;
96+
lineData.lineMoveEventsValueList = Object.values(lineData.lineMoveEventsList[lineData.LineMoveNumber]) || [];
97+
//lineData.element.style.transform = 'translate(' + lineData.LineX + 'px,' + lineData.LineY + 'px)';
98+
//console.log(lineData.LineX + "?" + lineData.LineY)
99+
} else if (formattedDuration > BpmToTime(lineData.lineMoveEventsValueList[0], lineData.bpm)) {
100+
lineData.LineX = 0-LinearInterpolation(
101+
(lineData.lineMoveEventsValueList[2] - 0.5) * 720,
102+
(lineData.lineMoveEventsValueList[3] - 0.5) * 720,
103+
BpmToTime(lineData.lineMoveEventsValueList[0], lineData.bpm),
104+
BpmToTime(lineData.lineMoveEventsValueList[1], lineData.bpm),
105+
formattedDuration
106+
);
107+
lineData.LineY = 0-LinearInterpolation(
108+
(lineData.lineMoveEventsValueList[4] - 0.5) * 540,
109+
(lineData.lineMoveEventsValueList[5] - 0.5) * 540,
110+
BpmToTime(lineData.lineMoveEventsValueList[0], lineData.bpm),
111+
BpmToTime(lineData.lineMoveEventsValueList[1], lineData.bpm),
112+
formattedDuration
113+
);
114+
//lineData.element.style.transform = 'translate(' + lineData.LineX + 'px,' + lineData.LineY + 'px)';
115+
//console.log(lineData.LineX + "?" + lineData.LineY)
116+
}
117+
}
118+
}
119+
120+
GetLineRotate() {
121+
for (let i = 0; i < lineNumber; i++) {
122+
let lineData = this.linesData[i];
123+
//console.log(lineData.lineRotateEventsList);
124+
//if (lineData.lineRotateEventsList && lineData.lineRotateEventsList.length > lineData.LineRotateumber) {
125+
if (formattedDuration > BpmToTime(lineData.lineRotateEventsValueList[1], lineData.bpm)) {
126+
lineData.LineR = lineData.lineRotateEventsValueList[3];
127+
lineData.LineRotateumber += 1;
128+
lineData.lineRotateEventsValueList = Object.values(lineData.lineRotateEventsList[lineData.LineRotateumber]) || [];
129+
//lineData.element.style.transform = 'rotate(' + lineData.LineR + 'deg)';
130+
//console.log('Rotate to ' + lineData.LineR + ' degrees');
131+
} else if (formattedDuration > BpmToTime(lineData.lineRotateEventsValueList[0], lineData.bpm)) {
132+
lineData.LineR = LinearInterpolation(
133+
lineData.lineRotateEventsValueList[2],
134+
lineData.lineRotateEventsValueList[3],
135+
BpmToTime(lineData.lineRotateEventsValueList[0], lineData.bpm),
136+
BpmToTime(lineData.lineRotateEventsValueList[1], lineData.bpm),
137+
formattedDuration
138+
);
139+
//lineData.element.style.transform = 'rotate(' + lineData.LineR + 'deg)';
140+
//console.log('Current rotation is ' + lineData.LineR + ' degrees');
141+
}
142+
//}
143+
}
144+
}
145+
GetLineDisappear() {
146+
for (let i = 0; i < lineNumber; i++) {
147+
let lineData = this.linesData[i];
148+
if (lineData.lineDisappearEventsList && lineData.lineDisappearEventsList.length > lineData.LineDisappearumber) {
149+
if (formattedDuration > BpmToTime(lineData.lineDisappearEventsValueList[1], lineData.bpm)) {
150+
lineData.LineD = lineData.lineDisappearEventsValueList[3];
151+
lineData.LineDisappearumber += 1;
152+
lineData.lineDisappearEventsValueList = Object.values(lineData.lineDisappearEventsList[lineData.LineDisappearumber]) || [];
153+
} else if (formattedDuration > BpmToTime(lineData.lineDisappearEventsValueList[0], lineData.bpm)) {
154+
lineData.LineD = LinearInterpolation(
155+
lineData.lineDisappearEventsValueList[2],
156+
lineData.lineDisappearEventsValueList[3],
157+
BpmToTime(lineData.lineDisappearEventsValueList[0], lineData.bpm),
158+
BpmToTime(lineData.lineDisappearEventsValueList[1], lineData.bpm),
159+
formattedDuration
160+
);
161+
}
162+
}
163+
}
164+
}
165+
UpdateLine(){
166+
for (let i = 0; i < lineNumber; i++) {
167+
let lineData = this.linesData[i];
168+
lineData.LineX -=720
169+
lineData.element.style.transform = 'translate(' + lineData.LineX + 'px,' + lineData.LineY + 'px) rotate(' + lineData.LineR + 'deg) ';
170+
lineData.element.style.opacity = lineData.LineD;
171+
lineData.element.style.width = "2160px";
172+
}
173+
}
174+
}
175+
class Note{
176+
constructor() {
177+
this.AllNoteData = {};
178+
}
179+
CreateUpNote() {
180+
for (var i = 0; i < lineNumber; i++) {
181+
for (var a = 0; a < lineList[i].notesAbove.length; a++){
182+
//console.log(lineList[i].notesAbove)
183+
}
184+
// var newNote = document.createElement('div');
185+
// newNote.className = 'line';
186+
// newNote.innerHTML = i;
187+
// newNote.id = 'line' + i;
188+
// PlaybackWindow.appendChild(newNote);
189+
190+
// this.AllNoteData[i] = {
191+
// index: i,
192+
// element: newLine,
193+
// bpm: lineList[i].bpm,
194+
// lineMoveEventsList: lineList[i].judgeLineMoveEvents,
195+
// lineMoveEventsValueList: Object.values(lineList[i].judgeLineMoveEvents[0]) || [],
196+
// LineMoveNumber: 0,
197+
// LineX: 0,
198+
// LineY: 0,
199+
// lineRotateEventsList: lineList[i].judgeLineRotateEvents,
200+
// lineRotateEventsValueList: Object.values(lineList[i].judgeLineRotateEvents[0]) || [],
201+
// LineRotateumber: 0,
202+
// LineR: 0,
203+
// lineDisappearEventsList: lineList[i].judgeLineDisappearEvents,
204+
// lineDisappearEventsValueList: Object.values(lineList[i].judgeLineDisappearEvents[0]) || [],
205+
// LineDisappearumber: 0,
206+
// LineD: 0,
207+
// };
208+
}
209+
}
210+
}
211+
212+
let startTime = 0
213+
let endTime = 0
214+
215+
function StartPlay() {
216+
let linesInstance = new Lines();
217+
linesInstance.CreateLine();
218+
let notesInstance = new Note();
219+
notesInstance.CreateUpNote();
220+
221+
var audio = document.getElementById("audio")
222+
audio.play()
223+
let AudioIntervalId = setInterval(function () {
224+
if (audio.currentTime > 0) {
225+
startTime = performance.now();
226+
clearInterval(AudioIntervalId)
227+
}
228+
},1)
229+
230+
let intervalId = setInterval(function () {
231+
if (audio.currentTime > 0) {
232+
linesInstance.GetLineMove();
233+
linesInstance.GetLineRotate();
234+
linesInstance.GetLineDisappear();
235+
linesInstance.UpdateLine();
236+
endTime = performance.now();
237+
let duration = endTime - startTime;
238+
formattedDuration = (duration / 1000).toFixed(3);
239+
document.getElementById("chartTime").innerHTML = `谱面时间：${formattedDuration}s`;
240+
}
241+
242+
}, 1);
243+
244+
}

‎line.png

225 Bytes
Loading

0 commit comments

Comments
 (0)