I followed a tutorial on YouTube about how to make a version of Google’s dino runner game, where you jump the T-Rex over cacti. The version I wound up with is much more simple: he just jumps over a single cactus, over and over again, always at the same interval. Every jump gives a point, and the jump action is tied to W for right now. If you miss a jump, you get a pop-up alert that gives your score and stops the game.
My problem is two-fold:
- How can I get the game to start by clicking a button rather than as soon as the page loads and
- How can I make clicking the game-over pop-up take the player back to the game’s initial state in which they have to click the start game button to go again?
I’ve tried wrapping the startInterval function in an eventlistener that listens for a click on the startgame button, but all that does is break the collision detection and scoring in the game itself. I’ve gone to w3schools and chatgpt for help on this, as well as a few other resources, but nothing’s worked so far. I feel like the answer is really simple, but I’m just not seeing it.
This is the HTML for the game:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dino Game</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="game">
<div id="dino"></div>
<div id="scores">Score:</div>
<div id="cactus"></div>
<button id="startgame">Play Game</button>
</div>
<script src="scripts.js"></script>
</body>
</html>
This is the JavaScript:
// JavaScript source code
const dino = document.getElementById("dino");
const cactus = document.getElementById("cactus");
const scoreElement = document.getElementById("scores");
let isAlive;
let score = 0;
document.addEventListener("keydown", function (event) {
if (event.key === "w") {
jump();
}
});
function jump() {
if (dino.classList != "jump") {
dino.classList.add("jump");
setTimeout(function () {
dino.classList.remove("jump");
}, 300);
}
}
isAlive = setInterval(function () {
// get current dino Y position
let dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue("top"));
console.log(dinoTop);
// get current cactus X position
let cactusLeft = parseInt(window.getComputedStyle(cactus).getPropertyValue("left"));
console.log(cactus);
// detect collision
if (cactusLeft < 50 && cactusLeft > 0 && dinoTop >= 750) {
// collision
if (!hasJumpedOverCactus) {
alert("Game over! Your score: " + score);
clearInterval(isAlive);
}
} else if (cactusLeft >= 630 && dinoTop <= 750) {
// dino jumped over the cactus
if (!hasJumpedOverCactus) {
score++;
scoreElement.textContent = "Score: " + score;
hasJumpedOverCactus = true;
}
} else {
hasJumpedOverCactus = false; // reset the flag when the cactus is off the screen
}
}, 5);
And because it might be relevant, here is the CSS styling for the button:
#startgame {
background-color: dodgerblue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
position: absolute;
top: 920px;
left: 450px;
}
