Video Game Design: GeoDungeon (link in description)
I built my first 'proper' video game recently.
It's a 2D neon dungeon-crawler/rogue-like(ish) persistent browser-based game.
Bit of a mouthful.
I'd love it if you gave it a go. You can play it here:
(no sign-up required, no data tracked, no ads, nothing nasty)
In my last post, I showed an animation of a loading bar, which I used as the basis for the loading screen of this game. I didn't need a loading screen, as the game itself is very lightweight in terms of loading times, but since Chrome requires a user input before sound can play, the 'START' button served as a 'forced' input to allow the game music to start.
It's pretty feature-rich!
I mean, it's no AAA game, but for my first game designed and built from scratch, I'm pretty proud of it.
Here's a feature list:
Designed and built for mobile devices first (but looks great on just about every device)
9 unique enemy types (I created the vectors in Figma)
9 unique boss types
Boss battle every 10th round (higher HP, deal more damage, give higher rewards)
2 in-game currencies
Gold (standard currency)
Geodes (awarded upon defeating bosses)
Upgrades store that allows players to upgrade their various stats and buy items
Health (player hit points)
Attack (standard attack and damage dealt)
Heavy attack (slower, heavier-hitting attack)
Unlockable 'Heal' ability (heal yourself in battle)
4 battle items available
Health potion (heals player)
GeoNade (deals damage to enemy)
Sleep Dart (stops enemy attacking for a while)
RAGE (player hits critical hits with 100% accuracy for a while)
Upgradable inventory capacity (using Gold)
Unlockable Geodes Store that allows players to upgrade 8 'passive' stats such as gold earned per shape defeated, critical hit chance, miss chance, etc.
Game Over screen showing earnings per round, semi-random bonus gold based on rounds completed, as well as chance for random, weighted loot drops
Chance to land a critical hit (+50% damage dealt)
Chance that attacks will miss (player/enemy)
Set player name and colour
28 achievements to unlock
13 player stats tracked
Introductory 'help' notifications to guide new players through playing the game.
Background artwork generated using Leonardo.ai
AI-generated music tracks for start screen and battle screen (togglable on/off)
Browser storage used to keep game saved
Game data exportable and importable to move between devices/browsers if required
Various battle animations and damage indicators, including status effects
Built with ChatGPT
I'm a huge advocate for making use of AI technologies. I worked with ChatGPT for about a month, building this from nothing but an idea.
I had a working prototype within the first day, a game I liked within a week, and something I was really proud of within a month. I've made (sorry, we've made) a few tweaks and updates since then to improve the UX, balancing the gameplay, and fixing bugs and typos.
I've had a good response from friends and the few people who've played it, but mostly I just had a great time building it and seeing how it all works from behind the scenes.
So many takeaways and learnings..
I learnt a ton about game design, creating and balancing mechanics, how each piece of the puzzle needs to connect to ensure a coherent experience and so much more.
I also learnt loads about a more modern approach to JavaScript (ChatGPT made me realise my coding skills were very out of date) and also served as a deep lesson in using the CSS Flex properties.
As well, I learnt a lot about creating vectors in Figma and then utilising those on the web. I'd done plenty of creation of graphics in the past, but never really needed to use them in this way on the web before, incorporating SVGs with CSS and HTML was a challenge, and they can be so finicky, but it's a good feeling when it all comes together.