HTML and CSS Reference
In-Depth Information
Mission checklist
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:
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:
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
:
<!DOCTYPE html>
<html lang='en'>
