Dragon Slayer RPG Technical Document

Dragon Slayer RPG is a text-based role-playing game where the player can go to different locations, purchase items, fight monsters, and collect resources like gold and experience points (XP). The main objective is to become strong enough to defeat the dragon to win the game. Dragon Slayer RPG is built using HTML, CSS, and JavaScript. I created this game as part of FreeCodeCamp’s JavaScript Course, based on their Dragon Repeller certification project. Link to live version of game (Netlify): https://rpg-dragon-slayer.netlify.app/

# HTML Structure

The HTML file defines the structure of the game, including the game area, stats, controls, and various sections to display information dynamically.

Elements

• Game Container (#game): Main container for the game.
• Stats (#stats): Displays the player's XP, health, and gold.
• Controls (#controls): Buttons for navigating different actions/locations.
• Monster Stats (#monsterStats): Displays the monster's name and health when fighting.
• Text Display (#text): Shows the game narrative and updates based on player actions.

CSS Styling

The CSS file (styles.css) defines the visual appearance of the game, including colors, fonts, and layout.

Styling Highlights

• Body: Dark background color to create a contrasting game area.
• Game Container (#game): Centered container with white background.
• Controls and Stats: Bordered sections to visually separate them from the game narrative (textbox).
• Buttons: Styled with a gradient background and border to make them visually appealing and interactive.

JavaScript Functionality

The JavaScript file (script.js) contains the game logic, including event handlers for buttons, game state management, and updates to the game display.

Game Variables

The let keyword is used to assign the variables in Dragon Slayer RPG because the values are dynamically reassigned as the game goes on.

Element Selectors

Game Data

Weapons

Monsters

Locations

Arrays that contain elements specific for each location.

Functions

Navigation and Updates

Function for navigating between locations (town square, shop, cave, dragon).

Shop Functions

Functions for buying health in the shop.

Function for buying weapons in the shop.

Function for selling weapons in the shop; available only if player has bought the most powerful weapon.

Combat Functions

Function for initializing combat sequences with monsters.

Functions for calculating if player attack hits monster and the amount of damage dealt based on currently equipped weapon.

Function for calculating monster’s attack damage based on their level.

Function for determining if monster is hit and damaged by player attack.

Function for evading a monster attack when choosing the “Dodge” button.

Function for calculating gold and XP rewards from defeating a monster.

Functions that updated player location when winning or losing a fight.

If the player reaches zero Health, the game ends with a “You die” text message and the only buttons available are bound to the restart function.

If the player defeats the dragon, the game ends with the message "You defeat the dragon! YOU WIN THE GAME”. All the buttons available will then be bound to the restart function.

Utility Functions

Function for resetting the game to their default values.

Functions for initializing the secret (easter egg) event where the player can either win gold or lose health.

The easter egg activates when you select one of the three “Return to town” buttons after defeating a monster. You will get to choose between two numbers, each one giving you either (a) 20 gold or (b) -10 health points. If you have exactly 10 health and receive the 10 damage from the easter egg, death condition applies and you lose. Otherwise, the game continues as usual.