Creating the game scenes
In this task, we kick-start the project with game scenes such as the menu, game, and game-over condition, defined in a game-flow 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:
- An
index.html
file for the view - A
game.css
file for the styling - A directory named
js
for all the logic files - A directory named
images
for all the game graphics - Lastly, we need the following four images placed in the
images
folder:
Engage thrusters
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:
- 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:<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>...