diff --git a/game.js b/game.js index b6716d7..cd1d7b0 100644 --- a/game.js +++ b/game.js @@ -8,14 +8,19 @@ const right = new Audio(); const left = new Audio(); const cheer = new Audio(); + + const box = 32; const cvs = document.getElementById("gamescreen"); const ctx = cvs.getContext("2d"); let message = "Your Score is: " let snake = []; let score = 0; +localStorage.getItem('topScores')?localStorage.getItem('topScores'):[0]; +countWins(score); let d; let highestScore = localStorage.getItem('highestScore') ? localStorage.getItem('highestScore') : 0 ; + foodImg.src = "images/food.png"; background.src = "images/ground.png"; dead.src = "audio/dead.mp3"; @@ -111,10 +116,12 @@ function draw() { else{ dead.play(); } + countWins(score); setTimeout(() =>{ - alert("Game Over! \n"+ message + score + "\nWanna Play Again ?"); + // alert("Game Over! \n"+ message + score + "\nWanna Play Again ?"); window.location.reload() - },2500) + },500) + } snake.unshift(newHead); @@ -523,3 +530,33 @@ confetti.resize(); }); } +function countWins(score){ + console.log("my score",score); + var topScores=localStorage.getItem('topScores')?localStorage.getItem('topScores'):[0]; + topScores=JSON.parse(topScores); + console.log(topScores); + console.log(topScores.length); + if(topScores.length<5&&!topScores.includes(score)){ + topScores.push(score); + } + else if(topScores.length>=5&&!topScores.includes(score)&&Math.min(...topScores){ + return score2-score1; + }) + var countWinBodyScore=document.querySelector('.countWinsBody-scores'); + countWinBodyScore.innerHTML=''; + topScores.forEach(score => { + + var scoreEle=document.createElement('div'); + scoreEle.className="allScores"; + scoreEle.innerHTML=`Score is : ${score}`; + countWinBodyScore.appendChild(scoreEle); + }); + topScores=JSON.stringify(topScores); + localStorage.setItem('topScores',topScores); +} + + diff --git a/index.html b/index.html index c027454..d3b3d38 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,19 @@ Snake Game - - + +
+

Your Top Scores:

+
+ +
+
+
+ + +
+ + \ No newline at end of file diff --git a/styles.css b/styles.css index a92a888..b15f786 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,10 @@ +body{ + display: flex; +} canvas { - display: block; - margin-left: auto; + /* display: block; */ + margin-top: 75px; + margin-left: 75px; margin-right: auto; } #confetti{ @@ -8,5 +12,27 @@ canvas { left: 0; top: 0; height: 100%; - width: 100%; + width: 50%; +} + +.allScores{ + align-content: center; + box-sizing: border-box; + margin: 0; + border-radius: 2px; + border: .8px solid rgb(250, 240, 240); + box-shadow: 0 10px 6px -6px #777; + width: 700px; + padding :40px; + /* padding-top: 10px; */ + text-align: center; + background:rgb(226, 223, 223); + color:rgb(199, 35, 172); + margin-top: 10px; + font-size: large; +} + +.countWinsBody h2{ + color: rgb(36, 66, 196); + text-align: center; } \ No newline at end of file