Spelchan.com Logo

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

Chapter 3.15: Christmas Total Conversion

As this chapter was being released on my site over the winter holidays, I decided I would do a total conversion. This simply replaces all the images with new images related to a different story but the gameplay remains the same. I opted to generate different images for each room in the game so that it is easier for a player to recognize that they are somewhere they have already been. The story for the Christmas version keeps the shooting aspect of the game by changing the arrow to a cupid arrow and resolving the story around this fact. Here is the story for the conversion:

“You have been bad so know that you will not be getting a present from Santa without magical intervention. Thankfully, you were able to steal one of cupid’s arrows, so now all you need to do is to shoot Santa with that arrow, but must do so at a distance so he doesn't see you doing so.

Hunt the Santa icon

Move through the caverns by clicking on the move buttons. When you think you know where Santa is, fire your arrow at the passage you suspect it lies. You only have one shot so shoot wisely. Also be careful as the elves have created a teleportation system that will sent you to a different part of the north pole, and Krampus has been seen visiting Santa recently.”

The teleporter stays the same, but instead of slime, I have Krampus.

Overall, this is a simple project, especially compared to some of the later projects we will be doing in later chapters. At this point you are probably ready for something a bit more complicated, so in the next chapter we will get into scripting where we will be able to add more interactivity to our projects.

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
Webbus Solution
END of Chapter
Table of Contents