<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>
  <script src="sketch.js"></script> 
  <title>Rocket</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
//Click on mouse to start!
  </body>
</html>
 let x = 200; // Starting x-position of the spaceship

    function setup() {
      createCanvas(400, 400);
      noLoop(); // Start with no animation
    }

    function draw() {
      background(0); 

      // Spaceship
      fill(255, 200, 255); 
      ellipse(x, 200, 80, 20); // Main body
      rect(x - 45, 185, 15, 13); // Left fin
      rect(x - 45, 201, 15, 13); // Right fin
      x += 5; // Move the spaceship to the right

      // Wrap around the screen
      if (x > width) { 
        x = -80; // Adjusted reset value
      }

      // Moon
      fill(255, 255, 255);
      ellipse(100, 100, 70, 70);

      // Stars
      fill(255, 255, 255);
      ellipse(140, 140, 5, 5);
      ellipse(240, 230, 5, 5);
      ellipse(280, 170, 5, 5);
      ellipse(120, 300, 5, 5);
      ellipse(320, 100, 5, 5);
      ellipse(300, 300, 5, 5);
      ellipse(75, 320, 5, 5);
      ellipse(250, 60, 5, 5);
      ellipse(200, 378, 5, 5);
    }

    function mousePressed() {
      if (isLooping()) {
        noLoop(); // Stop animation
      } else {
        loop(); // Start animation
      }
    }

    function keyPressed() {
      redraw(); // Redraw the scene
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.