GoblinSlayer Readme

❓Why sounds starts playing after first click and not when I open the page❓

It's because auto playing sounds is blocked by browser until the user interact with the document.

❓Why my commits often have no names and I'm not using branches❓

• I often create with bursts many things at once
• I don't plan things ahead, I just create things that seems good at that moment
• Sometimes I have bad internet connection and it is troublesome to send commits
• I'm coding alone so creating branches and describing commits is not useful for me

Table of Contents

• Informations
  • Technologies
  • Features
  • Setup
  • Acknowledgements
• Details
  • User interface
  • Project structure
  • Code organization

Informations

Arcade game where player have to survive increasing waves of goblins in one attempt.
See the live demo.

---

Technologies

Languages:

• HTML
• SCSS
• JS

Libraries:

• FontAwesome 6.2.1
• GoogleFonts

Programs:

• VSCode
• Prepros (auto preview, processing scss)

---

Features

• Nice and consistent UI
• Animated menu background
• Achievements with 3 levels of completion
• Good looking credits view
• Generating increasingly larger and faster waves of goblins
• Counting and saving survived waves, killed goblins and time spent in game
• Game over screen and game restart without reloading the page
• Mute/unmute the sound

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

Music and sounds

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

Details

This section is a general description of the project required to understand how it works, the exact details are in the code or simply are the code.

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 and link to my github

---

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

The project directory tree looks like this:

• 📁 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