pranav-kumar-singh-038 / fight

Simple Fighting Game

Welcome to the Simple Fighting Game! This is a basic fighting game built using the HTML canvas element and JavaScript. It features different backgrounds and player movements, using PNG images obtained from the itch.io platform. The game also utilizes the "Press Start" font from Google Fonts and a color palette inspired by the "Kuler Color Theme" website. Animation effects on the health bar are achieved using the GSAP CDN (GreenSock Animation Platform).

Please note that this project is ongoing and there are some features that will be implemented in the future.

Table of Contents

• Introduction
• Installation
• Usage
• Future Features
• Credits
• License

Introduction

The Simple Fighting Game is a small project aimed at demonstrating the usage of the HTML canvas element and JavaScript to create a basic fighting game. The game includes different background settings and player movements, allowing users to engage in virtual battles. The visual elements, including character sprites, backgrounds, fonts, and color palette, are sourced from various platforms to enhance the game's aesthetics.

Installation

To run the Simple Fighting Game locally, follow these steps:

1. Clone the repository or download the source code as a ZIP file.
2. Extract the contents of the ZIP file, if necessary.
3. Open the index.html file in a web browser.

Alternatively, you can play the game directly here.

That's it! You should now be able to play the Simple Fighting Game on your local machine.

Usage

Upon opening the game in your web browser, the game starts, and you can control the player character using the specified keys or buttons for movement and attack. Enjoy the game and defeat your opponents!

• To play the character on the left, use the keys A, W, D, Space for left, jump, right, and attack commands, respectively.
• To play the character on the right, use the keys ArrowLeft, ArrowUp, ArrowRight, ArrowDown for left, jump, right, and attack commands, respectively.

Future Features

The Simple Fighting Game is an ongoing project, and the following features will be implemented in the future:

• Sound effects and vibration to enhance the gaming experience.
• Character selection to allow players to choose their preferred fighters.
• Adjustments to prevent players from moving out of the canvas width.
• Implementation of enemy AI for single-player mode.
• Optimization for mobile devices to make the game playable on smartphones and tablets.
• Addition of Jest tests to ensure maximum code coverage.
• Personalized comments and documentation to enhance code readability and understanding.
• Exploration and explanation of the CSS used in the project.
• Implementation of turning animations for the characters when they cross each other.

Stay tuned for updates as these features are added to the game!

Making

To make the game by yourself -:

• You must have Basic Knowledge of HTML, CSS and JavaScript
• Knowledge of HTML5 canvas element and how it is used to make animate basic shapes and images
• You can follow Chris Courses Channel to learn HTML5
• then you must first start by making rectangles in the canvas and making them interact using arrow keys by adding various event listeners and changing the position of the rectangle accordingly.
• Make sure to add the gravity function so as make jump look natural
• add attack boxes and which appear when an attack is performed
• add divs to showcase the health bars and timer
• reduce the health(by 20% in my case) whenever when an attack connects
• replace the rectangles and backgrounds with sprites
• To animate the png files crop over a part of the image and loop over the number of frames the png file has
• refract and abstract the add features and animation according to you liking
• your basic project should now be ready to deploy

Credits

The creation of the Simple Fighting Game was made possible with the help of various resources and tutorials. I would like to acknowledge the following:

• itch.io: Provides the PNG images for character sprites and backgrounds used in the game.
• Google Fonts: Offers the "Press Start" font used for text elements in the game.
• Kuler Color Theme: Provides the color palette inspiration for the game's visuals.
• Chris-Courses YouTube Channel: Offers tutorials and educational content on web development, including HTML canvas and JavaScript game development.
• Schezzor's Dev Corner YouTube Channel: Provides valuable insights and tutorials on game development and animation.
• GSAP CDN: Allows for the implementation of animation effects on the health bar.

We appreciate the efforts and contributions of these resources, as they have greatly influenced the development of this game.

License

The Simple Fighting Game is licensed under the MIT License. Feel free to modify and distribute the game according to the terms of this license.