Video Demo: https://www.youtube.com/watch?v=iREm1t-rgQA
CSFighty is a game project in which you choose your character and defeat the Nightborne, who has stolen the kingdom's RGB colors.
The project is divided into 4 parts:
-
index.html -> Has the initial structure of the page, preloads all the sprite images and adds all the audio;
-
styles -> Has the global css file;
-
src -> Where all the project logic is;
-
assets -> Folder containing all the images and audio.
Organizes all the assets so that they are easy to call in functions, for example, assets/fighters contains the character folders, apart from nightborne, they all have sprites with the same names, such as “attack_basic”, “run”, “idle”, etc.
Here is the main thing, the heart of the project, and it is divided into:
- constants -> where there are character and special files, containing the number of frames in each sprite of each character/special, for example;
- entities -> with OOP in mind, here are the entity classes, such as Sprite, which is the basis of everything. And I've implemented the attributes as private, so that they can only be accessed with getters and setters;
- pages -> here are the two pages that are implemented in the DOM later;
- states -> are values that are accessed and changed over time:
- enemy.js -> changes the enemy's level, its fear measure, and these 2 change its behavior in battle;
- game.js -> changes what is being displayed (game, intro, dialogue, etc);
- sprites.js -> determines the cooldown of the player and the boss's basic attack.
- utils -> as the name says, these are files with useful functions;
- attack -> functions for basic and special attacks, to defeat the opponent and reset the specials array;
- block -> function to remove the opponent's block;
- collision -> functions to check the collision between sprites;
- dialogue -> functions to position characters on the dialogue screen;
- enemy -> functions to decide, based on behavior, the AI's movement and battle action;
- game -> function to start the game and save global references;
- round -> functions to control round variables;
- select -> functions to position characters on the select screen;
- sfx -> function to check if sfx is playing.
- soundtrack -> function to check if the soundtrack is playing.
- Air - Yasuo Q Sound Effect (League of Legends)
- Block - Rope Shield (The Rising of the Shield Hero)
- Earth - Avatar Earthbending Animation (Jared Koh)
- Fire - Avatar Earthbending Animation (Jared Koh)
- Slash Boss - Anime Slash Sound Effects for Edits/AMVs (Mike5FX)
- Slash - Anime Slash Sound Effects for Edits/AMVs (Mike5FX)
- Void - Made In Heaven Moments SFX Only (Passione Sound)
- Water - Avatar Waterbending Animation (Jared Koh)
- (Home) Belmont Chronicles - Awakening After the War (DavidKBD)
- (Select) Belmont Chronicles - Abandoned Church (DavidKBD)
- (First Enemy) Belmont Chronicles - The Dungeons (DavidKBD)
- (Second Enemy) Belmont Chronicles - The Mystic Forest (DavidKBD)
- (Third Enemy) Belmont Chronicles - Caverns (DavidKBD)
- (Boss) Belmont Chronicles - Final Boss (DavidKBD)
- (Credits) Belmont Chronicles - Credits Theme (DavidKBD)