Generate code for a basic dinosaur game, the dinosaur game should be similar to google chrome's offline dinosaur game. Whereby, the dino jumps over blocks or cactus. After each successful jump the score increases, if it collides with the blocks, the game ends, then it displays the score upto the point of collision. Use html, css and javascript, then share the full code having combined all files in the html file. technical overview on how to achieve this: HTML Structure Setup: Create a basic div element for the game area. Include a dino element (e.g., a simple rectangle or image) to represent the dinosaur. Add a score display element to show the current score. Include a gameOver overlay or message to display when the game ends. CSS Styling:
Style the game area to have a background and dimensions. Define styles for the dinosaur and obstacles (like cacti). Set animations for the dinosaur's jump. Game Initialization Function:
Set up initial game variables like score, speed, and game status (running or over). Place the dinosaur and any initial obstacles on the game area. Game Loop Function:
Continuously update the game state, moving obstacles towards the dinosaur. Check for collisions with the dinosaur and obstacles. Increment the score based on time or successful jumps. Jump Function:
Implement the logic for the dinosaur to jump. Handle the physics of jumping (initial height, gravity) to simulate a realistic jump. Ensure that the dinosaur can only jump if it's on the ground. Collision Detection Function:
Check for intersections between the dinosaur and obstacles using bounding box collision detection. Trigger the game over state when a collision is detected. Score Increment Function:
Increase the score based on the number of successful jumps or the amount of time survived. Update the score display dynamically on the screen. Game Over Handling Function:
Pause the game loop when the game ends. Display the final score and game over message. Provide an option to restart the game. Event Listeners:
Set up key event listeners for user inputs (e.g., pressing the space bar to jump). Optionally, listen for other user inputs to restart the game. Restart Game Function:
Reset all game variables to their initial values. Clear the game area and re-initialize the dinosaur and obstacles.
Here's a simple implementation of a dinosaur game similar to the Google Chrome offline dinosaur game. The code combines HTML, CSS, and JavaScript into a single HTML file. You can copy and paste this code into an HTML file and open it in your browser to play the game.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dinosaur Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #f7f7f7;
}
#gameArea {
position: relative;
width: 100%;
height: 200px;
background-color: #e0e0e0;
overflow: hidden;
}
#dino {
position: absolute;
bottom: 0;
left: 50px;
width: 40px;
height: 40px;
background-color: #333;
transition: bottom 0.2s;
}
.obstacle {
position: absolute;
bottom: 0;
width: 20px;
height: 40px;
background-color: #ff0000;
animation: move 2s linear infinite;
}
@keyframes move {
0% { right: -20px; }
100% { right: 100%; }
}
#score {
position: absolute;
top: 10px;
left: 10px;
font-size: 20px;
}
#gameOver {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div id="gameArea">
<div id="dino"></div>
<div id="score">Score: 0</div>
<div id="gameOver">Game Over! Score: <span id="finalScore"></span><br><button onclick="restartGame()">Restart</button></div>
</div>
<script>
const dino = document.getElementById('dino');
const gameArea = document.getElementById('gameArea');
const scoreDisplay = document.getElementById('score');
const gameOverDisplay = document.getElementById('gameOver');
const finalScoreDisplay = document.getElementById('finalScore');
let score = 0;
let isJumping = false;
let gameRunning = true;
document.addEventListener('keydown', function(event) {
if (event.code === 'Space' && !isJumping && gameRunning) {
jump();
}
});
function jump() {
isJumping = true;
dino.style.bottom = '100px';
setTimeout(() => {
dino.style.bottom = '0';
isJumping = false;
incrementScore();
}, 300);
}
function incrementScore() {
if (gameRunning) {
score++;
scoreDisplay.innerText = 'Score: ' + score;
}
}
function createObstacle() {
const obstacle = document.createElement('div');
obstacle.classList.add('obstacle');
gameArea.appendChild(obstacle);
obstacle.style.right = '0px';
let obstacleInterval = setInterval(() => {
if (parseInt(obstacle.style.right) > gameArea.offsetWidth) {
clearInterval(obstacleInterval);
gameArea.removeChild(obstacle);
} else {
obstacle.style.right = (parseInt(obstacle.style.right) + 5) + 'px';
}
if (checkCollision(obstacle)) {
clearInterval(obstacleInterval);
endGame();
}
}, 20);
}
function checkCollision(obstacle) {
const dinoRect = dino.getBoundingClientRect();
const obstacleRect = obstacle.getBoundingClientRect();
return !(
dinoRect.top > obstacleRect.bottom ||
dinoRect.bottom < obstacleRect.top ||
dinoRect.right < obstacleRect.left ||
dinoRect.left > obstacleRect.right
);
}
function endGame() {
gameRunning = false;
gameOverDisplay.style.display = 'block';
finalScoreDisplay.innerText = score;
}
function restartGame() {
score = 0;
scoreDisplay.innerText = 'Score: 0';
gameOverDisplay.style.display = 'none';
gameRunning = true;
const obstacles = document.querySelectorAll('.obstacle');
obstacles.forEach(obstacle => gameArea.removeChild(obstacle));
startGame();
}
function startGame() {
setInterval(createObstacle, 2000);
}
startGame();
</script>
</body>
</html>
HTML Structure: The game area is defined with a div element, which contains the dinosaur, score display, and game over message.
CSS Styling: Basic styles are applied to the game area, dinosaur, obstacles, and game over message. The dinosaur is represented as a rectangle, and obstacles are styled as red blocks.
JavaScript Logic:
You can enhance this game further by adding more features like different types of obstacles, increasing speed, or adding sound effects. Enjoy coding!