atsujimoto / u1-project-game

Cat Fight!

Slide Show: https://docs.google.com/presentation/d/1lTZ6PPy-EZ0IL9-6CLVa_-nnV5qngQ_BHbCVU0BC32g/edit?usp=sharing

CAT FIGHT is a Pokémon-style battle game. Each player will pick 2 cats and battle them to the death!

My Process

• Create a wire frame for how I want the game to look. Think about how many different screens I want to have and what content will be on each respective screen
• Code the bulk of the HTML. Create a different
  for each screen of the game and give each

  a semantic ID
• Start coding some of the CSS. Mostly just flexing different elements to arrange them on the page the way I want, trying to match my wire frame as much as possible
• Start coding the JavaScript. Start with the simplest functions first, like event listeners on buttons and the basic logic of the game
• Slowly add game functionality, incorporating one function at a time and making sure it works as intended
• DRY out code throughout the process, where ever I notice chunks of code being repeated
• Once the game is working mostly as intended, go back and add CSS styling and animations to make the game more visually appealing
• Play though the game several times, making changes where necessary

Unsolved Problems

The game pretty much functions as I intended. Originally, instead of a heal, I wanted each Cat to have a buff or debuff ability. I believe it would make the game more dynamic and interesting. Certain buffs/debuffs would work well with other Cat's specials, allowing a player to incorporate more strategy/tactics by comboing abilities.

This is an achievable goal, given more time.

I would also like to:

• Add several more cats to choose from
• Allow players to pick more than just 2 cats
• Make each cat much more varied in terms of HP, Base Attack and Special, while maintaining a decent balance
• Add more pictures of each cat, like an attack/death pose
• Style the game to have more interesting animations

Wins & Challenges

• Getting the Pick Screen to display each Cat's info when you hover over their picture
• Coding the game to draft in a snake draft, as opposed to just alternating
• Creating the Health Bars and having them be updated with each attack
• Making sure the game knows when a Cat is dead and not allowing a Player to switch if it's other cat is dead
• Getting the win condition to execute when a Player's Cats are dead

Tech Used

Cat Fight utilizes only a couple of things to work:

• HTML
• CSS
• JavaScript
• jQuery

Installation

Cat Fight only requires a web browser to be played. Enjoy!