Instructions:

It is time to add scoring. In class we have worked with collisions. The first block of code is our current collisions test (using distance formula), but now we will call out a scoring function. Compare your collisions to the one below and be sure you have the new scoring function called out. The second block is our scoring function. You can this next to the current playerUpdate or starsUpdate functions. YOU NEED to add p1Score and p2Score to your global variable list! Notice the score does not work properly. How can you make the star stop adding to the score?

// checking for collisions!!!
            var d1=Math.sqrt(Math.pow(p1x-starArray[i]._x,2)+Math.pow(p1y-starArray[i]._y,2));
            var d2=Math.sqrt(Math.pow(p2x-starArray[i]._x,2)+Math.pow(p2y-starArray[i]._y,2));
            if (d1<20) {scoring(i,1)}
            if (d2<20) {scoring(i,2)}

 //  scoring functions to place and score stars
    function scoring(k,wp) {
        starArray[k]._visible=false;
        if (wp==1) {
            // need to place a small star next to player 1 score
            p1Score++;
            $("#p1ScoreDisp").text(p1Score);
        }
        else if (wp==2) {
            p2Score++;
            $("#p2ScoreDisp").text(p2Score);
        }
    }
           

Instructions:

As you can see, we now are using jQuery in the new scoring function, so we need to add the script library link in the head of the HTML file. The second block is for the css file. Finally, you need a place to put the score. Copy and paste the last block below your h2 header and above your canvas.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

        #leftSide {
            float:left;
            width: 100px;
            margin-left:40px;
        }
        #rightSide {
            float: right;
            width: 100px;
            margin-right:40px;
        }

    <p id="leftSide">Player 2: <span id="p1ScoreDisp">0</span></p>
    <p id="rightSide">Player 1: <span id="p2ScoreDisp">0</span></p>