Assignment 3: Adventure Game

Due: Tuesday, 9/29/26, before class.

Goal

Build a small text-based adventure game: a world made of rooms that the player can walk around in. Everything the player sees should be generated by JavaScript from data you write (objects and arrays) and rendered onto the page, exactly the way the in-class Adventure Game Demo does it, just with a bigger world and your own writing.

The core of this assignment is the demo's pattern, plus at least one of the Challenges at the bottom of this page. The requirements get you a working game; the challenges are where you push past what the demo handed you, so a top grade means several of them, done well. One rock-solid challenge beats three half-finished ones.

This assignment intentionally restricts you to a small, specific toolbox (below). The point isn't necessarily the game itself; it's leaving this assignment able to understand everything in the toolbox. A flashier game built with tools outside the list is not what I am looking for.

Requirements

1. A world of rooms
   One JavaScript object, keyed by room id, holding at least 4 rooms. Each room needs a name, a description, and a linkedRooms array holding the ids of the rooms you can travel to from there. Rooms should connect in both directions, so the player can never get stuck in a dead end.
2. One render function
   A single function that takes a room object and draws it: a heading for the name, a paragraph for the description, and one button per linked room. Everything is built with createElement and append into one container div. There should be no room content typed into your HTML file.
3. Working navigation
   Clicking an exit button moves the player to that room. Use addEventListener with a "click" handler, and figure out which room was picked from e.target, like the demo does. Keep track of which room the player is currently in with a variable.
4. Styling
   Box model (padding, margin, border, border-radius), flexbox for layout, and consider using :hover on buttons, all in style.css.
5. At least one challenge
   Pick one from the Challenges list below and build it into your game. One is the minimum for a complete assignment. Doing several is what separates a good submission from a top one.

Allowed Tools

This assignment is graded partly on staying inside this list. It is, on purpose, just about exactly what the demo uses.

• HTML: div, span, h1–h3, p, ul/li, button.
• CSS: element/class/id selectors, :hover. Box model, flexbox, typography, color properties. No transition, animation, transform, or position.
• Variables: let and const only.
• Loops: classic for with an index only. No for...of, no .forEach.
• Functions: the function keyword only. No arrow functions.
• Array methods: none needed for the requirements. Loop over an array with a for loop.
• DOM selection: document.querySelector() only (not querySelectorAll).
• DOM creation: document.createElement(), .append().
• Content: .innerHTML, including = "" to clear a container before rebuilding it.
• Events: addEventListener, only with "click".

Challenges

You must complete at least one of these. Which one is up to you, and they're in no particular order, so pick whatever sounds fun for the game you're building. Each one goes past what the demo showed you, so expect to work something out on your own. We'll cover all of them in class before long.

One challenge, finished and working, is a complete assignment. Getting into the top of the grade range means several of them, integrated into the game rather than bolted on the side. Quality counts more than count here: two challenges that genuinely work beat four that are half-wired.

• Nicer exit labels
  The demo puts the raw room id on the button (classRoom). Make each exit an object like { label: "Go to class", destination: "classRoom" } so the button can say something readable while still knowing where it leads.
• An inventory
  An array, starting empty, that items get pushed into when picked up. Display the current inventory as a list, re-rendered from the array whenever it changes.
• Usable items
  Make the items in the inventory list clickable. Clicking one "uses" it, and if that item has an effect, show what happens by updating the current room's description text.
• A lock that needs an item to open
  An exit, room, or object that's inaccessible until the player has a specific item. Check this with a plain for loop scanning the inventory array, not .includes(). When the condition is met, use classList to reveal the exit or remove a "locked" indicator.
• A lock that needs a conversation
  A lock that opens not from an item, but from talking to an NPC. For example, a flag that only becomes true once the player has clicked through all of that NPC's lines.
• A hidden password
  Somewhere in the game (in an item's description, in something an NPC says, wherever you like) reveal a password string. Add an <input type="text"> and a button (no <form>). Clicking the button compares input.value to the expected password and reports whether it's correct. Getting it right unlocks or reveals something, which can be your "ending." The Buttons and Input Demo from class shows this.
• A mouseover interaction
  Hovering over something does something useful in JavaScript. For example, hovering an inventory item could show its description in a status area. (This is separate from CSS :hover.)

Challenges are the one place you may reach past the Allowed Tools list, but only for what they actually need: .push(), .value, input type="text", classList, and "mouseover" listeners. Everything else still applies: let/const, classic for loops, the function keyword, and no libraries.

A Note on Generative AI

Do not use ChatGPT, Copilot, Claude, or any other generative AI tool to write any part of this assignment. The whole point of the restricted toolbox above is to build real fluency with these exact foundational aspects of front end programming. We'll get to fancy stuff soon enough.

File and Folder Setup

Same rules as before: folder and file names must match exactly. This assignment needs three files, all inside a new 03-adventure-game folder:

csc336-fall2026/
└── assignments/
    └── 03-adventure-game/
        ├── index.html
        ├── style.css
        └── script.js

Once pushed, your assignment will be visible at:
https://<your-username>.github.io/csc336-fall2026/assignments/03-adventure-game/

Helpful Resources

• Adventure Game Demo (source) is the in-class starting point for this assignment. It has the rooms object, the render function, and navigation buttons that look up the next room from the button that was clicked. Read the comments in the source; the requirements above are this demo plus a bigger world.
• Buttons and Input Demo (source) builds a row of buttons from an array, has all of them share one click handler that uses e.target to tell them apart, and reads a text input's .value at the moment of the click. The first two are the exit buttons in your game; the third is what the password challenge needs.
• Building Elements with JavaScript (source) — the in-class example of taking data (an array of objects) and turning it into DOM elements with createElement and append, the same pattern you'll use to render rooms and inventory.

What to Submit

Nothing to submit directly. Your assignment should be publicly available at the address in File and Folder Setup above once you've committed and pushed.