Adventure Game

by damianstewart41 in Design > Game Design

42 Views, 0 Favorites, 0 Comments

Adventure Game

Screenshot 2026-05-06 at 12.13.30 PM.png

This project is a simple browser-based text adventure game made with:

  1. HTML → structure
  2. CSS → styling
  3. JavaScript → game logic

for a way more in-depth tutorial please visit https://www.youtube.com/watch?v=R1S_NhKkvGA

Supplies

IMG_1564.jpeg
IMG_1565.jpeg

you will need a laptop and a code editor like Visual Studio Code

Making a Folder

Screenshot 2026-05-06 at 12.33.29 PM.png
Screenshot 2026-05-06 at 12.36.09 PM.png
Screenshot 2026-05-06 at 12.38.33 PM.png

Make a folder called what ever you want just make it memorable in case you have a lot of folders


after doing this open said folder in your chosen editor for my purpose I will be using VScode(Visual Studio Code)


Inside it, create these files by pressing the little page icon:

index.html

style.css

game.js

Build the HTML Structure

Screenshot 2026-05-06 at 11.35.21 AM.png


The HTML creates:

  1. The game container
  2. Title
  3. Timer
  4. Inventory
  5. Story text
  6. Option buttons

Example structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script defer src="game.js"></script>
<title>An Adventure</title>
</head>
<body>
<div class="container">
<div id="secret-area"></div>
<h1>An Adventure</h1>
<div id="timer">0.00s</div>
<div id="lastTime">Last: --</div>
<div id="inventory"></div>
<div id="text">Text</div>
<div id="option-buttons" class="btn-grid">
<button class="btn">Option 1</button>
<button class="btn">Option 2</button>
<button class="btn">Option 3</button>
<button class="btn">Option 4</button>
</div>
</div>
</body>
</html>


What each section does:


.container

Holds the whole game

#timer

Shows how long the player takes

#lastTime

Shows previous time

#inventory

Displays collected items

#text

Displays story text

.btn-grid

Holds the option buttons

#secret-area

Hidden clickable area for secrets

Style the Game With CSS

Screenshot 2026-05-06 at 11.35.26 AM.png
Screenshot 2026-05-06 at 11.37.38 AM.png

Your CSS handles:

  1. Centering the game
  2. Styling buttons
  3. Fade-in text effect
  4. Background images
  5. Inventory display

Main styling ideas:

Center the game

body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}

This keeps the game perfectly centered.



Style the container

.container {
width: 800px;
max-width: 80%;
background-color: white;
padding: 10px;
border-radius: 5px;
}

This creates the white game box.



Create the button grid

.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
}

This makes a 2-column layout for choices.



Button hover effect

.btn:hover {
border-color: black;
}

This changes the border when hovering.



Fade-in story text

#text {
opacity: 0;
transition: opacity .3s;
}
#text.show {
opacity: 1;
}

Add JavaScript Game Logic

Screenshot 2026-05-06 at 11.44.05 AM.png
Screenshot 2026-05-06 at 11.44.12 AM.png

The JavaScript controls:

  1. Story progression
  2. Button choices
  3. Inventory system
  4. Timer
  5. Background changes
  6. Hidden secrets

Basic setup:

const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')

Create Story Nodes

FMCH07YMOKJPRO3.png
FLX3V9PMOKJPRNT.png
Screenshot 2026-05-06 at 11.44.21 AM.png
Screenshot 2026-05-06 at 11.44.28 AM.png

A text adventure usually uses story nodes.

Example:

const storyNodes = [
{
id: 1,
text: 'You wake up in a forest.',
options: [
{
text: 'Go north',
nextText: 2
},
{
text: 'Go south',
nextText: 3
}
]
}
]

Each node contains:

Property

Meaning

id

Unique story section

text

Story displayed to player

options

Buttons player can click

nextText

Next story node