HTML and CSS Reference
In-Depth Information
• Step 5: Import existing SVG files via XLink.
• Step 6: Create the Game Over screen.
• Step 7: Configure the game's flexible
viewBox
.
Let's get started.
Step 1: Set up SVG tag basics
Open a simple text editor to create three files called index.html, style.css, and game.js, and
save them all to the same folder. In this section, we'll start populating the first two files.
Create a file called index.html in the root and paste
listing 7.2
into it. Inside the pasted
code you now have an
<svg>
tag that accepts parameters for
width
,
height
, and an
additional declaration for its viewing window called
viewBox
. We're going to hold off
configuring your
viewBox
, because you need some CSS for it to work.
