GoblinSlayer - Readme

Arcade game where player have to survive increasing waves of goblins in one attempt

❓Why does sound start playing after the first click and not when I open the page?❓

This happens because autoplaying sounds are blocked by the browser until the user interacts with the document.

Table of Contents

• Overview ✨
  • About
  • Features
  • Technologies
  • Setup
  • Acknowledgements
• Details 📜
  • User interface
  • Project structure
  • Code organization

Overview ✨

About

Arcade game where player have to survive increasing waves of goblins in one attempt. It is an improved version of my old project from technical school. The game features improved visuals and sound, as well as achievements and a credits section.

Check out the live version of this project.

Technologies

Languages:

• HTML
• CSS
• JS

Libraries:

• SCSS
• FontAwesome 6.2.1
• GoogleFonts

Programs:

• VSCode
• Prepros
• PowerToys
• ShareX
• GIMP

Features

• Nice and consistent UI
• Animated menu background
• Achievements with three levels of completion
• Well-designed credits view
• Increasingly larger and faster waves of goblins
• Tracking and saving survived waves, defeated goblins, and time spent in the game
• Game over screen and the ability to restart without reloading the page
• Mute/unmute sound option

Note

Room for improvements:

• Choosing the hero appearance for achievements
• Fixing fps problem (game gets faster or slower depending on device framerate)

Setup

Ways to run this program:

1. Use the live demo
2. Download this repo and run index.html file
3. Download this repo and start live server (VSCode LiveServer Extension, Prepros preview etc.)

To edit this program:

• Download this repo
• Install Prepros
• Add this project in Prepros
• Start coding

Acknowledgements

Images

• Menu background
• Achievement ribbon
• Achievement star
• Game background
• Game background floor
• Hero sprite
• Goblin sprite
• Favicon

Music and sounds

• Menu music
• Menu option select
• Game music 1
• Game music 2
• Game music 3
• Game over music
• Goblin death

Details 📜

User interface

Main menu

Main menu has:

• Animated snow background
• Mute/unmute sound button
• Three options too choose:
  • Start option will hide the menu and runs the game
  • Achievements option will show the achievements view
  • Credits option will show the credits view

---

Achievements

Achievements view shows achievements, each of which has:

• Title ribbon
• Three stars that indicate completion of a given level
• Target text with current value of achievement and required value for next level (if it's not already max level)
• Progress bar

Achievements has 3 levels to complete and 4 possible stages:

• Stage 0:
  • Gray border
  • Disabled all stars
  • Progess bar empty or bronze color (going to bronze level)
• Stage 1:
  • Bronze border
  • Bronze star lighted up
  • Silver progess bar color (going to silver level)
• Stage 2:
  • Silver border
  • Silver and bronze stars lighted up
  • Gold progess bar color (going to gold level)
• Stage 3:
  • Gold border
  • All stars lighted up
  • Gold progess bar color (gold level is max and it is completed)

---

Credits

Credits page contains 2 sections with links for resources used in the project, button for contact form and link to my portfolio.

A contact form is provided as a Google Forms iframe because it’s the best free solution I could think of.

Users must provide:

• Purpose of contact
• Message
• Captcha code

Users can optionally provide:

• Rating of the project
• E-mail - in case a response is needed
• Name - to address them properly in case of a follow-up

---

Game

At the top of the game view are wave and killed goblins counters and at the bottom is an instruction on what keys are used to play the game.

The way the game works is simple:

• Player is standing in the middle
• Game generates random waves of goblins which runs towards the player
• Player has to use keys A and D to face left or right direction
• If player is facing goblin direction, he will kill the goblin, otherwise player will lose
• When player clears a wave, new one is generated with more goblins that are faster

---

Game over

Game over view displays survived waves, killed goblins and button that goes back to main menu

Project structure

• 📁 GoblinSlayer (project folder)
  • 📄 github and prepros config
  • 📄 readme file
  • 📄 index.html file
  • 📁 _for_readme - 📄 files for readme
  • 📁 Images - 📄 images used in the project
  • 📁 Sound - 📄 sounds and music used in project
  • 📁 Scripts - 📄 scripts used in project
  • 📁 Styles
    • 📄 css files compiled from scss by prepros
    • 📁 scss - 📄 sccs files

Code organization

Warning

Classes must be loaded from bottom to the top to avoid situation when class does not exist in the time of its objects creation

Menu is entry of the program.

Menu creates and manages one instance of each of the classes:

• SnowyBackground
• Game
• Achievements
• Credits

Game class creates and manages:

• One instance of Hero class
• Many instances of Goblin class