Instructions:

Let's make the game have a starting key action. We will have the images loaded first and a gameOn variable and spacebar event to start the game. Copy and paste this first block of code AROUND the for loop that loads the starArray[i] with the curly brace at the end. Carefully make sure the braces are all accurate and you should indent the for loop now. The second block of code goes into the for loop to draw the stars on before the game starts.

    var starx=stary=20;
    var s = new Image();
    s.src="images/star.png";
    s.onload = function () {
      // you for loop in here!!!!

    }

        // (in the for loop) draw the images before we start.
            // draw the stars to start.
            ctx.drawImage(this,w/2,i*h/starCount+10,starx,stary);

           

Instructions:

First add the gameOn variable assingment below our load images block of code near the top of the file. Next, we will want to add a keyboard event to start the game. Add the if statement to the 'addEventListener (keydown).' Finally, add the second if statement to replace our animation frame request.

    // load variables that are global
    var gameOn=false;

        // start the game with keyboard command
        if (e.keyCode == 32) {
            main();// (key: space bar to start game)
            gameOn = 1;
        }//end if


        if (gameOn==1) {requestAnimationFrame(main)}