新增: 將以前做到一半的小遊戲放進來

ykyyykk · Oct 17, 2024 · 79f638c · 79f638c
1 parent 6b1bcf7
commit 79f638c
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 0 deletions.
diff --git a/js/libs.js b/js/libs.js
@@ -27,6 +27,7 @@ loadCSS(
   "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
 );
 
+// Swiper
 // <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
 // <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 

diff --git a/src/test/minigame2.html b/src/test/minigame2.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="css/test.css" />
+    <!-- 匯入jquery -->
+    <script
+      src="https://code.jquery.com/jquery-3.7.1.js"
+      integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
+      crossorigin="anonymous"
+    ></script>
+    <script src="
+    https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="css/minigame2.css" />
+    <script src="js/minigame2.js"></script>
+  </head>
+  <body>
+    <div id="player" class="text-bg-primary">player</div>
+    <div id="boss" class="text-bg-danger">boss</div>
+  </body>
+</html>
diff --git a/src/test/minigame2.js b/src/test/minigame2.js
@@ -0,0 +1,121 @@
+var horizontal = 0;
+var vertical = 0;
+var speed = 10;
+var keys = {};
+var playerPosition = { x: 0, y: 0 };
+var projectiles = [];
+var projectileIndex = 0;
+var shootDirection = "right";
+var windowWidth = 0;
+var windowHeight = 0;
+
+$(document).ready(() => {
+  windowWidth = document.documentElement.clientWidth;
+  windowHeight = document.documentElement.clientHeight;
+  window.addEventListener("keydown", (e) => {
+    keys[e.key] = true; // Mark the key as pressed
+  });
+
+  window.addEventListener("keyup", (e) => {
+    keys[e.key] = false; // Mark the key as released
+  });
+
+  setInterval(() => {
+    getInput();
+    updatePlayerPosition();
+    movemPosition();
+  }, 100);
+});
+
+function getInput() {
+  if (keys["a"]) {
+    shootDirection = "left";
+    horizontal -= speed;
+  }
+  if (keys["d"]) {
+    shootDirection = "right";
+    horizontal += speed;
+  }
+  if (keys["w"]) {
+    vertical -= speed;
+  }
+  if (keys["s"]) {
+    vertical += speed;
+  }
+  // 這是空白鍵
+  if (keys[" "]) {
+    spawnProjectile();
+  }
+  horizontal = Clamp(horizontal, 0, windowWidth);
+  vertical = Clamp(vertical, 0, windowHeight);
+}
+
+function Clamp(num, min, max) {
+  return Math.min(Math.max(num, min), max);
+}
+
+function movemPosition() {
+  anime({
+    targets: "#player",
+    translateX: horizontal,
+    translateY: vertical,
+  });
+}
+
+function updatePlayerPosition() {
+  playerPosition.x = horizontal;
+  playerPosition.y = vertical;
+}
+
+function spawnProjectile() {
+  var projectile = $(
+    `<div id = "projectile${projectileIndex}" class = "projectile"></div>`
+  );
+
+  projectile.css({
+    border: "0px",
+    position: "absolute",
+    left: `${playerPosition.x}px`,
+    top: `${playerPosition.y}px`,
+    width: "20px",
+    height: "10px",
+    backgroundColor: "red",
+  });
+
+  $("body").append(projectile);
+
+  shoot(`#projectile${projectileIndex}`);
+  projectileIndex++;
+}
+
+function shoot(target) {
+  direction = shootDirection == "right" ? 1000 : -1000;
+
+  anime({
+    targets: target,
+    translateX: direction,
+    // 透明
+    background: "rgba(255, 0, 0, 0)",
+    duration: 500,
+    easing: "linear",
+    begin: () => {
+      console.log(`begin`);
+    },
+    update: () => {
+      // console.log(target);
+      // var top = $(target).css("top");
+      // var left = $(target).css("left");
+      // projectiles[target] = { top: top, left: left };
+      // console.log(projectiles[target]);
+    },
+    complete: () => {
+      console.log(target);
+      var top = $(target).css("top");
+      var left = $(target).css("left");
+      projectiles[target] = { top: top, left: left };
+      console.log(projectiles[target]);
+    },
+  });
+}
+
+function detect() {}
diff --git a/test/average.js b/test/average.js
@@ -1,3 +1,5 @@
+// 需要事先全域安裝mocha
+// 在terminal 輸入mocha 可以進行測試
 import should from "should"; //這是有用的 不要刪 也不要uninstall
 import { average } from "../lib/average.js";