Instructions:

Use the block of code below to add to your scScripts.js file. This code will be the keyboard actions for the spaceship movements. Copy and paste this first block of code immediately after the closing curly brace of the starsUpdate function.

//Listens to app for keyboard actions
    addEventListener("keydown", function (e) {

        if (e.keyCode == 38) { //  (key: up arrow)
            p1y-=10;
        }
        if (e.keyCode == 40) { //  (key: down arrow)
            p1y+=10;
        }
        if (e.keyCode == 37) { //  (key: left arrow)
            p1x-=10;
        }
        if (e.keyCode == 39) { //  (key: right arrow)
            p1x+=10;
        }
    }, false);
           

Instructions:

Add the block of code below to create variables that hold the spaceship images. Place thie first three blocks of code near the star images creation statments. Place the last blocks inside the playerUpdate function.

    var ship1 = new Image();
    ship1.src="images/spaceship1.jpg"
    var ship2 = new Image();
    ship2.src="images/spaceship2.jpg"

    // using arrays to keep tract of star speeds and positions
    starSpeed = new Array(8,3);
    starPos = new Array();
    var starVisible = 1;

    // moving stars around the screen 
    var p1x=w/2+100, p1y=h/2, p2x=w/2-100, p2y=h/2;
    starPos[0] = starPos[1] = 10; //sx is not used and out, starPos array in

    // This next set of code should be in your starUpdate function
    // to move the stars around
        starPos[0]+=starSpeed[0];   //  adding speed array 
        starPos[1]+=starSpeed[1];   //      and switched sx to position array
        
    //  draw star on screen only if visible
        if (starVisible==1) {ctx.drawImage(starImg, starPos[0], starPos[1], 40, 40);}

    // draw player  (add a drawImage command here for your player)

    // keep star on the screen (use our tricks from last week to make if statements here)