Deployed Link: https://square-wars-three.vercel.app/
This is a game that we made during the Hackathon using the html, css-animation, javascript, styled-components and typescript.
The basic idea was that 2 squares opposite to each other will try to shoot at each other. The one who manages to shoot the other first wins the game. This idea looked very simple of paper but proved to be very challenging when we started. Firstly we broke down the problem statement in to 4 parts: the UI, the square's movements, hitting of bullet detection and multiplayer functionality.
The tech stacks used in this were React, javacript,styled-components and typescript.
On page load the start menu appears which has the details of the keys assigned to left and right player. There is also a start game button. When we click on the start game button it re-directs us to main game page where we can play.
we have replaced the squares with guns because it looks much better. The up and down movement of the guns is acheived by "on key down" event. The bullet collision is detected by getboundingclientrect() function.
Team Member:-
- Rittik Haldar - UI
- Prateek Bhattacharya - bullet movement & collision detections
- Saurav Mallik - guns up and down movement
- Omesh Dubey - made guns UI and hands
Tech Stacks:-
- React
- Javascript
- HTML
- CSS Animation
- Chakara UI
- TypeScript
-
Start Page
-
Game Page
-
Game Over Page
