latest Commit

JassiSingh08 · Mar 20, 2023 · b8aa76d · b8aa76d
1 parent fa535ae
commit b8aa76d
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 22 deletions.
diff --git a/img/Background.png b/img/Background.png
diff --git a/img/NicePng_png-image_4413594.png b/img/NicePng_png-image_4413594.png
diff --git a/img/Screenshot 2023-03-14 164338.png b/img/Screenshot 2023-03-14 164338.png
diff --git a/img/clipart2159548.png b/img/clipart2159548.png
diff --git a/index.html b/index.html
@@ -4,17 +4,17 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hey Dinosaur</title>
+    <title>Let's Jump</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <div id="board">
-        <div id="character"></div>
-        <div id="block"></div>
+        <div id="character"><img src="./img/clipart2159548.png" width="70px" height="100px"></div>
+        <div id="block"><img src="./img/NicePng_png-image_4413594.png" width="80px" height="60px"></div>
     </div>
+    <h1 id="start">Tap On the Screen to Start the Game</h1>
+    <div id="Highscore">HighScore : 0</div>
     <div id="score">Score : 0</div>
-    <!-- <div id="Highscore">HighScore : 0</div> -->
-    <!-- <button id="start">Start Game</button> -->
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,19 +1,20 @@
 var character = document.getElementById('character');
 var block = document.getElementById('block'); 
 var scorebox = document.getElementById('score');
-// var highscorebox = document.getElementById('Highscore');
-// let hiscoreval = 0;
+var highscorebox = document.getElementById('Highscore');
+let hiscoreval = 0;
 let score = 0;
 var start = document.getElementById('start');
-
+let intervalId;
+let intervalId2;
 
 
 
 window.addEventListener('keydown', function(event) {
   if (event.code === 'ArrowUp' || event.code === 'Space') {
     console.log('Arrow up or Space key pressed!');
     character.classList.add("animate");
-    this.setTimeout(()=>{
+    intervalId2 =  this.setTimeout(()=>{
       character.classList.remove('animate');
     },500)
   }
@@ -24,14 +25,18 @@ window.addEventListener('keydown', function(event) {
 
 window.addEventListener('click',function(){
   block.classList.add('animateblock');
-  setInterval(() => {
+  intervalId = setInterval(() => {
     score++;
     scorebox.innerHTML = "Score : "+score;
+    if(score>hiscoreval){
+      hiscoreval = score;
+      localStorage.setItem("hiscore", JSON.stringify(hiscoreval));
+      highscorebox.innerHTML = "High Score: " + hiscoreval;
+  }
   }, 300);
 });
 
 
-
 // check for Game Over 
 
 var checkdead = setInterval(function(){
@@ -43,7 +48,18 @@ var checkdead = setInterval(function(){
     alert("Game Over. Score is " +score+ ".");
     score = 0;
     scorebox.innerHTML = "Score : "+score;
-    location.reload()
+    clearInterval(intervalId,intervalId2);
+    // location.reload()
   }
 
 },10);
+
+let hiscore = localStorage.getItem("hiscore");
+if(hiscore === null){
+
+    localStorage.setItem("hiscore", JSON.stringify(hiscoreval))
+}
+else{
+    hiscoreval = JSON.parse(hiscore);
+    highscorebox.innerHTML = "High Score: " + hiscore;
+}
diff --git a/style.css b/style.css
@@ -6,21 +6,33 @@
 
 
 #board{
+    background: url(./img/Background.png);
+    background-size: 601px 340px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 600px;
-    height: 300px;
-    border: 1px solid black;
+    height: 340px;
+    border: 2px solid black;
+}
+
+#score,h1, #Highscore{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+    margin: 20px 0;
 }
 
 #character{
-    background-color: #888;
+    /* background: url(./img/clipart2159548.png); */
+    /* background-color: #888; */
     position: relative;
     top: 200px;
-    height: 100px ;
+    height: 100px; 
     width: 50px;
+    left: 50px;
 }
 
 .animate{
@@ -31,18 +43,15 @@
 #block{
     width: 20px;
     height: 20px;
-    background-color: blue;
     position: relative;
-    top: 180px;
-    left: 580px;
+    top: 150px;
+    left: 520px;
 }
 
 .animateblock{
-    animation: block 1s infinite linear ;
+    animation: block 1.1s infinite linear ;
 }
 
-
-
 @keyframes block{
     0%{left:580px;}
     100%{left:-5px;}