Game Development Reference
In-Depth Information
<input id="track-name" type="text" placeholder="Track Name"/>
</form>
</section>
The second section element holds a form with a lot of buttons, with each button representing a brick. Later
these buttons will be used to select a specific brick type.
<section id="bricks-container">
<form>
<button id="square-brick">Square</button>
<button id="triangle-brick">Triangle</button>
<button id="circle-brick">Circle</button>
<button id="curve-brick">Curve</button>
</form>
</section>
And the last section will eventually hold all saved tracks.
<section id="tracks-container">
<h1>Saved Tracks</h1>
</section>
When we are done with the first three steps, our
index.html
should look like the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create, Save and Load Tracks</title>
</head>
<body>
<section id="grid-container">
<canvas id="grid"></canvas>
<form>
<button id="clear-track">Clear</button>
<button id="save-track">Save</button>
<input id="track-name" type="text" placeholder="Track Name"/>
</form>
</section>
<section id="bricks-container">
<form>
<button id="square-brick">Square</button>
<button id="triangle-brick">Triangle</button>
<button id="circle-brick">Circle</button>
<button id="curve-brick">Curve</button>
</form>
</section>
<section id="tracks-container">
<h1>Saved Tracks</h1>
</section>
</body>
</html>
