Spelchan.com Logo

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

Chapter 2.10: HTML Only Game Project

The project for chapter 2 is the game of NIM. 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 first programming-related chapter in the book, there is not much so the game is necessarily primitive. The game is rather ugly due to the lack of any CSS, and since we have not covered JavaScript 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. Still, creating a game with only HTML is possible.

NIM is an older game that is often used in math class to teach some logic skills. There are many variants of the game but for this version, your goal is to get the treasure chest. Each turn you must take at least 1 item but can take up to 3. The computer then gets its turn to do likewise. The winner is the player to grab the chest.

For my version of the game, I started with 21 items, which results in the creation of a lot of different pages. A smaller starting number such as 10, 14, 18 would probably be advisable as my 21 items was a bit too ambitious.

As this is a course on programming, not on artwork, feel free to use third-party artwork but do try to come up with a theme. My theme was gold coins and treasure chests. If you want, feel free to use my theme. My treasure chest was from https://publicdomainvectors.org/en/free-clipart/Treasure-chest-clip-art/56364.html while my coin artwork was a scaled down version of an image by Edurs34 found at https://pixabay.com/illustrations/gold-coin-currency-dobl%C3%B3n-4844191/.

My solution to this assignment is in the next section, but some hints:

  • Not all pages need to be created. Work out the pages using a page map or state diagram.
  • The computer always beating you is not fun so make sure that if you are using the optimum strategy that you have the computer make a mistake or two. I only used the optimum strategy when it was obvious to do so.
  • Remember that you can copy files. Start with one page then copy it to build all the other pages.
  • Unfortunately, because we are using HTML, the computer choice has to be static and pre-determined. Use of JavaScript would allow us to get past this limitation, but for now it is a restriction.


Chapter 2 Contents

2.1 HTML Basics Cheat Sheet

The cheat sheet for this chapter.

2.2 What is HTML

A brief history of HTML

2.3 Structure of a HTML Document

What makes up a HTML file

2.4 Tags and Elements

How tags are used to create HTML elements

2.5 Special Symbols

How to display things such as <, >, &, 😀

2.6 Links

Linking to other pages, other sites, and within the page

2.7 Images

Adding images and image maps to your page.

2.8 Lists

Ordered and unordered lists and nesting lists.

2.9 Tables

Tables with spanning rows and columns.

2.10 HTML Only Game Project

The game of NIM is the project for this chapter.

2.11 HTML Only Game Solution

How my solution to the NIM game was put together

Bonus article

Solving Nim.

← previous section
next section →
HTML Project Solution
Table of Contents