New stuff and fixes

ukriu · Sep 19, 2024 · d4355e7 · d4355e7
1 parent 41f5ff5
commit d4355e7
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 65 deletions.
diff --git a/game/index.html b/game/index.html
@@ -31,11 +31,12 @@
          <header>
             <h1>ukriu!spaceInvaders</h1>
          </header>
-         <h1>Score:<a class="results">0</a></h1>
+         <h1>Score: <a class="results">0</a></h1>
          <div class="grid"></div>
          <br>
-         <div class="controls"><button id="left">🠈</button><button id="up">🠉</button><button id="right">🠊</button></div>
-         <p>Use A, W/S, D or Left, Up, Right Arrow keys to move and shoot!</p>
+         <div class="controls"><a class="btn" id="left">&#x25C0;</a> <a class="btn" id="up">&#x25B2;</a> <a class="btn" id="right">&#x25B6;</a></div>
+         <br>
+         <p>Shoot: &#x25B2;, W, S, ArrowUp<br>Left: &#x25C0;, A, ArrowLeft<br>Right: &#x25B6;, D, ArrowRight</p>
          <p><a href="">Refresh Game</a><br><a href="/">Back to Code Insertion Page</a><br><br><a href="https://ukriu.com">Back to ukriu.com</a></p>
       </div>
       <script src="/res/script.js"></script>

diff --git a/index.html b/index.html
@@ -25,7 +25,7 @@
       <link rel="stylesheet" href="res/style.css">
       <link rel="stylesheet" href="https://ukriu.com/res/style.css">
       <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js" integrity="sha512-a+SUDuwNzXDvz4XrIcXHuCf089/iJAoN4lmrXJg18XnduKK6YlDHNRalv4yd1N40OKI80tFidF+rqTFKGPoWFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-      <script src="res/code-handler.js"></script>
+      <script src="./res/code-handler.js"></script>
    </head>
    <body>
       <div class="mainGame">
@@ -34,8 +34,8 @@ <h1>ukriu!spaceInvaders</h1>
          </header>
          <p>Either enter a Custom Game Code below or play the base game!</p>
          <br>
-         <a class="btn" href="game">Base Game</a><br><br>
-         <div id="codeArea"><input type="text" id="code-input" placeholder="Enter Custom Code"><button onclick="handleCode()">Enter</button></div>
+         <a class="btn" href="/game/index.html">Base Game</a><br><br>
+         <div id="codeArea"><input type="text" id="code-input" placeholder="Enter Custom Code"><a class="btn" onclick="handleCode()">Enter</a></div>
          <p id="error-message"></p>
          <br><a href="https://ukriu.com">Back to ukriu.com</a>
       </div>

