YP
back
flat colored illustration of a small red twenty sided die

D&D Fighter Game

Multiple mock up screens of project D&D Fighter Game. Laptop mock up with different screen designs.

This was a project for one of my classes, called Inleiding Programmeren ("Introduction to Programming"). During this class we dove deeper into learning JavaScript.

During this project we had to make one of three things, either a: Customizer, Tamagotchi or a Fighter game, made out of pure JavaScript, where the focus laid on JS, not on HTML or CSS (although it of course was needed to make this game).

You can play the game yourself on yaraprins.github.io/fightergame/, or look at the code through my GitHub Repository

Process

Start

While hearing the assignment, I immediatly knew what I wanted to go for. I wanted to make a fighter game, a la old school Pokémon, but in the theme of Dungeons and Dragons.

I roughly sketched out how I imagined it would look (see image), and I started with finding images for the background, player and the monster. When I put those in the code, I made a few buttons and first looked through the console log to see if things worked.

sketch of concept for the fighter game in JavaScript, designed by Yara Prins.

Coding

I struggled a little bit in the beginning of this project, seeing I didn't have much knowledge yet at that time of JavaScript. But, I quite quickly learned a lot, and I'm especially proud of the healthbar connecting to the damage that was taken or dealt. I really love how it turned out, I have learned a lot and I would love to continue working on something like this. At the time of writing this, my knowledge and skill level of JavaScript improved quite a bit.

I would have liked to make more options to do in this battle, and maybe add some animations and own art for the assets, but sadly the short time span prevented me to do so.

sketch of concept for the fighter game in JavaScript, designed by Yara Prins.

Screenshots Game

screenshot 1 of the d&d fighter game, monster misses, hero hits and does damage. Made by Yara Prins. screenshot 2 of the d&d fighter game, monster misses, hero misses. Made by Yara Prins. screenshot 3 of the d&d fighter game, monster hits and does damage, hero misses. Made by Yara Prins. screenshot 4 of the d&d fighter game, monster hits, hero hits and both do damage. Made by Yara Prins. screenshot 5 of the d&d fighter game, monster misses, hero makes a critical hit and does dubble damage. Made by Yara Prins. screenshot 6 of the d&d fighter game, monster misses, hero heals themselves. Made by Yara Prins. screenshot 7 of the d&d fighter game, begin screen, no one has damage or has attacked yet. Made by Yara Prins. screenshot 8 of the d&d fighter game, you won play again screen. Made by Yara Prins. screenshot 9 of the d&d fighter game, you lost play again screen. Made by Yara Prins.