A few images of the game
Link to be able to play the game:
Description of the project
For my semester project, I had to create a mini 2D game using JavaScript and the HTML5 canvas tag. This was my first game made in JavaScript. The game takes place in an environment of my choice. I decided to create a battlefield where American missiles and robots attack a plane over Lake Erie. The project was divided into two parts with specific requirements to meet.
Part 1: Introduction Interface and Game Scene
The first part focuses on creating an introduction interface that presents the game's objective and rules. This interface includes a background image and explanatory text. To start the game, the player must click on the canvas or press a key on the keyboard. Then, in the game scene, the player controls an element (like a paddle or character) using the keyboard keys, and the action takes place in real time. I included the instructions at the beginning of the game. Additionally, I made sure the plane could move with the arrow keys.
The first part focuses on creating an introduction interface that presents the game's objective and rules. This interface includes a background image and explanatory text. To start the game, the player must click on the canvas or press a key on the keyboard. Then, in the game scene, the player controls an element (like a paddle or character) using the keyboard keys, and the action takes place in real time. I included the instructions at the beginning of the game. Additionally, I made sure the plane could move with the arrow keys.
Part 2: Interactions and Features
In the second part, the game must include at least two different interactive objects that the player can collide with. These collisions must trigger visual or sound feedback. I added missiles and robots that appear every three seconds to try to destroy the plane. Each time the user gets hit by one of the enemies, a sound effect plays. A counter is also required to display points, remaining time, or any other relevant information. Depending on the player's performance, a message is displayed at the end of the game, indicating success or failure. The game can also be restarted by pressing a defined key.
In the second part, the game must include at least two different interactive objects that the player can collide with. These collisions must trigger visual or sound feedback. I added missiles and robots that appear every three seconds to try to destroy the plane. Each time the user gets hit by one of the enemies, a sound effect plays. A counter is also required to display points, remaining time, or any other relevant information. Depending on the player's performance, a message is displayed at the end of the game, indicating success or failure. The game can also be restarted by pressing a defined key.
Additional Elements and Techniques
The project needed to include sounds to enhance the game's atmosphere, collision management with visual or sound feedback, and animation created using a sprite sheet. Code quality was essential, and detailed comments were required. Finally, the overall appreciation of gameplay and code complexity were also evaluated.
This project allowed me to combine my programming skills with visual and interactive elements.
The project needed to include sounds to enhance the game's atmosphere, collision management with visual or sound feedback, and animation created using a sprite sheet. Code quality was essential, and detailed comments were required. Finally, the overall appreciation of gameplay and code complexity were also evaluated.
This project allowed me to combine my programming skills with visual and interactive elements.
Publication date
I finished this project on December 20th 2022.
Programming language used
HTML5
The HTML5 language was used to structure the game's interface. I primarily used the <canvas> tag. It allows for drawing and animating graphical elements directly on the web page. Thanks to this tag, I was able to create the game scene where the various actions take place, as well as the game's introduction interface.
The HTML5 language was used to structure the game's interface. I primarily used the <canvas> tag. It allows for drawing and animating graphical elements directly on the web page. Thanks to this tag, I was able to create the game scene where the various actions take place, as well as the game's introduction interface.
JavaScript
The most used code in this project is JavaScript.
The most used code in this project is JavaScript.
Here’s how I used JavaScript:
Event Management : I programmed the capture of user interactions, such as mouse clicks or keyboard key presses, to start the game and control the movements of the plane.
Movements and Collisions : I programmed the movements of the player-controlled element, as well as the detection of collisions with other game objects. When these collisions occur, sound effects are triggered.
Counters : I programmed a counter to display information such as the remaining time. This allowed me to manage the game's progression.
Animations : I programmed a sprite sheet that was used with JavaScript to create smooth animations. I used a pre-made sprite sheet from the internet for my plane.
End of Game and Restarting : I also programmed the detection of the game's end, displayed a personalized message based on the player's result (success or failure), and allowed the game to be restarted by simply pressing a key.