newnew

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

    <meta charset="utf-8">

    <title>Space Ship Culminating Activity</title>

</head>

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

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

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

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

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

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

<body>

<script>
  //these variables are helping setup my canvas' so i can easily draw on them
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");

var layer6 = document.getElementById("canvas6");
var dt6 = layer6.getContext("2d");

    //this is declaring some od the variables for  the rocketship
    var xPos1 = 0;
    var yPos1 = Math.floor(Math.random()*300);
    var speed = 6;

    //this is colouring the backround of space black
 dt1.fillStyle = "#000000";
 dt1.fillRect(0, 0, layer1.width, layer1.height);


    //this is the greeting alert
   alert("Greetings visitor! This program was written on Monday January 14th, 2019 (earth years) by Mitchell Palermo, a student of Mrs.Ostapiak class. As a part of their culminating activity they had to program a sceen from space with moving objects and other things of the sort. Prepare for an out of this world experience as Mitchell combines all of the lessons and activities from this semester into one final program! However first you must answer a few questions... ")

    //this section asks which galaxy colour the user wants to go to, this determines the colour of the stars
    var galaxyChoice = parseFloat(prompt("Where would you like to travel? Please enter the value associated with the galaxy which you would like to travel to."+"\n 1 = Red Galaxy      3 = Green Galaxy\n 2 = Blue Galaxy      4 = Purple Galaxy"));

    //this program below processes the users choice, assigns the colour of choice to the variable galaxyColour and outputs a comment
    if ( galaxyChoice === 1)
        {// this alert is for when you chose option 1
            alert("Red Galaxy, Good choice!\n you can also move the mouse around to find the black hole!");
            var galaxyColour = "#ff0000";
            galaxyName = "Green Galaxy";
            galaxyName = "Cosmos Redshift 7 galaxy!";
            runFunc1()
        }
     else if (galaxyChoice === 2)
        {// this alert is for when you chose option 2
            alert("Blue Galaxy, My favorite!\n you can also move the mouse around to find the black hole!");
             galaxyColour = "#33ccff";
            galaxyName = "EGSY8P7 Galaxy!";
            runFunc1()
        }
     else if( galaxyChoice === 3)
        {// this alert is for when you chose option 3
            alert("Green Galaxy, Excellent choice!\n you can also move the mouse around to find the black hole!");
             galaxyColour = "#33cc33";
            galaxyName = "Centaurus A Galaxy!";
            runFunc1()
        }
     else if ( galaxyChoice === 4)
        {  // this alert is for when you chose option 4
            alert("Purple Galaxy, Great choice!\n you can also move the mouse around to find the black hole!");
             galaxyColour = "#9933ff";
            var galaxyName = "Messier 81 Galaxy!";
            runFunc1()
        }
  else
      {//this alert is for when you have enterd a invalid variable
          alert("sorry that galaxy is too far to travel to! stay in ours instead!\n you can also move the mouse around to find the black hole!");
            var galaxyColour = "#ffffff";
          galaxyName = "Milky Way Galaxy!";
      runFunc1()
      }


    //this listens for a click and calls a function if it detects one
     document.addEventListener("click",runFunc1);
 document.addEventListener("click",draw);

    //this is the fucntion called when a click is detected, it will clear the canvas and create loops to draw 30 stars and 8 planets
    function runFunc1()
 {

  //this clears the canvas'
 dt2.clearRect(0,0,canvas2.width,canvas2.height);
 dt4.clearRect(0,0,canvas4.width,canvas4.height);
     //loop for the stars
 for (var i = 1; i<=30;i++)
   {
           stars(Math.ceil(Math.random()*640),Math.floor(Math.random()*480))
   }

    //this loop is for the planets
   for (var e = 1; e<= 8;e++)
   {
           planets(Math.ceil(Math.random()*640),Math.floor(Math.random()*480),Math.floor(Math.random()*40))
   }
    //this calls the rocketship function alone with some parameters
   xPos1 = 0;
    yPos = Math.floor(Math.random()*300);

}
 //this function holds the code that makes the stars
 function stars(xPos, yPos)
 {

     //this draws the stars
   dt2.fillStyle = galaxyColour;
   dt2.beginPath();
   dt2.arc(xPos, yPos, 2, 0, 2*Math.PI);
   dt2.fill();


}

    //this function creates the planets
 function planets(xPos2,yPos2,size)
 {
     //this  creates the planets behind the rocket
     dt2.fillstyle = galaxyColour;
    dt2.beginPath();
    dt2.arc(xPos2, yPos2,size, 0, 2*Math.PI);
    dt2.fill();

     //this  creates the planets infront of the rocket
     dt4.fillStyle = galaxyColour;
   dt4.beginPath();
   dt4.arc(xPos2, yPos2, size, 0, 2*Math.PI);
   dt4.fill();
 }


  setInterval(rocketship, 30);
