Spelchan.com Logo

From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 3.13: Webbus Project

The project for chapter 3 is a clone of the classic text-based game Hunt the Wumpus. As with all projects in this book, the reference version that I create only uses the material and concepts that have been covered up to this point. As this chapter is the second programming-related chapter in the book, there is only the basics of HTML and CSS. This means we have to use multiple pages and interactivity is rather limited for now. Since we have not covered JavaScript or the more advanced features of CSS yet, we are very restricted with what we can accomplish. Just using links is surprisingly powerful, but as you add more states to a game the number of pages needed to be created blows up very quickly. This time we are trying to recreate a more ambitious game.

The evil Webbus, a terrifying silicon-based lifeform, has been eating local farmer’s cows and sheep. You have been sent into it’s cavern to hunt it down. Unfortunately, you somehow lost your quiver of arrows and only have a single arrow left. The cavern itself is made up of twisty passages between chambers so navigating is a bit tricky. Each cavern has three exits and as your arrow is a trick arrow, it can navigate the passage to hit a target. Rumors exist that in addition to the deadly Webbus, there are caverns that teleport you and deadly slime. Hopefully you will be able to pick up the warning signs and avoid these hazards.

Move through the caverns by clicking on the move buttons. When you think you know where the Webbus is, fire your arrow at the passage you suspect it lies. You only have one shot so shoot wisely.

For my version of the game, I went with the flattened dodecahedron that was used by the original version of the game, but you are welcome to design a map how you like. If you have not played my version of the game, you can play it at https://spelchan.com/books/FromScratchHTML/Chapter03/HuntWebbusCSS/index.html or can play the total conversion winter version of the game at https://spelchan.com/books/FromScratchHTML/Chapter03/HuntWebbusCSS/index.html where the rules are the same but the theme has changed to a Christmas theme.

While you could create artwork for each room in the game, I opted to go with just 4 room images which would be interspersed throughout the maze. This may not be the best approach, and for Hunt the Santa each room was made unique. Sadly, this has to be done manually, but later chapters will provide the tools to automate this.

Moving is easy enough once you have a map, and shooting can be thought of as a binary that only needs two pages. One for winning the game and the other for wandering through the caves without an arrow until caught by the Webbus.

Once you have finished the project, or if you run into issues, next chapter I will walk through my solution to the project.

Chapter contents

Chapter 3 Contents

3.1 CSS Basics Cheat Sheet

A cheat sheet covering the basics of CSS.

3.2 What is CSS

A brief look at what CSS is and how it came to be.

3.3 Setting up Style Sheets

A look at the three different ways to add style to your document.

3.4 Blocks, Spans, and Selectors

Setting the style for different types of elements.

3.5 Classes

An easy way of having multiple styles on the same element type and across different elements.

3.6 Colours

The use of named colors, the RGB color model, and creating RGB colors.

3.7 Hexadecimal color codes

Using hexadecimal color codes and other color models.

3.8 Fonts

Controlling what text looks like.

3.9 Box Model

The box model controls how elements are positioned within their layout box.

3.10 Link styles

Anchor element states and turning a link into a button.

Christmas Bonus

Hunt the Santa logo
A total conversion of Hunt the Webbus with a Christmas Theme.

3.11 Styling lists

Lists can have style applied to their layout, placement, and bullet.

3.12 Styling tables

Tables have a grid as well as rows and columns that can be controlled.

3.13 Webbus project

The project for this chapter is a variation of a classic text game

3.14 Webbus solution

My solution for the Webbus project

3.15 Christmas Total Conversion

Converting the Webbus game into a Christmas game.

← previous section
Styling Tables
next section →
Webbus Solution
Table of Contents