🌟 JavaScript Fighting Game 🥊

This project is a fighting game, it was my biggest challenge since joining _Nology and it helped me showcase my skills in front-end development, particularly in CSS and JavaScript. It helped me understand Functional Javascript but I also started to learn and understand the basics of Object Oriented Programming (OOP) with classes and the extends keyword.

One of my goals as a developer was to learn HTML5 Canvas and I am glad that I was able to achieve this through this project. I had the opportunity to work with HTML5 Canvas from scratch and I learned a lot about how to manipulate the canvas, create animations, and more.

My next big step would be to continue expanding my knowledge in new technologies and I would be thrilled to learn Three.JS to implement 3D in my projects. I believe that this project showcases not only my technical skills but also my quick learning abilities, as I had to start from scratch with HTML5 Canvas.

I would like to give credit to Chris Course that has done excellent Tutorials on HTML5 Canvas. Specially because his courses helped me understand some core concepts of OOP using canvas. But also Luiz Melo that sells free pixel art characters assets on Itch.io and Ansimuz that provided the background for free on Itch.io.

If you are interested in learning more about journey to develop this project, feel free to explore this repository and have a look at these ones:

• Canvas Basics

• Canvas Gravity

• Canvas Collision

• Canvas Rectangular Collision

• Canvas Fighting Learning

  I am always eager to take on new challenges and I am open to feedback and suggestions. Thank you for visiting my repository and I hope you enjoy the Fighting Game!

💥 Setup / Installation Requirements 💥

Open the terminal or a similar CLI on your computer.

• Change the directory to your Desktop.
• copy https://github.com/tomas-trls/javascript-game-challenge.git

👾 In your Terminal 👾

  git clone https://github.com/tomas-trls/javascript-game-challenge.git

Open the new folder on your Desktop named javascript-game-challenge.

Open the index.html file inside the folder.

🌚 Demo 🌝

[Live Demo] See the site live HERE!

🎮 Controls 🎮

Action	Player 1	Player 2
Run	A & D	Left & Right Arrow
Jump	W	Up Arrow
Attack	SPACE	Down Arrow

⚡️ Technologies used ⚡️

🚀 Future Features & Issues 🚀

• I need to fix the death animation loop.
• I need to block the characters from going out of screen.
• I'd like to add a block action to allow the players to block incoming damage!
• I'd like to make the characters able to turn on the vertical axis, so if they jump over one and other, they can turn around.
• I need to fix the hitbox of the attacks.

💎 Contact Me 💎

@tomas-trls / tomast25@hotmail.com