kunjgit · kunjgit · Aug 1, 2024 · Jul 29, 2024 · Jul 30, 2024 · Jul 31, 2024
diff --git a/Games/2D_Fighting_game/README.md b/Games/2D_Fighting_game/README.md
@@ -0,0 +1 @@
+# 2D Fighting Game 
diff --git a/Games/2D_Fighting_game/img/background.png b/Games/2D_Fighting_game/img/background.png
diff --git a/Games/2D_Fighting_game/img/kenji/Attack1.png b/Games/2D_Fighting_game/img/kenji/Attack1.png
diff --git a/Games/2D_Fighting_game/img/kenji/Attack2.png b/Games/2D_Fighting_game/img/kenji/Attack2.png
diff --git a/Games/2D_Fighting_game/img/kenji/Death.png b/Games/2D_Fighting_game/img/kenji/Death.png
diff --git a/Games/2D_Fighting_game/img/kenji/Fall.png b/Games/2D_Fighting_game/img/kenji/Fall.png
diff --git a/Games/2D_Fighting_game/img/kenji/Idle.png b/Games/2D_Fighting_game/img/kenji/Idle.png
diff --git a/Games/2D_Fighting_game/img/kenji/Jump.png b/Games/2D_Fighting_game/img/kenji/Jump.png
diff --git a/Games/2D_Fighting_game/img/kenji/Run.png b/Games/2D_Fighting_game/img/kenji/Run.png
diff --git a/Games/2D_Fighting_game/img/kenji/Take hit.png b/Games/2D_Fighting_game/img/kenji/Take hit.png
diff --git a/Games/2D_Fighting_game/img/samuraiMack/Attack1.png b/Games/2D_Fighting_game/img/samuraiMack/Attack1.png
diff --git a/Games/2D_Fighting_game/img/samuraiMack/Attack2.png b/Games/2D_Fighting_game/img/samuraiMack/Attack2.png
diff --git a/Games/2D_Fighting_game/img/samuraiMack/Death.png b/Games/2D_Fighting_game/img/samuraiMack/Death.png
diff --git a/Games/2D_Fighting_game/img/samuraiMack/Fall.png b/Games/2D_Fighting_game/img/samuraiMack/Fall.png
diff --git a/Games/2D_Fighting_game/img/samuraiMack/Idle.png b/Games/2D_Fighting_game/img/samuraiMack/Idle.png
diff --git a/Games/2D_Fighting_game/img/samuraiMack/Jump.png b/Games/2D_Fighting_game/img/samuraiMack/Jump.png
diff --git a/Games/2D_Fighting_game/img/samuraiMack/Run.png b/Games/2D_Fighting_game/img/samuraiMack/Run.png
diff --git a/Games/2D_Fighting_game/img/samuraiMack/Take Hit - white silhouette.png b/Games/2D_Fighting_game/img/samuraiMack/Take Hit - white silhouette.png
diff --git a/Games/2D_Fighting_game/img/samuraiMack/Take Hit.png b/Games/2D_Fighting_game/img/samuraiMack/Take Hit.png
diff --git a/Games/2D_Fighting_game/img/shop.png b/Games/2D_Fighting_game/img/shop.png
diff --git a/Games/2D_Fighting_game/index.html b/Games/2D_Fighting_game/index.html
@@ -0,0 +1,124 @@
+<head>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
+    rel="stylesheet"
+  />
+  <style>
+    * {
+      box-sizing: border-box;
+      font-family: 'Press Start 2P', cursive;
+    }
+  </style>
+</head>
+<body>
+  <!-- red container div -->
+  <div style="position: relative; display: inline-block">
+    <!-- smaller red container div -->
+    <div
+      style="
+        position: absolute;
+        display: flex;
+        width: 100%;
+        align-items: center;
+        padding: 20px;
+      "
+    >
+      <!-- player health -->
+      <div
+        style="
+          position: relative;
+          width: 100%;
+          display: flex;
+          justify-content: flex-end;
+          border-top: 4px solid white;
+          border-left: 4px solid white;
+          border-bottom: 4px solid white;
+        "
+      >
+        <div style="background-color: red; height: 30px; width: 100%"></div>
+        <div
+          id="playerHealth"
+          style="
+            position: absolute;
+            background: #818cf8;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            width: 100%;
+          "
+        ></div>
+      </div>
+
+      <!-- timer -->
+      <div
+        id="timer"
+        style="
+          background-color: black;
+          width: 100px;
+          height: 50px;
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+          border: 4px solid white;
+        "
+      >
+        10
+      </div>
+      <!-- enemy health -->
+      <div
+        style="
+          position: relative;
+          width: 100%;
+          border-top: 4px solid white;
+          border-bottom: 4px solid white;
+          border-right: 4px solid white;
+        "
+      >
+        <div style="background-color: red; height: 30px"></div>
+        <div
+          id="enemyHealth"
+          style="
+            position: absolute;
+            background: #818cf8;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+          "
+        ></div>
+      </div>
+      <div></div>
+    </div>
+    <div
+      id="displayText"
+      style="
+        position: absolute;
+        color: white;
+        align-items: center;
+        justify-content: center;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: none;
+      "
+    >
+      Tie
+    </div>
+    <canvas></canvas>
+  </div>
+
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"
+    integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
+  <script src="js/utils.js"></script>
+  <script src="js/classes.js"></script>
+  <script src="index.js"></script>
+</body>