<title>Rocket Launch</title>

<h1>Rocket Launch</h1>

<!-- Create a button to launch the rocket -->
<button onclick="launch()">Launch Rocket</button>

<!-- Create an image to represent the rocket -->
<img id="rocket" src="rocket.png" width="100px" height="100px">

<!-- Add some JavaScript to make the rocket move -->
<script type="text/javascript">
  function launch() {   // Function to move the rocket when button is clicked. 

    // Get the current position of the rocket. 
    var pos = 0;  

    // Set an interval to move the rocket 10 pixels at a time. 
    var id = setInterval(frame, 10);  

    function frame() {   // Function that moves the rocket 10 pixels each time it's called. 

      if (pos == 350) { // Stop moving when we reach 350 pixels from left of window. 

        clearInterval(id);   // Clear our interval when done moving. 

      } else {   // Otherwise, keep moving by incrementing position by 10 pixels each time it's called. 

        pos++;  
        document.getElementById("rocket").style.left = pos + 'px';   // Update left property of element with ID "rocket".     }     }     </script>     </body></html