forked from LaunchCodeEducation/DOM-and-Events-Studio
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
61 lines (51 loc) · 2.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<title>Flight Simulator</title>
<link rel = "stylesheet" type = "text/css" href = "styles.css" />
<script src = "scripts.js"></script>
</head>
<body>
<div class="centered">
<h1>Flight Simulator</h1>
<h2>Current Flight Status</h2>
<p id = "flightStatus">Space shuttle ready for takeoff</p>
<h2>Shuttle Trajectory</h2>
</div>
<div id="flightDisplay">
<div class="center-block">
<h3>Fuel Levels</h3>
<p>Tank Full</p>
<h3>Astronaut Chat</h3>
<p>Houston, we are ready when you are!</p>
</div>
<div id = "shuttleBackground">
<img src = "LaunchCode_rocketline_white.png" height = "75" width = "75" id = "rocket"/>
</div>
<div class="center-block">
<button id="up">Up</button>
<button id="down">Down</button>
<button id="right">Right</button>
<button id="left">Left</button>
<h3>Space Shuttle Height</h3>
<p id="spaceShuttleHeight">0</p><span> miles</span>
</div>
</div>
<div class="centered">
<button id = "takeoff">Take off</button>
<button id = "landing">Land</button>
<button id = "missionAbort">Abort Mission</button>
</div>
</body>
</html>
<!--
When you are moving the shuttle, you want to use absolute positioning in CSS. Absolute positioning means positioning the object based on its location in the parent object. In the case of our flight simulator, the parent object is a div with the id, shuttleBackground. Relative positioning means positioning the object based on its fellow child objects. We might use relative positioning if there were planet objects within our shuttleBackground div.
When setting the position of an object in CSS, you use a string that ends in "px". So the position of 10 pixels is "10px". To add a number of pixels to the position, you may first have to use parseInt to convert the current position to a number.
When the "Up", "Down", "Right", and "Left" buttons are clicked, the following should happen:
The rocket image should move 10 px in the direction of the button that was clicked.
If the "Up" or "Down" buttons were clicked, then the shuttle height should increase or decrease by 10,000 miles.
23.8.3. Bonus Mission
If you are done with the above and have some time left during class, there are a few problems that you can tackle for a bonus mission.
Keep the rocket from flying off of the background.
Return the rocket to its original position on the background when it has been landed or the mission was aborted.
-->