From 79f638c044eabc8318157286e0dc7eb67f421b02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B1=AA=E4=B8=96=E5=82=91?= Date: Thu, 17 Oct 2024 10:26:58 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E:=20=E5=B0=87=E4=BB=A5?= =?UTF-8?q?=E5=89=8D=E5=81=9A=E5=88=B0=E4=B8=80=E5=8D=8A=E7=9A=84=E5=B0=8F?= =?UTF-8?q?=E9=81=8A=E6=88=B2=E6=94=BE=E9=80=B2=E4=BE=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/libs.js | 1 + src/test/minigame2.html | 34 +++++++++++ src/test/minigame2.js | 121 ++++++++++++++++++++++++++++++++++++++++ test/average.js | 2 + 4 files changed, 158 insertions(+) create mode 100644 src/test/minigame2.html create mode 100644 src/test/minigame2.js diff --git a/js/libs.js b/js/libs.js index 6fd0e8a..0ac4f81 100644 --- 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 // // diff --git a/src/test/minigame2.html b/src/test/minigame2.html new file mode 100644 index 0000000..84e7e23 --- /dev/null +++ b/src/test/minigame2.html @@ -0,0 +1,34 @@ + + + + + + Document + + + + + + + + + + +
player
+
boss
+ + diff --git a/src/test/minigame2.js b/src/test/minigame2.js new file mode 100644 index 0000000..afaa9e2 --- /dev/null +++ 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 = $( + `
` + ); + + 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 index 6b6a8cf..433ebef 100644 --- 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";