black screen opening

n3xta · n3xta · commit 86b1755eecf0 · 2024-10-30T20:59:06.000-04:00
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
     <meta charset="utf-8" />
   </head>
   <body>
+    <div id="black-overlay"></div>
     <main id="canvas-container"></main>
     <script src="sketch.js"></script>
     <!-- <img id="overlay-image" src="lib/padding-reference.png" alt="Calibration Overlay"> -->
diff --git a/sketch.js b/sketch.js
@@ -3,13 +3,13 @@ let lyricDiv;
 let currentLyric = '';
 let lyrics = 
 [
-  {
-    "text": " ",
-    "beats": 24
-  },
+  // {
+  //   "text": " ",
+  //   "beats": 24
+  // },
   {
     "text": "黒塗り<br>世界宛て<br>書簡",
-    "beats": 32
+    "beats": 56
   },
   {
     "text": "██████",
@@ -24,7 +24,7 @@ let lyrics =
     "beats": 16
   },
   {
-    "text": "そしてクオリアを<br>持った████<br>として蘇り",
+    "text": "そしてクオリアを<br>持った████<br>として蘇り", //8+8
     "beats": 16
   },
   {
@@ -56,12 +56,8 @@ let lyrics =
     "beats": 2
   },
   {
-    "text": "█後2週間",
-    "beats": 4
-  },
-  {
-    "text": "█後2週間<br>███かけた<br>身体が目を覚まし",
-    "beats": 12
+    "text": "█後2週間<br>███かけた<br>身体が目を覚まし", //4+10
+    "beats": 14,
   },
   {
     "text": "液化したピアノと<br>夜を<br>明かす",
@@ -80,31 +76,31 @@ let lyrics =
     "beats": 16
   },
   {
-    "text": "█ぬも█むも<br>██いも<br>█くも愛す",
+    "text": "█ぬも█むも<br>██いも<br>█くも愛す", //每个都间隔2拍
     "beats": 8
   },
   {
-    "text": "█かれた<br>█違いの<br>██の詩",
+    "text": "█かれた<br>█違いの<br>██の詩", //每个都间隔2拍
     "beats": 8
   },
   {
-    "text": "██に<br>█き██され<br>█った言葉を",
+    "text": "██に<br>█き██され<br>█った言葉を", //每个都间隔2拍
     "beats": 8
   },
   {
-    "text": "██った<br>█れ者が<br>██してく",
+    "text": "██った<br>█れ者が<br>██してく", //每个都间隔2拍
     "beats": 8
   },
   {
-    "text": "██以外<br>█んで██った<br>██溜めで",
+    "text": "██以外<br>█んで██った<br>██溜めで", //每个都间隔2拍
     "beats": 8
   },
   {
-    "text": "██も██も<br>██も<br>伝えられなきゃ",
+    "text": "██も██も<br>██も<br>伝えられなきゃ", //每个都间隔2拍
     "beats": 8
   },
   {
-    "text": "█んでも<br>█んでも<br>██きれないから",
+    "text": "█んでも<br>█んでも<br>██きれないから", //每个都间隔2拍
     "beats": 8
   },
   {
@@ -129,6 +125,8 @@ let bpm = 185;
 let beatDuration = 60 / bpm;
 let totalBeatsElapsed = 0;
 
+let overlayRemoved = false; // 避免多次移除遮罩
+
 function setup() {
     audioEl = createAudio('https://raw.githubusercontent.com/n3xta/image-hosting/main/audio/letter_to_the_black_world.mp3');
     audioEl.showControls();
@@ -150,6 +148,12 @@ function updateLyrics() {
     let currentTime = audioEl.time();
     let totalBeats = Math.floor(currentTime / beatDuration);
 
+    if (totalBeats >= 23 && !overlayRemoved) { //考虑这边改一下时机
+      const overlay = document.getElementById('black-overlay');
+      overlay.remove();
+      overlayRemoved = true;
+    }
+
     let accumulatedBeats = 0;
         for (let i = 0; i < lyrics.length; i++) {
             accumulatedBeats += lyrics[i].beats;
@@ -160,7 +164,6 @@ function updateLyrics() {
         }
 }
 
-
 // function showLyric(lyric) {
 //   if (lyric !== currentLyric) {
 //     currentLyric = lyric;
diff --git a/style.css b/style.css
@@ -27,10 +27,12 @@ body, html {
 
 div {
   position: absolute;
-  top: 14.9vh;
+  /* top: 14.9vh; */
+  top: 7.6vw;
   left: 7vw;
   font-size: 9.43vw;
-  line-height: 22.2vh; /* or 165 px*/
+  /* line-height: 22.2vh; */
+  line-height: 11.25vw; /* or 165 px*/
   letter-spacing: -0.3vw;
   font-family: "Noto Sans JP", sans-serif;
   font-weight: 700;
@@ -72,3 +74,16 @@ span.block {
   color: transparent;
   font-size: 7.2vw;
 }
+
+#black-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  opacity: 1;
+  z-index: 50;
+  transition: opacity 1s ease;
+  pointer-events: none; /* 避免干扰点击事件 */
+}
