SoPra FS21 - Client
Introduction
The aim of our project was to build a 2D-Towerdefense game. In case you don't know the genre yet, here is a nice video, that explains the most important aspects. Furthermore, the application has to consist of a front-end and back-end, which are usign the REST-protocol. In addtion to this, an external API has to be used, too. In the beginning, the game we had in mind had a multiplayer mode, where you could buy extra minions for your opponent and the goal was to survive longer than the other player, but this had to be abandoned. In the end, we setteled for a pretty simple tower defense game.
Technologies (short)
For the front end, we used the React Framework. With React, there was also CSS, HTML and Java Script a big part of the project. The core of the game was written in Java Script. The backbone of the game application is based on the Canvas API. Using Canvas allowed us to handle all different objects individually (for instance projectilies.) and this was crucial for the collision detection between the game objects. If you are interested, Mozilla Web Docs (MDN) has a very good documentation.
High-level components
In the front-end, backbone of the application is the Game.js file. The main componetes in the front-end are
- Canvas object (initalisation)
The canvas object that is eventually returned/rendered by the React DOM can be manipulated contains all visual representations of the objects that are generated by the different handlers. - GameHandlers (such as handlePath, handleGrid, handleMinions, handleTowers, handleProjectiles, handleShop, handleGame and handleGameStatus)
These functions are responsible for handling and drawing the different entities on the screen. - Canvas EventListeners (such as "click", "mousemove", "resize" or "mouseleve")
The event listeners take care of the user inputs, such as clicking or movign the mouse. - Async functions (buy, upgrade, sell, hit, ImReady, rageQuit and updateGameState)
These functions are communication with the server by using the REST standards. - Animate function:
Calls the different handlers in a certain frame interval. - Helper functions (especially the isCollide)
isCollide is the most important helper functions, because every collision between two objects are handeld/detected by this function.
Launch & deployment
Prerequisites and Installation
For your local development environment you'll need Node.js >= 8.10. You can download it here. All other dependencies including React get installed with:
npm install
npm install typewriter-effect
npm install --save react-notifications-component animate.css
This has to be done before starting the application for the first time (only once).
npm run dev
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console (use Google Chrome!).
npm run test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
For macOS user running into an 'fsevents' error: https://github.com/jest-community/vscode-jest/issues/423
npm run build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Thanks to Lucas Pelloni for the template
Illustrations
You start at the titlescreen. Upon clicking on the screen you get to the login screen. If you have not created an account yet you can go to the register screen.
This is what the login screen looks like.
After entering your credentials successfully you get to the main menu.
This is a screenshot from the mainmenu.
As you can see there are 4 options from here. Edit user settings lets you edit your username, password and your location. Logout brings you back to the loginscreen from before. If you have never played a towerdefense game before or want to look at the tutorial you can click on the "manual" button which opens a pdf in a new tab.
This is a part of the manual.
If you decided to play the game, click on "singleplayer" and afterwards "start game". This brings you into the actual game which looks like this:
If you quit the game, you get back to the screen before the game.
Roadmap
Here is a list with ideas to improve/extend the project further:
- Adding a Multiplayer (and/or design an AI such that you can play vs. the computer)
- Implement the originally idea, where 2 (or even more?) players are in a game. Besides that you can buy and place towers, each player also can spend money for buying minions. These minions will be sent to the opponents board. This would add a new layer of tactical decisions.
- making the weather have a bigger impact on the game, as planned
- Adding more maps (and/or write a mapgenerator)
- Adding more towers/minions (this would also need a lot of balancing)
- Implementing a range-indicator and minion-detector for the towers. This would increse the diffuculty of the game.
Authors and acknowledment
This project was created during the "Softwarepraktikum" Sopra at the University of Zürich (UZH) in the Spring Semester 21. The core of the team was:
We would also like to mention that the project started initially among Louis and Omar. Due to their high workload, they decided to leave the group after the inital assessment. Nevertheless, thank you Louis and Omar for your initial support!
After this assessment, Matej and Mauro joined our team. Unfortunately, Matej and Mauro also decided to leave the project after a couple of weeks (between M3 and M4). Anyway, thank you 2 for your effort.
Special thanks go to Marion Dübendorfer and Roy Rutishauser who were responsible for our group and of course also Professor Thomas Fritz. Also a shoutout to everyone who contributed to the template.
We would like to thank you different authors and creators, which allows us to use their assets for our game. All used material is open-source and free to use.
The weather icons we used for the weather indicator are from feathericons.com. It is licensed under the MIT License.
The pokemon sprite images (.png) are from the pokeapi project. It is licensed under the GNU Affero General Public License v3.0 License.
The game sounds we've used are from soundpack. We found the soundpack on the website on opengameart.org The author's name is Juhani Junkala aka. Subspace Audio. Feel free to visit his website. The soundpack is under the CC0 1.0 Universal (CC0 1.0) licence.
Finally, Nicoals created with beepbox.co, a program to create melodies an arrangment of the ingame song 3D Galax, the soundtrack of the name 3D Galax on the Atari (1987). The original composer Ben Daglish died recently, rest in peace Ben! Nicolas used the midi sheet of the youtuber "ZdrytchX -{Reference", feel free to check his channel out.
License
This project is under the MIT License.