Added Pokemon Adventure Game

Games/Pokemon_Adventure_Game/README.md

@@ -0,0 +1,54 @@
+# Pokemon Adventure Game
+
+Welcome to the 2D Pokemon Adventure Game! This project is a two-dimensional game where players can move a character, battle with a single Pokemon, and interact with various other characters. Dive into an exciting world filled with adventures, battles, and exploration.
+
+## Features
+
+### Player Movement
+- Control the player character to move in four directions (up, down, left, right).
+- Smooth animations for walking and running.
+- Collision detection to prevent walking through obstacles.
+
+### Pokemon System
+- A single Pokemon that belongs to the player.
+- Ability for the Pokemon to battle other wild or trainer Pokemon.
+- Health points (HP) and experience points (XP) system for the Pokemon.
+- Leveling up and evolving the Pokemon based on XP.
+
+### Battle System
+- Turn-based battle mechanics.
+- A variety of moves and attacks for the Pokemon.
+- Status effects (e.g., burn, poison, paralysis) that can be inflicted during battles.
+- Winning battles grants XP and possibly items or currency.
+
+### Character Interactions
+- Non-player characters (NPCs) scattered throughout the game world.
+- Dialogues with NPCs, including quests or missions.
+- NPCs that can challenge the player to battles.
+- Friendly NPCs who can provide hints, items, or healing services.
+
+### Game World
+- A detailed map with different areas to explore (towns, forests, caves, etc.).
+- Interactive objects and items that can be found or collected.
+- Visual and audio feedback for interactions and discoveries.
+
+### Graphics and UI
+- 2D pixel art style for characters, Pokemon, and environment.
+- Intuitive user interface for navigating menus, inventory, and battle options.
+- Visual indicators for health, status effects, and XP.
+
+### Sound and Music
+- Background music that changes based on the area or situation.
+- Sound effects for movements, interactions, and battles.
+- Voice snippets or sound cues for NPC dialogues and Pokemon cries.
+
+## Screenshots
+![Screenshot from 2024-07-25 10-45-46](https://github.com/user-attachments/assets/88813192-18e8-4aa6-865e-01c616dd0ade)
+![Screenshot from 2024-07-25 10-46-15](https://github.com/user-attachments/assets/2c6a2f6a-359b-454e-8d1f-ddde5585a218)
+
+
+## Created by 
+- Name : Vaibhav Kesarwani
+- Linkedin: https://www.linkedin.com/in/vaibhav-kesarwani-9b5b35252/
+- Github: https://github.com/Vaibhav-kesarwani
+- Portfolio: https://vaibhavkesarwani.vercel.app/

Games/Pokemon_Adventure_Game/battleScene.js

@@ -0,0 +1,135 @@
+const battleBackgroundImage = new Image()
+battleBackgroundImage.src = './img/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()
+
+  console.log(battleAnimationId)
+
+  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'
+})