So I only have a week’s worth of HTML, CSS, and JavaScript experience, and I’ve been trying to create a game similar to the Dinosaur game on Chrome. I’ve come across a problem trying to store a High Score. For some reason, when I try to update the normal score, the whole game disappears.
Here’s my insulting code:
HTML
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<style>
#title
{
left: 2px;
position: relative;
}
#highscore
{
left: 450px;
top: 23px;
position: fixed;
}
</style>
<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>Block Game</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h3 id="title">Block Game</h3>
<div id="game">
<div id="score">Score: <br>0</br><div>
<div id="highscore">Highscore: <br>0</br></div>
<div id="character"></div>
<div id="longBlock"></div>
<div id="block"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
}
#game {
width: 520px;
height: 200px;
left: 2px;
position: relative;
border: 1px solid black;
}
#character {
width: 20px;
height: 50px;
left: 20px;
background-color: grey;
position: relative;
top: 114px;
}
.animate {
animation: jump 500ms;
}
#block {
width: 20px;
height: 20px;
background-color: red;
position: relative;
top: 74px;
left: 500px;
animation: block 1.5s infinite linear;
}
#longBlock {
width: 40px;
height: 20px;
background-color: blue;
position: relative;
top: 94px;
left: 500px;
animation: block 2s infinite linear;
}
@keyframes block {
0% {
left: 480px;
}
100% {
left: -40px;
}
}
@keyframes jump {
0% {
top: 114px;
}
20% {
top: 67px;
}
30% {
top: 62px;
}
70% {
top: 62px;
}
90% {
top: 109px;
}
100% {
top: 114px;
}
}
JavaScript
var score = 0;
var highscore = 0;
var character = document.getElementById("character");
var block = document.getElementById("block");
var longBlock = document.getElementById("longBlock");
document.getElementById("highscore").innerHTML = "High Score: n" + highscore;
document.getElementById("score").innerHTML = "Score: n" + score;
localStorage.clear();
window.onload = function()
{
var scoreFromBrowser = localStorage.getItem("highscore");
if(scoreFromBrowser!= undefined)
{
highscore = scoreFromBrowser;
document.getElementById("highscore").innerHTML = "High Score: " + highscore;
}
}
var addScore = setInterval(function(){
score+=1;
document.getElementById("score").innerHTML = "Score: n" + score;
if(score>highscore)
{
localStorage.setItem("highscore", highscore);
highscore = score;
document.getElementById("highscore").innerHTML = "High Score: n" + highscore;
}
},200);
function jump(){
if(character.classList!="animate"){
character.classList.add("animate");
}
setTimeout(function(){
character.classList.remove("animate");
},500);
}
var checkDead = setInterval(function(){
var characterTop =
parseInt(window.getComputedStyle(character).getPropertyValue("top"));
var blockLeft =
parseInt(window.getComputedStyle(block).getPropertyValue("left"));
var longBlockLeft =
parseInt(window.getComputedStyle(longBlock).getPropertyValue("left"));
if(blockLeft<44 && blockLeft>=5 && characterTop<=130 && characterTop>=84)
{
block.style.animation = "none";
alert("You Lose. Highscore: " + highscore);
if(!alert('Replay?'))
{
window.location.reload();
}
}
else if(longBlockLeft<43 && longBlockLeft>=5 && characterTop<=130 && characterTop>=74)
{
block.style.animation = "none";
alert("You Lose. Highscore: " + highscore);
if(!alert('Replay?'))
{
window.location.reload();
}
}
},15);
I wrote this on VSCode and ran it with Live Server. If you delete all the parts like this, document.getElementById("score").innerHTML = "Score: n" + score; The game appears normally. Please Help.