HTML and CSS Reference
We have a very similar project in Project 1 , Building a CSS Quest Game , with similar HTML
layout and scenes management logic.
Creating the game scenes
In this task, we kick-start the project with game scenes such as the menu, game, and game-over
condiion, deined in a game-low logic. We will also get these scenes linked together.
Prepare for lift off
We need to create a new directory for our new game project. Inside the project folder,
we have the following:
F An index.html file for the view
F A game.css file for the styling
F A directory named js for all the logic files
F A directory named images for all the game graphics
F Lastly, we need the following four images placed in the images folder:
First of all, we start at where the web browser begins loading our game, that is, the index.
html file, and perform the steps given as follows:
1. Put the following HTML code in the index.html file. Most of the tags and layout
codes are similar to the ones we saw in Project 1 , Building a CSS Quest Game :