var xPos1=0;
var yPos1=Math.floor(Math.random()*480);
var speed =5;
//this function has the code that makes the rocketship
function draw()
{
   rocketship();
   trail();
}
   function rocketship()
{
  //this declares the speed of the rocket

   //this draws the top wing or red triangle on the rocket
  dt3.clearRect(0, 0, layer3.width, layer3.height);
   dt3.fillStyle = "red";
   dt3.beginPath();
   dt3.lineWidth = 1;
   dt3.moveTo(xPos1+20, yPos1);
   dt3.lineTo(xPos1-10, yPos1-17);
   dt3.lineTo(xPos1-10, yPos1);
   dt3.fill();

   //this draws the bottom wing or triangle on the rocket
   dt3.fillStyle = "red";
   dt3.beginPath();
   dt3.lineWidth = 1;
   dt3.moveTo(xPos1+20, yPos1+30);
   dt3.lineTo(xPos1-10, yPos1+47);
   dt3.lineTo(xPos1-10, yPos1);
   dt3.fill();

   //this draws the white rectangulary body of the rocket
   dt3.fillStyle = "#ffffff";
   dt3.beginPath();
   dt3.fillRect(xPos1-10, yPos1, 40, 30);
   dt3.fill();

   //this draws the tip of the rocketship
   dt3.fillstyle = "#ff0000";
   dt3.strokeStyle = "red"
   dt3.beginPath();
   dt3.lineWidth = 1;
   dt3.moveTo(xPos1+30, yPos1);
   dt3.lineTo(xPos1+50, yPos1+17);
   dt3.lineTo(xPos1+30, yPos1+30);
   dt3.closePath();
   dt3.fill();
   dt3.stroke();


  //this makes the rocket move across the screen
   xPos1 = xPos1 + speed;

  //this loop is for when the rocket crossses the edges of our canvas to turn around and start in a diffrent location
   if (xPos1 <0 || xPos1 >640)
        {
            //this resets the x and y positions of the rocket so it will reappear coming from left to right on the screen
            xPos1 = 0;
            yPos1 = (Math.floor(Math.random()*300));
            // this clears the previous trail left by the rocket and the stars then redraws the stars
            dt3.clearRect(0,0,canvas3.width,canvas3.height);
            runFunc1()
 }

}
    //this creates a black radial gradient starting in the middle of the canvas and expands outwards
 var radGrd = dt5.createRadialGradient(320, 250, 30, 350, 260, 300);
    radGrd.addColorStop(1,"#fff");
    radGrd.addColorStop(0,"#000");

    dt5.fillStyle = radGrd;
    dt5.fillRect(0,0,640,480);

    // this tracks where the mouse moves
 document.addEventListener("mousemove", lineDraw);

    // this clears the rest of layer five except what is inside the circle, the circle is attached to the mouse so whenyou move the mouse you can see a hidden "black hole" in the canvas
function lineDraw()
{
    dt5.clearRect(0,0,648,480);
    dt5.beginPath();
    dt5.arc(event.clientX,event.clientY,50,0,2*Math.PI);
    dt5.stroke();
    dt5.fill();
}
    setInterval(trail, 20);

    function trail()
    {
   dt4.fillStyle = "#ffffff";
   dt4.fillRect(xPos1-20, yPos1+20, 5, 5);

   dt4.fillStyle = "red";
   dt4.fillRect(xPos1-20, yPos1+30, 5, 5);
   dt4.fillRect(xPos1-20, yPos1+10, 5, 5);
    Pos1 = xPos1 + speed;
        if (xPos1 <0 || xPos1 > 639)
            {
                dt4.clearRect(0,0,canvas4.width,canvas4.height);
            }
    }


    //this  creates the rectangle that the words are printed on
   dt6.fillStyle = galaxyColour;
   dt6.beginPath();
   dt6.fillRect(460, 380, 200,30);
   dt6.fill();

    //this displays "welcome on the rectangle in the bottom right corner
    dt6.font = "6pt Verdana";
    dt6.fillStyle = "black";
    dt6.fillText("welcome",500,390);

    //this lets the user know what galaxy they are currently visiting in the bottom right box on the canvas
    dt6.font = "6pt Verdana";
    dt6.fillStyle = "black";
    dt6.fillText("you are in the:\n"+galaxyName+" ",470,400);


</script>
</body>

</html>