Untitled
unknown
html
10 months ago
8.4 kB
12
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dino Game</title>
<style>
body {
background-color: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
#game-container {
border: 2px solid #333;
background-color: #fff;
position: relative;
overflow: hidden;
}
#score {
position: absolute;
top: 10px;
right: 10px;
font-size: 1.5em;
color: #555;
z-index: 10;
}
#game-canvas {
display: block;
background-color: #f7f7f7;
}
#game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 20;
}
#game-over h1 {
margin-top: 0;
color: #333;
}
#game-over p {
font-size: 1.2em;
color: #555;
}
#restart-button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
border-radius: 5px;
margin-top: 10px;
}
#restart-button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div id="game-container">
<span id="score">0</span>
<canvas id="game-canvas"></canvas>
<div id="game-over" style="display: none;">
<h1>Game Over</h1>
<p>Score: <span id="final-score">0</span></p>
<button id="restart-button">Restart</button>
</div>
</div>
<script>
// Note: You will need to add your own sound files
// to the same folder as this HTML file.
// e.g., jump.mp3 and gameover.mp3
const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');
const gameContainer = document.getElementById('game-container');
const gameOverScreen = document.getElementById('game-over');
const finalScoreSpan = document.getElementById('final-score');
const restartButton = document.getElementById('restart-button');
const scoreSpan = document.getElementById('score');
// Game settings
let gameSpeed = 5;
const gravity = 0.5;
let score = 0;
let isGameOver = false;
let scoreTimer;
// Player (Dino) settings
let dinoX = 50;
let dinoY = 150;
let dinoWidth = 60;
let dinoHeight = 70;
let dinoVelocityY = 0;
let isJumping = false;
// Ground settings
const groundY = 220;
let groundX = 0;
// Obstacle settings
const obstacles = [];
const obstacleTypes = [
{ width: 30, height: 60, y: groundY },
{ width: 40, height: 80, y: groundY },
{ width: 20, height: 40, y: groundY }
];
let obstacleTimer;
const obstacleInterval = 2000;
// Sound effects
// You must have these files in the same directory
const jumpSound = new Audio('jump.mp3');
const gameOverSound = new Audio('gameover.mp3');
// Helper functions
function getRandomObstacle() {
const type = obstacleTypes[Math.floor(Math.random() * obstacleTypes.length)];
return {
...type,
x: canvas.width,
color: '#333'
};
}
function drawDino() {
ctx.fillStyle = '#555';
ctx.fillRect(dinoX, dinoY, dinoWidth, dinoHeight);
}
function drawGround() {
ctx.fillStyle = '#333';
ctx.fillRect(groundX, groundY + dinoHeight, canvas.width, 20);
}
function drawObstacles() {
obstacles.forEach(obstacle => {
ctx.fillStyle = obstacle.color;
ctx.fillRect(obstacle.x, obstacle.y - obstacle.height, obstacle.width, obstacle.height);
});
}
function updateObstacles() {
obstacles.forEach(obstacle => {
obstacle.x -= gameSpeed;
});
// Remove obstacles that have moved off-screen
if (obstacles.length > 0 && obstacles[0].x + obstacles[0].width < 0) {
obstacles.shift();
}
}
function checkCollisions() {
obstacles.forEach(obstacle => {
if (dinoX < obstacle.x + obstacle.width &&
dinoX + dinoWidth > obstacle.x &&
dinoY < obstacle.y &&
dinoY + dinoHeight > obstacle.y - obstacle.height) {
endGame();
}
});
}
function updateScore() {
score++;
scoreSpan.textContent = score;
// Increase game speed every 100 points
if (score % 100 === 0) {
gameSpeed += 0.5;
}
}
function endGame() {
isGameOver = true;
gameOverSound.play();
clearInterval(obstacleTimer);
clearInterval(scoreTimer);
finalScoreSpan.textContent = score;
gameOverScreen.style.display = 'block';
}
function resetGame() {
isGameOver = false;
dinoY = 150;
dinoVelocityY = 0;
isJumping = false;
obstacles.length = 0;
score = 0;
gameSpeed = 5;
gameOverScreen.style.display = 'none';
scoreSpan.textContent = score;
// Restart timers
obstacleTimer = setInterval(() => {
obstacles.push(getRandomObstacle());
}, obstacleInterval);
scoreTimer = setInterval(updateScore, 100);
// Start the game loop
update();
}
function update() {
if (isGameOver) {
return;
}
// Ground movement
groundX -= gameSpeed;
if (groundX <= -canvas.width) {
groundX = 0;
}
// Dino jump logic
if (isJumping) {
dinoVelocityY += gravity;
dinoY += dinoVelocityY;
}
// Ground collision
if (dinoY + dinoHeight >= groundY) {
dinoY = groundY - dinoHeight;
isJumping = false;
dinoVelocityY = 0;
}
// Update and check
updateObstacles();
checkCollisions();
// Clear canvas and redraw
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawGround();
drawDino();
drawObstacles();
requestAnimationFrame(update);
}
// Player input
document.addEventListener('keydown', (e) => {
if (e.code === 'Space' && !isJumping) {
isJumping = true;
dinoVelocityY = -10; // Initial upward velocity for jump
jumpSound.play();
}
});
// Restart button
restartButton.addEventListener('click', resetGame);
// Initial setup
function init() {
canvas.width = 600;
canvas.height = 300;
gameContainer.style.width = `${canvas.width}px`;
gameContainer.style.height = `${canvas.height}px`;
// Start the timers
obstacleTimer = setInterval(() => {
obstacles.push(getRandomObstacle());
}, obstacleInterval);
scoreTimer = setInterval(updateScore, 100);
update();
}
init();
</script>
</body>
</html>
Editor is loading...
Leave a Comment