M. C updated

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>MOON LANDING</title>
</head>

<body>
    <canvas id="canvas1" width="640" height="480" style="border: 1px solid black; position:absolute; left:0; top 0; z-index: 1,"></canvas>

    <canvas id="canvas2" width="640" height="480" style="border: 1px solid black;position: absolute; left: 0; top 0; z-index: 2;"></canvas>

    <canvas id="canvas3" width="640" height="480" style="border: 1px solid black;position: absolute; left: 0; top 0; z-index: 4;"></canvas>

    <canvas id="canvas4" width="640" height="480" style="border: 1px solid black;position: absolute; left: 0; top 0; z-index: 3;"></canvas>

    <canvas id="canvas5" width="640" height="480" style="border: 1px solid black;position: absolute; left: 0; top 0; z-index: 4;"></canvas>
<script>

var layer1 = document.getElementById("canvas1");
var dt1 = layer1.getContext("2d");
var layer2 = document.getElementById("canvas2");
var dt2 = layer2.getContext("2d");
var layer3 = document.getElementById("canvas3");
var dt3 = layer3.getContext("2d");
var layer4 = document.getElementById("canvas4");
var dt4 = layer4.getContext("2d");
var layer5 = document.getElementById("canvas5");
var dt5 = layer5.getContext("2d");
   /*
   alert("You are about to witness a moon landing created by Matthew Grech!")
    var rc= (prompt("First, lets chose the colour of the rocket that will appear! Pick from this list of avalible paint jobs." +  "1 = Red"+ ", 2 = Blue" + ", 3 = Purple" + ", 4 = White"))
    alert("Great choice! See you on the moon with a" + rc + "spaceship flying above!")

    if (rc==="1")
    {
        var spaceship="red"
    }

    else if (rc==="2")
    {
        var spaceship="blue"
    }

    else if (rc==="3")
    {
        var spaceship="purple"
    }

    else if (rc==="4")
    {
        var spaceship="white"
    }

    else
        {
            alert("Sorry! We seem to be out of that paint. I'll fix you up with a fresh red paint job!")
        }
        */
    //black background
    dt1.fillStyle = "black";
    dt1.fillRect(0, 0, 640, 480);

   //draw moon
    dt1.fillStyle = "rgb(64, 64, 64)";
    dt1.beginPath()
    dt1.arc(320, 980, 600, 0, Math.PI/1, true)
    dt1.stroke()
    dt1.fill()
    //draw details of moon
    dt1.strokeStyle="rgb(179, 179, 179)"
    dt1.fillStyle="rgb(179, 179, 179)"
    dt1.beginPath()
    dt1.arc(300, 460, 20, 0, 2*Math.PI);
    dt1.stroke();
    dt1.fill();

    dt1.strokeStyle="rgb(179, 179, 179)"
    dt1.fillStyle="rgb(179, 179, 179)"
    dt1.beginPath()
    dt1.arc(200, 420, 23, 0, 2*Math.PI);
    dt1.stroke();
    dt1.fill();

    dt1.strokeStyle="rgb(179, 179, 179)"
    dt1.fillStyle="rgb(179, 179, 179)"
    dt1.beginPath()
    dt1.arc(500, 450, 17, 0, 2*Math.PI);
    dt1.stroke();
    dt1.fill();

    dt1.strokeStyle="rgb(179, 179, 179)"
    dt1.fillStyle="rgb(179, 179, 179)"
    dt1.beginPath()
    dt1.arc(100, 460, 13, 0, 2*Math.PI);
    dt1.stroke();
    dt1.fill();

    dt1.strokeStyle="rgb(179, 179, 179)"
    dt1.fillStyle="rgb(179, 179, 179)"
    dt1.beginPath()
    dt1.arc(400, 430, 30, 0, 2*Math.PI);
    dt1.stroke();
    dt1.fill();

    //star input
document.addEventListener("click", runFunc);

 //fuction for stars
