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.