Merge pull request #3 from kurumayusamugariko/develop

Develop

.vscode/settings.json

@@ -1,8 +1,16 @@
 {
 	"cSpell.words": [
+		"chara",
+		"emby",
 		"gsap",
+		"metametamonmon",
 		"metamon",
 		"metown",
+		"Nomatem",
+		"olderman",
+		"oldman",
+		"renderable",
+		"renderables",
 		"yoyo"
 	]
 }

Idle.tsx

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<tileset version="1.10" tiledversion="1.10.2" name="Idle" tilewidth="12" tileheight="12" tilecount="5" columns="5">
+ <image source="public/metamon/chara/Idle.png" width="64" height="16"/>
+</tileset>

battleScene.js

@@ -0,0 +1,137 @@
+const battleBackgroundImage = new Image();
+battleBackgroundImage.src = "./public/metamon/battleBackground.png";
+const battleBackground = new Sprite({
+  position: {
+    x: 0,
+    y: 0,
+  },
+  image: battleBackgroundImage,
+});
+
+//モンスターの表示
+let draggle;
+let emby;
+let renderedSprites;
+let battleAnimationId;
+let queue;
+
+function initBattle() {
+  document.querySelector("#userInterface").style.display = "block";
+  document.querySelector("#dialogueBox").style.display = "none";
+  document.querySelector("#enemyHealthBar").style.width = "100%";
+  document.querySelector("#playerHealthBar").style.width = "100%";
+  document.querySelector("#attacksBox").replaceChildren();
+
+  draggle = new Monster(monsters.Draggle);
+  emby = new Monster(monsters.Emby);
+  renderedSprites = [draggle, emby];
+  queue = [];
+
+  emby.attacks.forEach((attack) => {
+    //ボタンを表示
+    const button = document.createElement("button");
+    button.innerHTML = attack.name;
+    document.querySelector("#attacksBox").append(button);
+  });
+
+  //our event listeners for our buttons(attack)
+  document.querySelectorAll("button").forEach((button) => {
+    button.addEventListener("click", (e) => {
+      const selectedAttack = attacks[e.currentTarget.innerHTML];
+      emby.attack({
+        attack: selectedAttack,
+        recipient: draggle,
+        renderedSprites,
+      });
+
+      //敵が倒れた時
+      if (draggle.health <= 0) {
+        queue.push(() => {
+          draggle.faint();
+        });
+        queue.push(() => {
+          //fade back to black
+          gsap.to("#overlappingDiv", {
+            opacity: 1,
+            onComplete: () => {
+              cancelAnimationFrame(battleAnimationId);
+              animate();
+              document.querySelector("#userInterface").style.display = "none";
+
+              gsap.to("#overlappingDiv", {
+                opacity: 0,
+              });
+
+							battle.initiated = false;
+							audio.Map.play();
+            },
+          });
+        });
+      }
+
+      //draggle or enemy attacks right here
+      const randomAttack =
+        draggle.attacks[Math.floor(Math.random() * draggle.attacks.length)];
+
+      queue.push(() => {
+        draggle.attack({
+          attack: randomAttack,
+          recipient: emby,
+          renderedSprites,
+        });
+
+        //味方が倒れた時
+        if (emby.health <= 0) {
+          queue.push(() => {
+            emby.faint();
+          });
+
+          queue.push(() => {
+            //fade back to black
+            gsap.to("#overlappingDiv", {
+              opacity: 1,
+              onComplete: () => {
+                cancelAnimationFrame(battleAnimationId);
+                animate();
+                document.querySelector("#userInterface").style.display = "none";
+
+                gsap.to("#overlappingDiv", {
+                  opacity: 0,
+                });
+
+								battle.initiated = false;
+								audio.Map.play();
+              },
+            });
+          });
+        }
+      });
+    });
+
+    button.addEventListener("mouseenter", (e) => {
+      const selectedAttack = attacks[e.currentTarget.innerHTML];
+      document.querySelector("#attackType").innerHTML = selectedAttack.type;
+      document.querySelector("#attackType").style.color = selectedAttack.color;
+    });
+  });
+}
+
+function animateBattle() {
+  battleAnimationId = window.requestAnimationFrame(animateBattle);
+  battleBackground.draw();
+
+  renderedSprites.forEach((sprite) => {
+    sprite.draw();
+  });
+}
+
+animate();
+// initBattle();
+// animateBattle();
+
+document.querySelector("#dialogueBox").addEventListener("click", (e) => {
+  if (queue.length > 0) {
+    queue[0]();
+    queue.shift();
+  } else e.currentTarget.style.display = "none";
+});