function runFunc()
{
  dt2.clearRect(0, 0, canvas2.width, canvas2.height)

    for(var i = 1; i <= 40; i++)//number of stars that appear on canvas
 {
     star (Math.floor(Math.random()*640), (Math.random()*200)); //positioning of stars
 }

}

   //drawing the stars
   function star(xPos, yPos)
   {
   dt2.strokeStyle = "black";
   dt2.fillStyle = "yellow";
   dt2.lineJoin = "miter";
   dt2.beginPath();
   dt2.moveTo(xPos,yPos);
   dt2.lineTo(xPos+5,yPos+10);
   dt2.lineTo(xPos+15,yPos+10);
   dt2.lineTo(xPos+7,yPos+15);
   dt2.lineTo(xPos+10,yPos+23);
   dt2.lineTo(xPos,yPos+19);
   dt2.lineTo(xPos-10,yPos+23);
   dt2.lineTo(xPos-7,yPos+15);
   dt2.lineTo(xPos-15,yPos+10);
   dt2.lineTo(xPos-5,yPos+10);
   dt2.lineTo(xPos,yPos);
   dt2.stroke();
   dt2.closePath()
   dt2.fill()
   }

//animation of spaceship
var rectXPos = 0;
var speed = 5;
var y = 50

setInterval(draw, 30);

//draws the spaceship and the trail behind it
function draw()
{
   spaceship();
   trail()
}

    //function for spaceship
function spaceship()
{

    //body of spaceship
   dt3.clearRect(0, 0, layer3.width, layer3.height);
   dt3.fillStyle = 'red';
   dt3.strokeStyle = "black";
   dt3.fillRect(rectXPos, y, 75, 50);
   dt3.strokeRect(rectXPos, y, 75, 50);

    //upper wing
    dt3.strokeStyle = "darkRed";
    dt3.fillStyle = "darkRed"
    dt3.lineWidth = 5;
    dt3.beginPath();
    dt3.moveTo(rectXPos, y);
    dt3.quadraticCurveTo(rectXPos-30, y-40, rectXPos+80, y);
    dt3.stroke();
    dt3.fill();

   //lower wing
    dt3.strokeStyle = "darkRed";
    dt3.fillStyle = "darkRed"
    dt3.lineWidth = 5;
    dt3.beginPath();
    dt3.moveTo(rectXPos+80, y+50);
    dt3.quadraticCurveTo(rectXPos-30, y+100, rectXPos, y+50);
    dt3.stroke();
    dt3.fill();

   //window
    dt3.fillStyle= "white"
    dt3.beginPath();
    dt3.arc(rectXPos+30, y+20, 4, 0, 2*Math.PI);
    dt3.stroke();
    dt3.fill();

    rectXPos = rectXPos + speed;


   //keeps spaceship from going off canvas and never coming back
   if (rectXPos <0 || rectXPos >640)
        {
            rectXPos = 0;
            y=Math.random()*410+1
            dt5.clearRect(0, 0, canvas5.width, canvas5.height)
        }

}


    //input to cause particles to activate is a mouse move
   document.addEventListener("mousemove", runFunc1);


function runFunc1()
{
    dt4.clearRect(0, 0, canvas4.width, canvas4.height)//clears canvas

    for(var i = 1; i <= 60; i++)//counts number of particles on canvas
 {
     particle (Math.floor(Math.random()*640), (Math.random()*250) +25);//postions particles
 }
}


   function particle(xPos, yPos)

   {
       dt4.fillStyle = "white"
       dt4.beginPath();
       dt4.arc(xPos, yPos, 2, 0, 2*Math.PI);
       dt4.fill();
   }

   function trail()
    {
   dt5.fillStyle = "#ffffff";
   dt5.fillRect(rectXPos, y+20, 5, 5);
   dt5.fillRect(rectXPos, y+40, 5, 5);
   dt5.fillStyle = "red";
   dt5.fillRect(rectXPos, y+30, 5, 5);
   dt5.fillRect(rectXPos, y+10, 5, 5);
        rectXPos = rectXPos +speed;
    }


</script>

</body>

</html>