|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Dino Runner Game</title> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); |
|
|
font-family: 'Press Start 2P', cursive; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
header { |
|
|
width: 100%; |
|
|
padding: 1rem; |
|
|
text-align: center; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
backdrop-filter: blur(10px); |
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
|
|
|
header a { |
|
|
color: #00d4ff; |
|
|
text-decoration: none; |
|
|
font-size: 0.7rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
header a:hover { |
|
|
color: #fff; |
|
|
text-shadow: 0 0 10px #00d4ff; |
|
|
} |
|
|
|
|
|
.game-container { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
flex: 1; |
|
|
padding: 2rem; |
|
|
width: 100%; |
|
|
max-width: 900px; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
color: #fff; |
|
|
font-size: clamp(1rem, 4vw, 2rem); |
|
|
margin-bottom: 1rem; |
|
|
text-shadow: 0 0 20px rgba(0, 212, 255, 0.5); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.score-board { |
|
|
display: flex; |
|
|
gap: 2rem; |
|
|
margin-bottom: 1rem; |
|
|
flex-wrap: wrap; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.score-item { |
|
|
color: #fff; |
|
|
font-size: clamp(0.6rem, 2vw, 0.9rem); |
|
|
padding: 0.5rem 1rem; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 10px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
|
|
|
.score-item span { |
|
|
color: #00d4ff; |
|
|
} |
|
|
|
|
|
#gameCanvas { |
|
|
border: 4px solid #00d4ff; |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 0 30px rgba(0, 212, 255, 0.3), |
|
|
inset 0 0 50px rgba(0, 0, 0, 0.5); |
|
|
background: linear-gradient(180deg, #87CEEB 0%, #E0F6FF 60%, #90EE90 60%, #228B22 100%); |
|
|
max-width: 100%; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.instructions { |
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
font-size: clamp(0.5rem, 1.5vw, 0.7rem); |
|
|
margin-top: 1rem; |
|
|
text-align: center; |
|
|
line-height: 2; |
|
|
} |
|
|
|
|
|
.instructions kbd { |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
padding: 0.3rem 0.6rem; |
|
|
border-radius: 5px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.3); |
|
|
} |
|
|
|
|
|
.game-over-overlay { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
display: none; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
z-index: 100; |
|
|
} |
|
|
|
|
|
.game-over-content { |
|
|
text-align: center; |
|
|
color: #fff; |
|
|
padding: 2rem; |
|
|
background: linear-gradient(135deg, #1a1a2e, #16213e); |
|
|
border-radius: 20px; |
|
|
border: 3px solid #00d4ff; |
|
|
box-shadow: 0 0 50px rgba(0, 212, 255, 0.5); |
|
|
} |
|
|
|
|
|
.game-over-content h2 { |
|
|
font-size: clamp(1.5rem, 5vw, 2.5rem); |
|
|
margin-bottom: 1rem; |
|
|
color: #ff4757; |
|
|
} |
|
|
|
|
|
.game-over-content p { |
|
|
font-size: clamp(0.7rem, 2vw, 1rem); |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.restart-btn { |
|
|
font-family: 'Press Start 2P', cursive; |
|
|
font-size: clamp(0.6rem, 2vw, 0.9rem); |
|
|
padding: 1rem 2rem; |
|
|
background: linear-gradient(135deg, #00d4ff, #0099cc); |
|
|
color: #fff; |
|
|
border: none; |
|
|
border-radius: 10px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.restart-btn:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 0 20px rgba(0, 212, 255, 0.5); |
|
|
} |
|
|
|
|
|
.start-screen { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.9); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
z-index: 100; |
|
|
} |
|
|
|
|
|
.start-content { |
|
|
text-align: center; |
|
|
color: #fff; |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
.start-content h2 { |
|
|
font-size: clamp(1.5rem, 5vw, 3rem); |
|
|
margin-bottom: 2rem; |
|
|
color: #00d4ff; |
|
|
text-shadow: 0 0 30px rgba(0, 212, 255, 0.7); |
|
|
} |
|
|
|
|
|
.dino-art { |
|
|
font-size: clamp(3rem, 10vw, 6rem); |
|
|
margin-bottom: 2rem; |
|
|
animation: bounce 1s infinite; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
|
|
|
0%, |
|
|
100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
50% { |
|
|
transform: translateY(-20px); |
|
|
} |
|
|
} |
|
|
|
|
|
.start-btn { |
|
|
font-family: 'Press Start 2P', cursive; |
|
|
font-size: clamp(0.8rem, 2.5vw, 1.2rem); |
|
|
padding: 1.5rem 3rem; |
|
|
background: linear-gradient(135deg, #00d4ff, #0099cc); |
|
|
color: #fff; |
|
|
border: none; |
|
|
border-radius: 15px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
|
|
|
0%, |
|
|
100% { |
|
|
box-shadow: 0 0 20px rgba(0, 212, 255, 0.5); |
|
|
} |
|
|
|
|
|
50% { |
|
|
box-shadow: 0 0 40px rgba(0, 212, 255, 0.8); |
|
|
} |
|
|
} |
|
|
|
|
|
.start-btn:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
@media (max-width: 600px) { |
|
|
.game-container { |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
.score-board { |
|
|
gap: 1rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<header> |
|
|
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> |
|
|
</header> |
|
|
|
|
|
<div class="start-screen" id="startScreen"> |
|
|
<div class="start-content"> |
|
|
<h2>🦖 DINO RUNNER 🦖</h2> |
|
|
<div class="dino-art">🦕</div> |
|
|
<button class="start-btn" id="startBtn">START GAME</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="game-container"> |
|
|
<h1>🦖 DINO RUNNER 🦖</h1> |
|
|
|
|
|
<div class="score-board"> |
|
|
<div class="score-item">SCORE: <span id="score">0</span></div> |
|
|
<div class="score-item">HIGH SCORE: <span id="highScore">0</span></div> |
|
|
</div> |
|
|
|
|
|
<canvas id="gameCanvas" width="800" height="300"></canvas> |
|
|
|
|
|
<div class="instructions"> |
|
|
Press <kbd>SPACE</kbd> or <kbd>↑</kbd> to jump | <kbd>↓</kbd> to duck | <kbd>TAP</kbd> on mobile |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="game-over-overlay" id="gameOverOverlay"> |
|
|
<div class="game-over-content"> |
|
|
<h2>GAME OVER!</h2> |
|
|
<p>Your Score: <span id="finalScore">0</span></p> |
|
|
<button class="restart-btn" id="restartBtn">PLAY AGAIN</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const canvas = document.getElementById('gameCanvas'); |
|
|
const ctx = canvas.getContext('2d'); |
|
|
const scoreElement = document.getElementById('score'); |
|
|
const highScoreElement = document.getElementById('highScore'); |
|
|
const finalScoreElement = document.getElementById('finalScore'); |
|
|
const gameOverOverlay = document.getElementById('gameOverOverlay'); |
|
|
const startScreen = document.getElementById('startScreen'); |
|
|
const startBtn = document.getElementById('startBtn'); |
|
|
const restartBtn = document.getElementById('restartBtn'); |
|
|
|
|
|
|
|
|
function resizeCanvas() { |
|
|
const maxWidth = Math.min(800, window.innerWidth - 40); |
|
|
const ratio = 300 / 800; |
|
|
canvas.style.width = maxWidth + 'px'; |
|
|
canvas.style.height = (maxWidth * ratio) + 'px'; |
|
|
} |
|
|
resizeCanvas(); |
|
|
window.addEventListener('resize', resizeCanvas); |
|
|
|
|
|
|
|
|
let gameRunning = false; |
|
|
let gameSpeed = 6; |
|
|
let score = 0; |
|
|
let highScore = localStorage.getItem('dinoHighScore') || 0; |
|
|
highScoreElement.textContent = highScore; |
|
|
|
|
|
|
|
|
const dino = { |
|
|
x: 50, |
|
|
y: 220, |
|
|
width: 50, |
|
|
height: 60, |
|
|
velocityY: 0, |
|
|
jumping: false, |
|
|
ducking: false, |
|
|
duckHeight: 35, |
|
|
normalHeight: 60, |
|
|
groundY: 220, |
|
|
frame: 0, |
|
|
frameCount: 0 |
|
|
}; |
|
|
|
|
|
|
|
|
let obstacles = []; |
|
|
let obstacleTimer = 0; |
|
|
const obstacleInterval = 100; |
|
|
|
|
|
|
|
|
let clouds = []; |
|
|
|
|
|
|
|
|
let groundX = 0; |
|
|
|
|
|
|
|
|
const gravity = 0.8; |
|
|
const jumpForce = -15; |
|
|
|
|
|
|
|
|
function initClouds() { |
|
|
clouds = []; |
|
|
for (let i = 0; i < 5; i++) { |
|
|
clouds.push({ |
|
|
x: Math.random() * canvas.width, |
|
|
y: 30 + Math.random() * 60, |
|
|
width: 60 + Math.random() * 40, |
|
|
speed: 1 + Math.random() |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function drawCloud(cloud) { |
|
|
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(cloud.x, cloud.y, 20, 0, Math.PI * 2); |
|
|
ctx.arc(cloud.x + 25, cloud.y - 10, 25, 0, Math.PI * 2); |
|
|
ctx.arc(cloud.x + 50, cloud.y, 20, 0, Math.PI * 2); |
|
|
ctx.arc(cloud.x + 25, cloud.y + 5, 22, 0, Math.PI * 2); |
|
|
ctx.fill(); |
|
|
} |
|
|
|
|
|
|
|
|
function drawDino() { |
|
|
const height = dino.ducking ? dino.duckHeight : dino.normalHeight; |
|
|
const y = dino.ducking ? dino.groundY + (dino.normalHeight - dino.duckHeight) : dino.y; |
|
|
|
|
|
|
|
|
ctx.fillStyle = '#2d5016'; |
|
|
ctx.beginPath(); |
|
|
ctx.roundRect(dino.x, y, dino.width - 10, height, 10); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.fillStyle = '#3d6b1e'; |
|
|
if (!dino.ducking) { |
|
|
ctx.beginPath(); |
|
|
ctx.roundRect(dino.x + 15, y - 25, 35, 30, 8); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.fillStyle = '#fff'; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(dino.x + 40, y - 12, 6, 0, Math.PI * 2); |
|
|
ctx.fill(); |
|
|
ctx.fillStyle = '#000'; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(dino.x + 42, y - 12, 3, 0, Math.PI * 2); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.strokeStyle = '#1a3d0c'; |
|
|
ctx.lineWidth = 2; |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(dino.x + 45, y - 5); |
|
|
ctx.lineTo(dino.x + 50, y - 5); |
|
|
ctx.stroke(); |
|
|
} else { |
|
|
|
|
|
ctx.beginPath(); |
|
|
ctx.roundRect(dino.x + 30, y - 5, 30, 20, 5); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.fillStyle = '#fff'; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(dino.x + 50, y + 5, 4, 0, Math.PI * 2); |
|
|
ctx.fill(); |
|
|
ctx.fillStyle = '#000'; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(dino.x + 51, y + 5, 2, 0, Math.PI * 2); |
|
|
ctx.fill(); |
|
|
} |
|
|
|
|
|
|
|
|
ctx.fillStyle = '#2d5016'; |
|
|
dino.frameCount++; |
|
|
if (dino.frameCount > 5) { |
|
|
dino.frame = (dino.frame + 1) % 2; |
|
|
dino.frameCount = 0; |
|
|
} |
|
|
|
|
|
if (!dino.jumping) { |
|
|
const legOffset = dino.frame === 0 ? 5 : -5; |
|
|
ctx.fillRect(dino.x + 8, y + height - 5, 8, 15 + legOffset); |
|
|
ctx.fillRect(dino.x + 25, y + height - 5, 8, 15 - legOffset); |
|
|
} else { |
|
|
ctx.fillRect(dino.x + 8, y + height - 5, 8, 12); |
|
|
ctx.fillRect(dino.x + 25, y + height - 5, 8, 12); |
|
|
} |
|
|
|
|
|
|
|
|
ctx.fillStyle = '#3d6b1e'; |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(dino.x, y + 20); |
|
|
ctx.lineTo(dino.x - 20, y + 15); |
|
|
ctx.lineTo(dino.x, y + 35); |
|
|
ctx.fill(); |
|
|
} |
|
|
|
|
|
|
|
|
function drawCactus(obstacle) { |
|
|
ctx.fillStyle = '#228B22'; |
|
|
|
|
|
|
|
|
ctx.beginPath(); |
|
|
ctx.roundRect(obstacle.x + 10, obstacle.y, 20, obstacle.height, 5); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.beginPath(); |
|
|
ctx.roundRect(obstacle.x, obstacle.y + 15, 12, 25, 4); |
|
|
ctx.fill(); |
|
|
ctx.beginPath(); |
|
|
ctx.roundRect(obstacle.x, obstacle.y + 10, 8, 15, 3); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.beginPath(); |
|
|
ctx.roundRect(obstacle.x + 28, obstacle.y + 25, 12, 20, 4); |
|
|
ctx.fill(); |
|
|
ctx.beginPath(); |
|
|
ctx.roundRect(obstacle.x + 32, obstacle.y + 20, 8, 12, 3); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.fillStyle = '#1a6b1a'; |
|
|
for (let i = 0; i < 5; i++) { |
|
|
ctx.beginPath(); |
|
|
ctx.arc(obstacle.x + 20, obstacle.y + i * 12, 2, 0, Math.PI * 2); |
|
|
ctx.fill(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function drawBird(obstacle) { |
|
|
ctx.fillStyle = '#8B4513'; |
|
|
|
|
|
|
|
|
ctx.beginPath(); |
|
|
ctx.ellipse(obstacle.x + 20, obstacle.y + 15, 20, 12, 0, 0, Math.PI * 2); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.beginPath(); |
|
|
ctx.arc(obstacle.x + 40, obstacle.y + 10, 10, 0, Math.PI * 2); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.fillStyle = '#FFA500'; |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(obstacle.x + 50, obstacle.y + 10); |
|
|
ctx.lineTo(obstacle.x + 60, obstacle.y + 12); |
|
|
ctx.lineTo(obstacle.x + 50, obstacle.y + 14); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.fillStyle = '#fff'; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(obstacle.x + 43, obstacle.y + 8, 4, 0, Math.PI * 2); |
|
|
ctx.fill(); |
|
|
ctx.fillStyle = '#000'; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(obstacle.x + 44, obstacle.y + 8, 2, 0, Math.PI * 2); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.fillStyle = '#6B3E26'; |
|
|
const wingY = Math.sin(Date.now() / 100) * 10; |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(obstacle.x + 10, obstacle.y + 15); |
|
|
ctx.lineTo(obstacle.x - 10, obstacle.y + wingY); |
|
|
ctx.lineTo(obstacle.x + 20, obstacle.y + 15); |
|
|
ctx.fill(); |
|
|
} |
|
|
|
|
|
|
|
|
function drawGround() { |
|
|
ctx.fillStyle = '#8B4513'; |
|
|
ctx.fillRect(0, 280, canvas.width, 20); |
|
|
|
|
|
ctx.fillStyle = '#654321'; |
|
|
groundX -= gameSpeed; |
|
|
if (groundX <= -20) groundX = 0; |
|
|
|
|
|
for (let i = groundX; i < canvas.width; i += 20) { |
|
|
ctx.fillRect(i, 282, 15, 3); |
|
|
ctx.fillRect(i + 7, 288, 10, 2); |
|
|
} |
|
|
|
|
|
|
|
|
ctx.fillStyle = '#228B22'; |
|
|
ctx.fillRect(0, 275, canvas.width, 5); |
|
|
} |
|
|
|
|
|
|
|
|
function spawnObstacle() { |
|
|
const type = Math.random() > 0.7 ? 'bird' : 'cactus'; |
|
|
const obstacle = { |
|
|
x: canvas.width, |
|
|
type: type, |
|
|
width: type === 'cactus' ? 40 : 60, |
|
|
height: type === 'cactus' ? 50 + Math.random() * 20 : 30 |
|
|
}; |
|
|
|
|
|
if (type === 'cactus') { |
|
|
obstacle.y = 280 - obstacle.height; |
|
|
} else { |
|
|
obstacle.y = Math.random() > 0.5 ? 180 : 230; |
|
|
} |
|
|
|
|
|
obstacles.push(obstacle); |
|
|
} |
|
|
|
|
|
|
|
|
function checkCollision() { |
|
|
const dinoHeight = dino.ducking ? dino.duckHeight : dino.normalHeight; |
|
|
const dinoY = dino.ducking ? dino.groundY + (dino.normalHeight - dino.duckHeight) : dino.y; |
|
|
|
|
|
for (let obstacle of obstacles) { |
|
|
if (dino.x + dino.width - 15 > obstacle.x && |
|
|
dino.x + 10 < obstacle.x + obstacle.width && |
|
|
dinoY + dinoHeight > obstacle.y && |
|
|
dinoY < obstacle.y + obstacle.height) { |
|
|
return true; |
|
|
} |
|
|
} |
|
|
return false; |
|
|
} |
|
|
|
|
|
|
|
|
function gameOver() { |
|
|
gameRunning = false; |
|
|
finalScoreElement.textContent = score; |
|
|
|
|
|
if (score > highScore) { |
|
|
highScore = score; |
|
|
localStorage.setItem('dinoHighScore', highScore); |
|
|
highScoreElement.textContent = highScore; |
|
|
} |
|
|
|
|
|
gameOverOverlay.style.display = 'flex'; |
|
|
} |
|
|
|
|
|
|
|
|
function resetGame() { |
|
|
score = 0; |
|
|
gameSpeed = 6; |
|
|
obstacles = []; |
|
|
obstacleTimer = 0; |
|
|
dino.y = dino.groundY; |
|
|
dino.velocityY = 0; |
|
|
dino.jumping = false; |
|
|
dino.ducking = false; |
|
|
initClouds(); |
|
|
gameOverOverlay.style.display = 'none'; |
|
|
gameRunning = true; |
|
|
gameLoop(); |
|
|
} |
|
|
|
|
|
|
|
|
function update() { |
|
|
|
|
|
if (dino.jumping) { |
|
|
dino.velocityY += gravity; |
|
|
dino.y += dino.velocityY; |
|
|
|
|
|
if (dino.y >= dino.groundY) { |
|
|
dino.y = dino.groundY; |
|
|
dino.jumping = false; |
|
|
dino.velocityY = 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
obstacleTimer++; |
|
|
if (obstacleTimer >= obstacleInterval - Math.min(score / 10, 50)) { |
|
|
spawnObstacle(); |
|
|
obstacleTimer = 0; |
|
|
} |
|
|
|
|
|
for (let i = obstacles.length - 1; i >= 0; i--) { |
|
|
obstacles[i].x -= gameSpeed; |
|
|
|
|
|
if (obstacles[i].x + obstacles[i].width < 0) { |
|
|
obstacles.splice(i, 1); |
|
|
score++; |
|
|
scoreElement.textContent = score; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
for (let cloud of clouds) { |
|
|
cloud.x -= cloud.speed; |
|
|
if (cloud.x + cloud.width < 0) { |
|
|
cloud.x = canvas.width + 50; |
|
|
cloud.y = 30 + Math.random() * 60; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (score > 0 && score % 10 === 0) { |
|
|
gameSpeed = 6 + Math.floor(score / 10) * 0.5; |
|
|
} |
|
|
|
|
|
|
|
|
if (checkCollision()) { |
|
|
gameOver(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function draw() { |
|
|
|
|
|
const gradient = ctx.createLinearGradient(0, 0, 0, 280); |
|
|
gradient.addColorStop(0, '#87CEEB'); |
|
|
gradient.addColorStop(0.6, '#E0F6FF'); |
|
|
gradient.addColorStop(0.6, '#90EE90'); |
|
|
gradient.addColorStop(1, '#228B22'); |
|
|
ctx.fillStyle = gradient; |
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height); |
|
|
|
|
|
|
|
|
ctx.fillStyle = '#FFD700'; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(700, 50, 30, 0, Math.PI * 2); |
|
|
ctx.fill(); |
|
|
ctx.fillStyle = 'rgba(255, 215, 0, 0.3)'; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(700, 50, 45, 0, Math.PI * 2); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
for (let cloud of clouds) { |
|
|
drawCloud(cloud); |
|
|
} |
|
|
|
|
|
|
|
|
drawGround(); |
|
|
|
|
|
|
|
|
for (let obstacle of obstacles) { |
|
|
if (obstacle.type === 'cactus') { |
|
|
drawCactus(obstacle); |
|
|
} else { |
|
|
drawBird(obstacle); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
drawDino(); |
|
|
} |
|
|
|
|
|
|
|
|
function gameLoop() { |
|
|
if (!gameRunning) return; |
|
|
|
|
|
update(); |
|
|
draw(); |
|
|
requestAnimationFrame(gameLoop); |
|
|
} |
|
|
|
|
|
|
|
|
function jump() { |
|
|
if (!dino.jumping && !dino.ducking) { |
|
|
dino.jumping = true; |
|
|
dino.velocityY = jumpForce; |
|
|
} |
|
|
} |
|
|
|
|
|
function duck(isDucking) { |
|
|
if (!dino.jumping) { |
|
|
dino.ducking = isDucking; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', (e) => { |
|
|
if (!gameRunning) return; |
|
|
|
|
|
if (e.code === 'Space' || e.code === 'ArrowUp') { |
|
|
e.preventDefault(); |
|
|
jump(); |
|
|
} |
|
|
if (e.code === 'ArrowDown') { |
|
|
e.preventDefault(); |
|
|
duck(true); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.addEventListener('keyup', (e) => { |
|
|
if (e.code === 'ArrowDown') { |
|
|
duck(false); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
canvas.addEventListener('touchstart', (e) => { |
|
|
e.preventDefault(); |
|
|
if (gameRunning) { |
|
|
const touch = e.touches[0]; |
|
|
const rect = canvas.getBoundingClientRect(); |
|
|
const y = touch.clientY - rect.top; |
|
|
|
|
|
if (y > rect.height / 2) { |
|
|
duck(true); |
|
|
} else { |
|
|
jump(); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
canvas.addEventListener('touchend', (e) => { |
|
|
duck(false); |
|
|
}); |
|
|
|
|
|
canvas.addEventListener('click', () => { |
|
|
if (gameRunning) { |
|
|
jump(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
startBtn.addEventListener('click', () => { |
|
|
startScreen.style.display = 'none'; |
|
|
resetGame(); |
|
|
}); |
|
|
|
|
|
restartBtn.addEventListener('click', resetGame); |
|
|
|
|
|
|
|
|
initClouds(); |
|
|
draw(); |
|
|
</script> |
|
|
</body> |
|
|
|
|
|
</html> |
