Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devancadman/neon-defence
DevGames Hackathon 2023 - Testing phaser - Team: Code Craftsmen
https://github.com/devancadman/neon-defence
css3 firebase html-css-javascript html5 javascript netlify nodejs parcel-bundler parceljs phaser3 phaserjs tiled tiled-map-editor vitejs
Last synced: 3 months ago
JSON representation
DevGames Hackathon 2023 - Testing phaser - Team: Code Craftsmen
- Host: GitHub
- URL: https://github.com/devancadman/neon-defence
- Owner: devancadman
- License: mit
- Fork: true (Barneslow/neon-defence)
- Created: 2023-06-25T11:59:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-15T19:23:29.000Z (over 1 year ago)
- Last Synced: 2024-09-13T22:58:28.736Z (4 months ago)
- Topics: css3, firebase, html-css-javascript, html5, javascript, netlify, nodejs, parcel-bundler, parceljs, phaser3, phaserjs, tiled, tiled-map-editor, vitejs
- Language: JavaScript
- Homepage: https://neon-defence.vercel.app
- Size: 38.8 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Neon Defence:
Neon Defence is an exciting tower defence game where your objective is to protect the Sun of Neon City from various types of enemies. Build and strategically place different types of turrets to fend off waves of incoming enemies and prevent them from reaching the Sun. If enemies manage to reach the Sun, you will lose a life. Be careful, as losing three lives will result in a game over.
**Live Site:** https://neon-defence.vercel.app
![Am I responsive screenshot](assets/docs/Am-I-Responsive-neon-defence.png)
![GitHub last commit](https://img.shields.io/github/last-commit/Barneslow/neon-defence?color=red)
![GitHub contributors](https://img.shields.io/github/contributors/Barneslow/neon-defence?color=orange)
![GitHub language count](https://img.shields.io/github/languages/count/Barneslow/neon-defence?color=yellow)
![GitHub top language](https://img.shields.io/github/languages/top/Barneslow/neon-defence?color=green)---
# Content
1. [Neon Defence](#neon-defence)
2. [Game Map](#game-map)
3. [Turrets](#turrets)
4. [Power Turrets](#power-turrets)
5. [Enemies](#enemies)
6. [How to Play](#how-to-play)
7. [Controls](#controls)
8. [Design](#design)
9. [Screenshots](#screenshots)
10. [Future Implementations](#future-implementations)
12. [Tech](#tech)
13. [Bugs](#bugs)
14. [Credits](#credits)
---
## Game Map
![game-map](assets/docs/game-map.png)
## Turrets:
Neon Defence features four unique types of turrets that you can utilize to defend against the enemy waves, and turrets level up after killing enough enemies:
### Auto Turret:
This turret automatically fires at enemies within its range. It provides a consistent stream of damage to keep the enemy at bay.
### Laser Turret:
The LaserTurret emits a high-intensity laser beam that can cut through enemies, dealing continuous damage to a single target. It's effective against tougher foes.
### Shotgun Turret:
The ShotGunTurret unleashes a powerful shotgun blast that damages multiple enemies in a cone-shaped area. It's great for dealing with groups of weaker enemies.
### Human-Controlled Turret:
The Human-Controlled Turret allows you, the player, to take control and manually aim and shoot at enemies. Use your skills to accurately eliminate threats and protect the Sun.
## Power Turrets:
### Fire Turret:
The Fire Turret, Burns all enemies.
### Electric Turret:
The Electric Turret, electrifies all enemies.
### Freeze Turret:
The Freeze turret, freezes the enemies for a certain period.
## Enemies
Neon Defence throws various enemies at you throughout the game. Here are some of the enemy types you will encounter:
### Basic Robot: ![robot](assets/images/enemies/robot.png)
These are the most common enemies you'll face. They have moderate health and deal low damage.
### Reinforced Robot: ![heavybot](assets/images/enemies/heavybot.png)
Reinforced robots are tougher than the basic ones, requiring more hits to defeat. Be prepared for a longer fight.
### Mechanic Spider: ![spider](assets/images/enemies/spider.png)
These agile enemies can crawl over obstacles and move quickly towards the Sun. Watch out for their speed.
### Drone: ![drone](assets/images/enemies/drone.png)
Drones are aerial enemies that fly above the ground defences. You'll need to use turrets capable of hitting airborne targets to deal with them.
### Boss: ![boss](assets/images/enemies/boss.png)
Boss enemies are formidable adversaries that possess high health and deal significant damage. They pose a real threat to the Sun and require careful planning to defeat.
---
## How to Play
### Build Turrets:
Use the in-game resources to construct and place turrets strategically. Experiment with different turret combinations to find the most effective defence against each enemy type.
### Upgrade Turrets:
As you progress, you'll earn resources that can be used to upgrade your turrets. Enhance their firepower, range, and special abilities to improve their effectiveness against the increasingly challenging enemies.
### Monitor Resources:
Keep an eye on your available resources, as they are limited. Spend them wisely to optimize your defence strategy.
### Defend the Sun:
Your primary objective is to protect the Sun from enemy incursions. Ensure that no enemy reaches the Sun by eliminating them with your turrets.
### Lives and Game Over:
You start with three lives. If an enemy reaches the Sun, you lose a life. Losing all three lives will result in a game over. Strive to maintain a strong defence and keep the Sun safe.
## Controls
The game can be played using the following controls:
To place a turret, click on the type of turrets you'd like to place and then click on the tile with the little sun to place it ![turret-marker](assets/images/turret-marker.png).
Power Turrets are automatically placed when you click on their buttons and are not moveable.
You can sell a turret by clicking on it , but it'll give you half the resources it cost back.![sell-turret](assets/docs/sell-turret.png)
---
## Design
### Colour Scheme
For the colours I based them off the Synthwave/Retrowave Colours.
![ScreenShot](assets/docs/neon-defence-color-scheme.png)
#### Logo & Favicon
| **Logo** | **Favicon** |
| :----------------------------------------: | :------------------------------------: |
| ![Logo](assets/docs/neon-defence-logo.png) | ![Favicon](assets/favicon/favicon.png) |## Screenshots
| **Intro Page** | **Intro Menu** |
| :----------------------------------------------------------: | :-------------------------------------------------------------------: |
| ![Intro](assets/docs/screenshots/intro-page.png) | ![Menu](assets/docs/screenshots/menu.png) |
| **Game Page** | **Game Over Screen** |
| :----------------------------------------------------------: | :-------------------------------------------------------------------: |
| ![Game](assets/docs/screenshots/game-page.png) | ![GameOver](assets/docs/screenshots/game-over.png) |
---
## Future Implementations.
- Add Different Map variation's.
- Add different wave and enemies.
---
## Tech
In the tech section, we provide information about the technology stack, dependencies, and any technical details related to the project.
### Tech Stack
For the development of Rainbow warriors we made use of the following stack of technologies:
##### Front-End
- ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) [HTML5](https://developer.mozilla.org/en-US/docs/Glossary/HTML5)
- ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) [CSS3](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [Tiled](https://www.mapeditor.org/)##### Back-End
- ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [Phaser.JS](https://phaser.io/)
- ![NodeJS](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white) [Node.JS](https://nodejs.org/en)
- ![JavaScript](https://img.shields.io/badge/Vite-646CFF.svg?style=for-the-badge&logo=Vite&logoColor=white) [Vite.js](https://vitejs.dev/)
- [Parcel.js](https://parceljs.org/)
- ![Firebase](https://img.shields.io/badge/Firebase-FFCA28.svg?style=for-the-badge&logo=Firebase&logoColor=black) [Firebase](https://firebase.google.com/)
- ![Netlify](https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge&logo=netlify&logoColor=#00C7B7) [Netlify](https://www.netlify.com)
##### Technologies Used
- ![Adobe Illustrator](https://img.shields.io/badge/adobe%20illustrator-%23FF9A00.svg?style=for-the-badge&logo=adobe%20illustrator&logoColor=white) [Adobe Illustrator](https://www.adobe.com/uk/products/illustrator.html) - To create site icons.
- ![Adobe Photoshop](https://img.shields.io/badge/adobe%20photoshop-%2331A8FF.svg?style=for-the-badge&logo=adobe%20photoshop&logoColor=white) [Adobe Photoshop](https://www.adobe.com/uk/products/photoshop.html) - To edit images.- ![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white) [VScode](https://code.visualstudio.com) - code editing
- ![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white) [GIT](https://git-scm.com/), [GitHub](https://github.com/) - tracking, storing, hosting project
- ![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white) [GitHub Desktop](https://desktop.github.com/) - for local development- ![Goggle Fonts](https://img.shields.io/badge/Google%20Fonts-4285F4.svg?style=for-the-badge&logo=Google-Fonts&logoColor=white) [Google Fonts:](https://fonts.google.com/) - Google fonts were used to import the 'Work Sans' font into the style.css file which is used on all pages throughout the project.
- [Coolors](https://coolors.co/) - Coolors was used for choosing the website's colours palette.
- ![Shields.io](https://img.shields.io/badge/Shields.io-000000.svg?style=for-the-badge&logo=shieldsdotio&logoColor=white) [Shields.io](https://shields.io/) - To add badges to the README- ![Google Chrome](https://img.shields.io/badge/Google%20Chrome-4285F4?style=for-the-badge&logo=GoogleChrome&logoColor=white) [Chrome DevTools](https://developer.chrome.com/docs/devtools) - - To troubleshoot and test features, solve issues with responsiveness and styling.
- [Am I Responsive?](http://ami.responsivedesign.is/) & [Responsinator](http://www.responsinator.com/) - To show the website image on a range of devices.
- [BrowserStack](https://www.browserstack.com/guide/browser-compatibility-for-variable-fonts) - To check site responsiveness on live devices.
- [Polypane Browser](https://polypane.app/) - Responsive & Accessibility Testing and more!
- [ghostCSS](http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/) - To check for layout issues.
- [Netlify](https://app.netlify.com/) - Deployment.
- [Can I Use](https://caniuse.com/#home) - to check for CSS Browser comparability issues.
---
## Bugs
Known bugs are the speed multiplyer for current enemies on the map, and current towers. If x2 speed is placed and then towers are placed the game can be hacked.
Not enough time to fix - next future patch update.
## Credits
**Team: Code Craftsmen**
All resources were created for the games. Made by:
- [Darrach Barneveld](https://github.com/DarrachBarneveld)
- [Devan Cadman](https://github.com/devan-cadman)
- [Tanguy L'Alexandre](https://github.com/tlalexandre)