Dungeon Dodge

• 

  Home page

• 

  Game over page

• 

  In-game screenshot

• 

  In-game screenshot

Inspiration

While looking for a project idea that can be build using our acquired skills of JavaScript, we came across an online arcade game, which we should have hands on. So we decided to build our own game similar to what we saw, using our knowledge. By doing the same, we could practice our skills and enhance them.

What it does

Dungeon Dodge is a retro, arcade game development project build using HTML, CSS and pure Javascript. The character has to dodge the moving fireballs in the dungeons while collecting coins. The character moves in a 2D plane on a fixed dungeon floor, and collects coins that appears on random cells of the floor. The game also keeps a track of your score. As the score increases, the number of fireballs and their speed increases which makes the game challenging overtime. If the player gets hit by any of the fireball, the game ends.

How we built it

The overall project is build using HTML, CSS and pure Javascript. The setup of the dungeon was laid using HTML and CSS. The character, coin and the fireball was given animations using CSS animations property. The character moves by changing the position properties of CSS using javascript methods. The coin is placed at random cells of the floor by calling random values from an array of different positions for the coin. The fireballs originates from different sides and position, by calling values from an array. The game ends if the character comes within the range of any of the fireballs (range was set such that even if the character gets in contact with the tail of the fireball, the game ends). If else conditions were used in such cases. The score is updated each time the position of the character and the coin matches. Different gaming sound effects were used in different parts of the game.

Challenges we ran into

1. To make the game 'responsive' for all screen widths.
2. To make the character stay within the dungeon floor.
3. Game over condition when the fireball hits the character.
4. Giving animations to the character(moving hands) , coins(rotating) and fireball(moving tail).

Accomplishments that we're proud of

We were able to complete the whole project including all features using minimal skills. No frameworks or external libraries were used while developing the game. We came to know, how earlier arcade games were developed in times, when frameworks and libraries weren't popular.

What we learned

1. Learnt about spritesheet animations.
2. Learnt writing logics used in arcade games.
3. Learnt about various javascript methods and their implementations.

What's next for Dungeon Dodge

The game can have features like multiplayer gaming, best score records, storing player's information in database using backend technologies, and many more.

Built With

• css3
• html5
• javascript