https://the-hooded-hero.vercel.app/ is A 2D platformer game where users can choose to go through a story mode with several stages or play with friends online to see who can reach the end of the level the fastest!
- Note: This is the latest version of the app. My older version of the app can be found here in this repo: https://github.com/Tandid/The-Hooded-Hero
Typescript, Next, PhaserJS, and WebSockets
-
Install all dependencies using
npm install -
Create a build file using
npm run build -
Start the production environment using
npm start -
Start the server simultaneously by opening a separate terminal and running
npm run server
- Main Menu Screen where users can choose between Story Mode, Multiplayer or Level Selection. Top right paper button leads to contacts, whereas the book icon on the bottom show controls and settings for adjusting volume.
-
Players go through a story mode with three levels and a final boss at the end. These levels consist of physics engines which involve raycasting, collisions, as well as the use of hitboxes and projectiles.
-
Player HUD: The top left corner displays character information such as their health and number of lives. The top right corner displays the number of coins collected throughout the level.
-
Player: The player is controlled with keybindings and collides with platforms, enemies, and projectiles. When hit, the player receives damage and moves accordingly. When health reaches zero or player falls off the map, the player respawns after three seconds. Player respawns at nearest checkpoint.
-
Enemies: There are many enemy variants including a boss. The enemies patrol a specific area and avoid falling off of platforms through raycasting. However, the enemies also have a detection radius if a player gets too close, triggering them to pursue the player. That said, the enemies are somewhat intelligent.
-
Buttons: Book Icon used to view controls. Restart Icon used to reset the scene and start the game again from scratch. Home button allows player to return to Menu. Settings Icon used to adjust volume or mute sounds.
- Enemy Variants: Bee, Spider, Slime
- Level Design (Created using Tiled)
- Enemy Variants: Bat, Skeleton Archer, Skeleton Shield, Skeleton Spear
- Level Design (Created using Tiled)
- Enemy Variants: Skeleton Mage, Crossbow, Skeleton Boss
- Level Design (Created using Tiled)
- Player chooses between four different player sprites to use as their online character.
- Player has the option to create a room, join a custom room, or join a predefined room.
- Create New Room leads to the Waiting Lobby where a code is generated for others to join.
- Join Custom Room leads to a screen that asks to provide a password to a custom room.
- Server Rooms are predefines rooms that anyone can join regardless of password.
- When a game is in session or is full, the room will be closed.
- If player created a new room, a code will be generated and displayed at the bottom left for other players to join with.
- If at least 2 players are in the Waiting Lobby, the Play button will appear and anyone can start the game.
- There may be up to 4 players per lobby.
- Once everyone is in, all players race to reach the finish line!
- Players have infinite health and unlimited respawns, but they can still get hit and fall off the map.
- Level Design (Created using Tiled)