diff --git a/res/code-handler.js b/res/code-handler.js
@@ -1,6 +1,7 @@
 const validCodes = {
-    c1907a5129538ea4eb47676ec4e28eae2583f599c1a4217432fe7151beccd512: "https://spaceinvaders.ukriu.com/game/index.html?invader=url(%27https://avatars.githubusercontent.com/u/87287585%27)&laser=url(https://avatars.githubusercontent.com/u/81536172)&shooter=url(https://avatars.githubusercontent.com/u/90866414)&boom=url(https://avatars.githubusercontent.com/u/70831061)",
-    f1c086afae631d4854443006f07053152d2a0e7fde717f00f59924ef7912fd98: "https://archive.ukriu.com/v0/soon/"
+    "c1907a5129538ea4eb47676ec4e28eae2583f599c1a4217432fe7151beccd512": "https://spaceinvaders.ukriu.com/game/index.html?invader=url(%27https://avatars.githubusercontent.com/u/87287585%27)&laser=url(https://avatars.githubusercontent.com/u/81536172)&shooter=url(https://avatars.githubusercontent.com/u/90866414)&boom=url(https://avatars.githubusercontent.com/u/70831061)",
+    "f1c086afae631d4854443006f07053152d2a0e7fde717f00f59924ef7912fd98": "https://archive.ukriu.com/v0/soon/",
+    "9a1165199664150a440f861b70bf4f339639acc09abed68dd1d53d5f3e1f82b1": "https://spaceinvaders.ukriu.com/game/index.html?invader=url(https://avatars.githubusercontent.com/u/72394012)&laser=url(https://cdn.discordapp.com/avatars/530953496023924736/16f5f939f1af7b6d401a95de12285847.webp)&shooter=url(https://avatars.githubusercontent.com/u/74854681)&boom=url(https://cdn.discordapp.com/avatars/719224227936469107/25be2a51d1f105ec6146ce741c5cd21c.webp)",
 };
 
 function handleCode() {

diff --git a/res/script.js b/res/script.js
@@ -3,79 +3,163 @@ const grid = document.querySelector(".grid"),
 let currentShooterIndex = 202;
 const width = 15,
     aliensRemoved = [];
-let invadersId, isGoingRight = !0,
+let invadersId, isGoingRight = true,
     direction = 1,
     results = 0;
+
 for (let i = 0; i < 225; i++) {
-    let e = document.createElement("div");
-    grid.appendChild(e)
+    let cell = document.createElement("div");
+    let view = document.createElement("div");
+    view.classList.add("view");
+    cell.appendChild(view);
+    grid.appendChild(cell);
 }
-const squares = Array.from(document.querySelectorAll(".grid div")),
+
+const squares = Array.from(document.querySelectorAll(".grid > div")),
     alienInvaders = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39];
 
 function draw() {
-    for (let e = 0; e < alienInvaders.length; e++) aliensRemoved.includes(e) || squares[alienInvaders[e]].classList.add("invader")
+    for (let i = 0; i < alienInvaders.length; i++) {
+        if (!aliensRemoved.includes(i)) {
+            squares[alienInvaders[i]].classList.add("invader");
+        }
+    }
 }
 
 function remove() {
-    for (let e = 0; e < alienInvaders.length; e++) squares[alienInvaders[e]].classList.remove("invader")
+    for (let i = 0; i < alienInvaders.length; i++) {
+        squares[alienInvaders[i]].classList.remove("invader");
+    }
 }
 
 function moveShooter(e) {
-    switch (squares[currentShooterIndex].classList.remove("shooter"), e.key) {
+    squares[currentShooterIndex].classList.remove("shooter");
+    switch (e.key) {
         case "ArrowLeft":
         case "a":
-            currentShooterIndex % 15 != 0 && (currentShooterIndex -= 1);
+            if (currentShooterIndex % width !== 0) currentShooterIndex -= 1;
             break;
         case "ArrowRight":
         case "d":
-            currentShooterIndex % 15 < 14 && (currentShooterIndex += 1)
+            if (currentShooterIndex % width < width - 1) currentShooterIndex += 1;
+            break;
     }
-    squares[currentShooterIndex].classList.add("shooter")
+    squares[currentShooterIndex].classList.add("shooter");
 }
 
 function moveInvaders() {
-    let e = alienInvaders[0] % 15 == 0,
-        r = alienInvaders[alienInvaders.length - 1] % 15 == 14;
-    if (remove(), r && isGoingRight)
-        for (let s = 0; s < alienInvaders.length; s++) alienInvaders[s] += 16, direction = -1, isGoingRight = !1;
-    if (e && !isGoingRight)
-        for (let n = 0; n < alienInvaders.length; n++) alienInvaders[n] += 14, direction = 1, isGoingRight = !0;
-    for (let t = 0; t < alienInvaders.length; t++) alienInvaders[t] += direction;
-    draw(), squares[currentShooterIndex].classList.contains("invader") && (resultDisplay.innerHTML = "GAME OVER", clearInterval(invadersId)), aliensRemoved.length === alienInvaders.length && (resultDisplay.innerHTML = "YOU WIN", clearInterval(invadersId))
+    const leftEdge = alienInvaders[0] % width === 0;
+    const rightEdge = alienInvaders[alienInvaders.length - 1] % width === width - 1;
+    remove();
+
+    if (rightEdge && isGoingRight) {
+        for (let i = 0; i < alienInvaders.length; i++) alienInvaders[i] += width + 1;
+        direction = -1;
+        isGoingRight = false;
+    }
+
+    if (leftEdge && !isGoingRight) {
+        for (let i = 0; i < alienInvaders.length; i++) alienInvaders[i] += width - 1;
+        direction = 1;
+        isGoingRight = true;
+    }
+
+    for (let i = 0; i < alienInvaders.length; i++) alienInvaders[i] += direction;
+    draw();
+
+    if (squares[currentShooterIndex].classList.contains("invader")) {
+        resultDisplay.innerHTML = `${results}<br>YOU LOSE`;
+        clearInterval(invadersId);
+        lockInputs();
+    }
+    if (aliensRemoved.length === alienInvaders.length) {
+        resultDisplay.innerHTML = `${results}<br>YOU WIN`;
+        clearInterval(invadersId);
+        lockInputs();
+    }
 }
 
 function shoot(e) {
-    let r, s = currentShooterIndex;
-    ("ArrowUp" === e.key || "w" === e.key || "s" === e.key) && (r = setInterval(function e() {
-        if (s >= 15) {
-            if (squares[s].classList.remove("laser"), (s -= 15) >= 0 && squares[s].classList.add("laser"), squares[s].classList.contains("invader")) {
-                squares[s].classList.remove("laser"), squares[s].classList.remove("invader"), squares[s].classList.add("boom"), setTimeout(() => squares[s].classList.remove("boom"), 300), clearInterval(r);
-                let n = alienInvaders.indexOf(s);
-                aliensRemoved.push(n), results++, resultDisplay.innerHTML = results
+    let laserId, currentLaserIndex = currentShooterIndex;
+    if (e.key === "ArrowUp" || e.key === "w" || e.key === " ") {
+        laserId = setInterval(() => {
+            squares[currentLaserIndex].classList.remove("laser");
+            currentLaserIndex -= width;
+            if (currentLaserIndex < 0) {
+                clearInterval(laserId);
+                return;
+            }
+            squares[currentLaserIndex].classList.add("laser");
+
+            if (squares[currentLaserIndex].classList.contains("invader")) {
+                squares[currentLaserIndex].classList.remove("laser");
+                squares[currentLaserIndex].classList.remove("invader");
+                squares[currentLaserIndex].classList.add("boom");
+
+                setTimeout(() => squares[currentLaserIndex].classList.remove("boom"), 300);
+                clearInterval(laserId);
+
+                const alienRemoved = alienInvaders.indexOf(currentLaserIndex);
+                aliensRemoved.push(alienRemoved);
+                results++;
+                resultDisplay.innerHTML = results;
             }
-        } else clearInterval(r), s >= 0 && squares[s].classList.remove("laser")
-    }, 100))
+        }, 100);
+    }
+}
+
+function lockInputs() {
+    document.removeEventListener("keydown", handleKeydown);
+    document.getElementById("left").removeEventListener("click", handleLeftButton);
+    document.getElementById("right").removeEventListener("click", handleRightButton);
+    document.getElementById("up").removeEventListener("click", handleUpButton);
+}
+
+function handleKeydown(e) {
+    moveShooter(e);
+    shoot(e);
+}
+
+function handleLeftButton() {
+    moveShooter({ key: "ArrowLeft" });
+}
+
+function handleRightButton() {
+    moveShooter({ key: "ArrowRight" });
 }
-draw(), squares[currentShooterIndex].classList.add("shooter"), document.addEventListener("keydown", moveShooter), invadersId = setInterval(moveInvaders, 600), document.addEventListener("keydown", shoot), document.getElementById("left").addEventListener("click", () => moveShooter({
-    key: "ArrowLeft"
-})), document.getElementById("right").addEventListener("click", () => moveShooter({
-    key: "ArrowRight"
-})), document.getElementById("up").addEventListener("click", () => shoot({
-    key: "ArrowUp"
-})), document.addEventListener("DOMContentLoaded", () => {
-    function e(e) {
-        let r = new URLSearchParams(new URL(e).search),
-            s = {};
-        return r.forEach((e, r) => {
-            r && e && (s[`--${r}-bg`] = e)
-        }), s
+
+function handleUpButton() {
+    shoot({ key: "ArrowUp" });
+}
+
+draw();
+squares[currentShooterIndex].classList.add("shooter");
+
+document.addEventListener("keydown", handleKeydown);
+document.getElementById("left").addEventListener("click", handleLeftButton);
+document.getElementById("right").addEventListener("click", handleRightButton);
+document.getElementById("up").addEventListener("click", handleUpButton);
+
+invadersId = setInterval(moveInvaders, 600);
+
+document.addEventListener("DOMContentLoaded", () => {
+    function parseQueryParams(url) {
+        let params = new URLSearchParams(new URL(url).search);
+        let styleVars = {};
+        params.forEach((value, key) => {
+            if (key && value) {
+                styleVars[`--${key}-bg`] = value;
+            }
+        });
+        return styleVars;
     }
 
-    function r(e) {
-        let r = document.createElement("style");
-        r.textContent = `:root { ${Object.entries(e).map(([e,r])=>`${e}: ${r};`).join(" ")} }`, document.head.appendChild(r)
+    function applyStyles(styleVars) {
+        let styleElement = document.createElement("style");
+        styleElement.textContent = `:root { ${Object.entries(styleVars).map(([key, value]) => `${key}: ${value};`).join(" ")} }`;
+        document.head.appendChild(styleElement);
     }
-    let s = e(window.location.href);
-    r(s)
+
+    let styleVars = parseQueryParams(window.location.href);
+    applyStyles(styleVars);
 });
diff --git a/res/style.css b/res/style.css
@@ -5,44 +5,60 @@
 
 :root {
 	--invader-bg: purple;
-	--shooter-bg: green;
-	--laser-bg: orange;
+	--shooter-bg: lavenderblush;
+	--laser-bg: firebrick;
 	--boom-bg: crimson;
 }
-
-.invader {
+.view {
+  height: 100%;
+  width: 100%;
+}
+.invader > .view {
   background: var(--invader-bg);
   background-size: cover;
   background-position: center;
   border-radius: 10px;
+  outline: 0.4px solid purple;
+  height: 93%;
+  width: 93%;
 }
 
-.shooter {
+.shooter > .view{
   background: var(--shooter-bg);
   background-size: cover;
   background-position: center;
+  height: 94%;
+  width: 94%;
+  outline: 0.5px solid lavenderblush;
+  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 }
 
-.laser {
+.laser > .view {
   background: var(--laser-bg);
   background-size: cover;
   background-position: center;
-  outline: 1px solid orange;
+  outline: 0.5px solid orange;
+  width: 58%;
+  height: 94%;
+  border-radius: 8px;
 }
 
-.boom {
+.boom > .view {
   background: var(--boom-bg);
   background-size: cover;
   background-position: center;
-  outline: 1px solid crimson;
+  outline: 0.7px solid crimson;
+  height: 94%;
+  width: 94%;
+  border-radius: 8px;
 }
 
-button,
 a.btn {
   padding: 16px;
   border: 1px dotted violet;
   background: none;
-  color: white;
+  color: lavenderblush;
+  user-select: none;
 }
 
 input {
@@ -66,9 +82,12 @@ input {
   margin-top: 20px;
 }
 
-.grid div {
+.grid > div {
   width: 20px;
   height: 20px;
+  display: grid;
+  place-items: center;
+  position: realitive;
 }
 
 .mainGame {