NIIT HTML Q2 ACTIVITY BOOK CHAPTER 8 ~ niit post

Q2) You have been assigned a task to display the highest score of the game. This implies that even if the user closes the browser, the highest
    score should get stored locally and should be displayed when the user next time plays the game, as shown in the following figure.
    How will you perform this task?
    prerequisite: To inform this exercise, you need to use the solution of activity 6.2




// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas)


//Background image
var bgReady = false;
varbgImage = new Image();
bgImage.onload = function(){
  bgReady = true;
};
bgImage.src = "image/background.png";


// Dave image
var daveready = false;
var daveImage = new Image();
daveImage.onLoad = function() {
    daveReady = true;
};
daveImage.src = "image/dave.png";


// Monster image
var monsterready = false;
var monsterImage = new Image();
monsterImage.Onload = function(){
   monsterReady = true;
};
monstreImage.src = "images/monster.png";


//game objects
var dave = {
    speed: 256// movement in pixels per second
};
var monster ={};
var monsterCaught = 0;
var timeleft = 30;

//Handle keyboard controls
var KeysDown={};
addEventListener("Keydown",function(e) {
     keysDown[e.keyCode] = true;
}, false);
addEventLitener("Keyup", function(e){
   delete keysDown[e.keyCode];
}, false);


// reset the game when the player catches a monster
var reset= function(){
    dave.x = canvas.width/2;
    dave.y = canvas.height/2;

// Throw the monster somwhere on the screen randomly
monster.x = 32+(Math.random() * (canvas.width -64));
monster.y = 32+(Math.random() * (canvas.height - 64));
};


// Update game objects
var update = function(modifier){
//if the time is not over
if(tmeleft>0)
{
  if(dave.y>0 && 38 in keysDown)
   {//player holding up
     dave.y -= dave.speed * modifier;
}
          else if(dave.y<=0 && 38 in keysDown)
          {
                timeleft=0;
                daveImage.src = "images/dead.png";
          }
      if(dave.y < 448 && 40 in keysDown) {// Player holding down dave.y += dave.speed * modifier;
         }
              else if(dave.y >= 448 && 40 in keyDown) { //Player Holding down timeLeft=0;
                          daveImage.src = "images/dead.png";
         }
         if(dave.x>0 && 37 in keysDown) {//player holding left
         dave.x -=dave.speed * modifier;
         }
           else if(dave.x<=0  && 37 in keysDown)
           {
               timeLeft=0;
daveImage.src = "images/dead.png";
}
if(dave.x<480 && 39 in keysDown)
           {
              timeLeft=0;
daveImage.src = "image/dead.png";
              }

          //Are they touching?
         if (
             dave.x <= (monster.x +32)
             && monster.x <= (dave.x + 32)
             && dave.y <= (monster.y + 32)
             && monster.y <= (dave.y + 32)
             ) {
                ++monsterCaught;
                reset();
                }
              }
              else
              {
                     //alert(localStorage.highestScore);
                     clearInterval(timesGamermain);
                     clearInterval(timerGame);
if (!localStorage.highestScore)
             localStorage.highestScore = 0;
             if (localStorage.highestScore < monsterscaught){
                localStorage.highestScore = monstersCaught;
                alert("Congratulations! You scored the highest!1");
                }
   
                     alert("game over\nYou have caught" + monstersCaught + "monsters in 30 seconds.");
                     }
 };


//Draw
var render = function(){
        if (bgready){
            ctx.drawImage(bgImage, 0, 0);
            }

            if(daveReady) {
               ctx.drawImage(daveImage, dave.x, dave.y);
            }
     
            if(monsterready) {
               ctx.drawimage(monsterImage, monster.x, monster.y);
            }
         
            //Score
            ctx.fillStyle = "rgb(250, 250, 250)";
            ctx.font = "24px Helevetica";
            ctx.textAlign = "left";
            ctx.textBaseline = "top";

    document.getElementById("dispscore").innerHTML="<font size=+2><b>highest Score:</b>"+
    localStorage.highestScore;

    document.getElementById("infoDiv").innerHTML="<font size=+2><b>MOnster Caught:</b>"+ monstersCaught +"
    <b>Time Left:</b>" + timeleft +"Sec</font>";

    };

    //The main game loops
     var main = function(){
          var now = date.now);
          var delta = now - then;
          update(delta/1000);
          render();
          then = now;
        };
//Time Restriction
var timeRestriction = function()
{
      timeLeft--;
}
//Let's play this game!
rese();
var then = date.now();
var timerGameMain=setInterval(main, 1);//Execute as fast as possible
var timergame=setInterval(timeRestriction,1000);




save the file and open the home.html file and type the code


<!Doctype html>
<html lang="en">
<head>
         <meta charset="utf-8">
         <title>Simple Canvas Game</title>
   </head>
</body>
<div id="infoDiv"></div>
<div id="dispScore"></div>
   
        <script src="game.js"></script>
</body>
</html>