|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Akram 2019Car - Racing Game</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Racing Sans One', sans-serif; |
|
|
overflow: hidden; |
|
|
background-color: #111; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.road { |
|
|
background: repeating-linear-gradient( |
|
|
0deg, |
|
|
#333 0, |
|
|
#333 10px, |
|
|
#fff 10px, |
|
|
#fff 20px |
|
|
); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.car { |
|
|
transition: transform 0.1s; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.obstacle { |
|
|
position: absolute; |
|
|
z-index: 5; |
|
|
} |
|
|
|
|
|
.game-container { |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
@keyframes roadMove { |
|
|
from { background-position: 0 0; } |
|
|
to { background-position: 0 100px; } |
|
|
} |
|
|
|
|
|
.animate-road { |
|
|
animation: roadMove 0.5s linear infinite; |
|
|
} |
|
|
|
|
|
.score-pop { |
|
|
animation: scorePop 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes scorePop { |
|
|
0% { transform: scale(0.5); opacity: 0; } |
|
|
50% { transform: scale(1.2); opacity: 1; } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-black text-white"> |
|
|
<div class="game-container w-full h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-gray-900 p-4 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<h1 class="text-2xl md:text-3xl font-bold text-red-500">AKRAM 2019CAR</h1> |
|
|
<span class="ml-2 text-yellow-400 text-xs md:text-sm">v1.0</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="bg-gray-800 px-3 py-1 rounded-full flex items-center"> |
|
|
<span class="text-yellow-400 mr-1">🏆</span> |
|
|
<span id="score" class="font-bold">0</span> |
|
|
</div> |
|
|
<div class="bg-gray-800 px-3 py-1 rounded-full flex items-center"> |
|
|
<span class="text-blue-400 mr-1">⚡</span> |
|
|
<span id="highscore" class="font-bold">0</span> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex-1 relative overflow-hidden"> |
|
|
<div id="start-screen" class="absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center z-20"> |
|
|
<h2 class="text-4xl md:text-6xl font-bold text-red-500 mb-6">AKRAM 2019CAR</h2> |
|
|
<p class="text-xl mb-8 text-center px-4">Race against time and avoid obstacles!</p> |
|
|
<button id="start-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full text-xl transition-all transform hover:scale-105"> |
|
|
START RACE |
|
|
</button> |
|
|
<div class="mt-8 text-gray-400"> |
|
|
<p class="mb-2">← → Arrow keys to move</p> |
|
|
<p>Space to pause</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="pause-screen" class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center z-20 hidden"> |
|
|
<h2 class="text-4xl font-bold text-yellow-400 mb-6">GAME PAUSED</h2> |
|
|
<button id="resume-btn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full text-xl transition-all transform hover:scale-105"> |
|
|
RESUME |
|
|
</button> |
|
|
<button id="restart-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full text-xl mt-4 transition-all transform hover:scale-105"> |
|
|
RESTART |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="game-over-screen" class="absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center z-20 hidden"> |
|
|
<h2 class="text-4xl font-bold text-red-500 mb-2">GAME OVER</h2> |
|
|
<div class="text-2xl mb-6"> |
|
|
<span>Your Score: </span> |
|
|
<span id="final-score" class="text-yellow-400">0</span> |
|
|
</div> |
|
|
<button id="play-again-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full text-xl transition-all transform hover:scale-105"> |
|
|
PLAY AGAIN |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="game-area" class="relative w-full h-full"> |
|
|
<div id="road" class="road w-full h-full relative animate-road"></div> |
|
|
<div id="player-car" class="car absolute bottom-20 left-1/2 transform -translate-x-1/2 w-16 h-28 bg-red-600 rounded-lg"> |
|
|
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-12 h-4 bg-red-700 rounded-t-sm"></div> |
|
|
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-14 h-6 bg-red-800 rounded-b-lg"></div> |
|
|
<div class="absolute top-1/4 left-0 w-4 h-8 bg-black bg-opacity-30 rounded-r-sm"></div> |
|
|
<div class="absolute top-1/4 right-0 w-4 h-8 bg-black bg-opacity-30 rounded-l-sm"></div> |
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-1 bg-yellow-400"></div> |
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1 h-8 bg-yellow-400"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 p-2 text-center text-xs text-gray-500"> |
|
|
© 2023 Akram 2019Car Racing Game | Developed with HTML5, CSS3 & JavaScript |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let gameActive = false; |
|
|
let gamePaused = false; |
|
|
let score = 0; |
|
|
let highScore = localStorage.getItem('akram2019car_highscore') || 0; |
|
|
let playerPosition = 1; |
|
|
let obstacles = []; |
|
|
let gameSpeed = 5; |
|
|
let gameLoop; |
|
|
let obstacleInterval; |
|
|
|
|
|
|
|
|
const startScreen = document.getElementById('start-screen'); |
|
|
const pauseScreen = document.getElementById('pause-screen'); |
|
|
const gameOverScreen = document.getElementById('game-over-screen'); |
|
|
const gameArea = document.getElementById('game-area'); |
|
|
const road = document.getElementById('road'); |
|
|
const playerCar = document.getElementById('player-car'); |
|
|
const scoreElement = document.getElementById('score'); |
|
|
const highscoreElement = document.getElementById('highscore'); |
|
|
const finalScoreElement = document.getElementById('final-score'); |
|
|
const startBtn = document.getElementById('start-btn'); |
|
|
const resumeBtn = document.getElementById('resume-btn'); |
|
|
const restartBtn = document.getElementById('restart-btn'); |
|
|
const playAgainBtn = document.getElementById('play-again-btn'); |
|
|
|
|
|
|
|
|
highscoreElement.textContent = highScore; |
|
|
|
|
|
|
|
|
startBtn.addEventListener('click', startGame); |
|
|
resumeBtn.addEventListener('click', resumeGame); |
|
|
restartBtn.addEventListener('click', restartGame); |
|
|
playAgainBtn.addEventListener('click', restartGame); |
|
|
|
|
|
document.addEventListener('keydown', (e) => { |
|
|
if (!gameActive) return; |
|
|
|
|
|
if (e.code === 'Space') { |
|
|
if (gamePaused) { |
|
|
resumeGame(); |
|
|
} else { |
|
|
pauseGame(); |
|
|
} |
|
|
return; |
|
|
} |
|
|
|
|
|
if (gamePaused) return; |
|
|
|
|
|
if (e.code === 'ArrowLeft') { |
|
|
moveLeft(); |
|
|
} else if (e.code === 'ArrowRight') { |
|
|
moveRight(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
let touchStartX = 0; |
|
|
gameArea.addEventListener('touchstart', (e) => { |
|
|
if (!gameActive || gamePaused) return; |
|
|
touchStartX = e.touches[0].clientX; |
|
|
}); |
|
|
|
|
|
gameArea.addEventListener('touchmove', (e) => { |
|
|
if (!gameActive || gamePaused) return; |
|
|
e.preventDefault(); |
|
|
const touchX = e.touches[0].clientX; |
|
|
const diff = touchStartX - touchX; |
|
|
|
|
|
if (diff > 50) { |
|
|
moveLeft(); |
|
|
touchStartX = touchX; |
|
|
} else if (diff < -50) { |
|
|
moveRight(); |
|
|
touchStartX = touchX; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function startGame() { |
|
|
gameActive = true; |
|
|
score = 0; |
|
|
scoreElement.textContent = score; |
|
|
playerPosition = 1; |
|
|
updatePlayerPosition(); |
|
|
startScreen.classList.add('hidden'); |
|
|
road.classList.add('animate-road'); |
|
|
|
|
|
|
|
|
obstacles.forEach(obstacle => obstacle.element.remove()); |
|
|
obstacles = []; |
|
|
|
|
|
|
|
|
gameLoop = setInterval(updateGame, 20); |
|
|
obstacleInterval = setInterval(createObstacle, 1500); |
|
|
} |
|
|
|
|
|
function pauseGame() { |
|
|
gamePaused = true; |
|
|
pauseScreen.classList.remove('hidden'); |
|
|
road.classList.remove('animate-road'); |
|
|
clearInterval(gameLoop); |
|
|
clearInterval(obstacleInterval); |
|
|
} |
|
|
|
|
|
function resumeGame() { |
|
|
gamePaused = false; |
|
|
pauseScreen.classList.add('hidden'); |
|
|
road.classList.add('animate-road'); |
|
|
gameLoop = setInterval(updateGame, 20); |
|
|
obstacleInterval = setInterval(createObstacle, 1500); |
|
|
} |
|
|
|
|
|
function restartGame() { |
|
|
pauseScreen.classList.add('hidden'); |
|
|
gameOverScreen.classList.add('hidden'); |
|
|
startGame(); |
|
|
} |
|
|
|
|
|
function gameOver() { |
|
|
gameActive = false; |
|
|
gameOverScreen.classList.remove('hidden'); |
|
|
finalScoreElement.textContent = score; |
|
|
road.classList.remove('animate-road'); |
|
|
|
|
|
|
|
|
if (score > highScore) { |
|
|
highScore = score; |
|
|
highscoreElement.textContent = highScore; |
|
|
localStorage.setItem('akram2019car_highscore', highScore); |
|
|
|
|
|
|
|
|
const highScoreElement = document.createElement('div'); |
|
|
highScoreElement.className = 'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-4xl font-bold text-yellow-400 score-pop'; |
|
|
highScoreElement.textContent = 'NEW HIGH SCORE!'; |
|
|
gameArea.appendChild(highScoreElement); |
|
|
|
|
|
setTimeout(() => { |
|
|
highScoreElement.remove(); |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
clearInterval(gameLoop); |
|
|
clearInterval(obstacleInterval); |
|
|
} |
|
|
|
|
|
function updateGame() { |
|
|
|
|
|
obstacles.forEach((obstacle, index) => { |
|
|
const element = obstacle.element; |
|
|
const top = parseInt(element.style.top) || 0; |
|
|
const newTop = top + gameSpeed; |
|
|
|
|
|
element.style.top = `${newTop}px`; |
|
|
|
|
|
|
|
|
if (checkCollision(playerCar, element) && gameActive) { |
|
|
gameOver(); |
|
|
} |
|
|
|
|
|
|
|
|
if (newTop > window.innerHeight) { |
|
|
element.remove(); |
|
|
obstacles.splice(index, 1); |
|
|
increaseScore(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
if (score > 0 && score % 10 === 0) { |
|
|
gameSpeed = 5 + Math.floor(score / 10); |
|
|
} |
|
|
} |
|
|
|
|
|
function createObstacle() { |
|
|
if (!gameActive || gamePaused) return; |
|
|
|
|
|
const positions = [0, 1, 2]; |
|
|
const randomPos = positions[Math.floor(Math.random() * positions.length)]; |
|
|
|
|
|
const obstacle = document.createElement('div'); |
|
|
obstacle.className = 'obstacle'; |
|
|
|
|
|
|
|
|
const obstacleType = Math.random() > 0.5 ? 'car' : 'box'; |
|
|
|
|
|
if (obstacleType === 'car') { |
|
|
obstacle.className += ' w-16 h-28 bg-blue-600 rounded-lg'; |
|
|
obstacle.innerHTML = ` |
|
|
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-12 h-4 bg-blue-700 rounded-t-sm"></div> |
|
|
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-14 h-6 bg-blue-800 rounded-b-lg"></div> |
|
|
<div class="absolute top-1/4 left-0 w-4 h-8 bg-black bg-opacity-30 rounded-r-sm"></div> |
|
|
<div class="absolute top-1/4 right-0 w-4 h-8 bg-black bg-opacity-30 rounded-l-sm"></div> |
|
|
`; |
|
|
} else { |
|
|
obstacle.className += ' w-14 h-14 bg-gray-500 rounded-sm'; |
|
|
} |
|
|
|
|
|
|
|
|
let leftPosition; |
|
|
if (randomPos === 0) { |
|
|
leftPosition = '20%'; |
|
|
} else if (randomPos === 1) { |
|
|
leftPosition = '50%'; |
|
|
} else { |
|
|
leftPosition = '80%'; |
|
|
} |
|
|
|
|
|
obstacle.style.left = leftPosition; |
|
|
obstacle.style.top = '-100px'; |
|
|
|
|
|
gameArea.appendChild(obstacle); |
|
|
obstacles.push({ |
|
|
element: obstacle, |
|
|
position: randomPos |
|
|
}); |
|
|
} |
|
|
|
|
|
function moveLeft() { |
|
|
if (playerPosition > 0) { |
|
|
playerPosition--; |
|
|
updatePlayerPosition(); |
|
|
} |
|
|
} |
|
|
|
|
|
function moveRight() { |
|
|
if (playerPosition < 2) { |
|
|
playerPosition++; |
|
|
updatePlayerPosition(); |
|
|
} |
|
|
} |
|
|
|
|
|
function updatePlayerPosition() { |
|
|
let leftPosition; |
|
|
if (playerPosition === 0) { |
|
|
leftPosition = '20%'; |
|
|
playerCar.style.transform = 'translateX(-50%) rotate(-10deg)'; |
|
|
} else if (playerPosition === 1) { |
|
|
leftPosition = '50%'; |
|
|
playerCar.style.transform = 'translateX(-50%) rotate(0deg)'; |
|
|
} else { |
|
|
leftPosition = '80%'; |
|
|
playerCar.style.transform = 'translateX(-50%) rotate(10deg)'; |
|
|
} |
|
|
|
|
|
playerCar.style.left = leftPosition; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
if (playerPosition === 0) { |
|
|
playerCar.style.transform = 'translateX(-50%) rotate(-5deg)'; |
|
|
} else if (playerPosition === 2) { |
|
|
playerCar.style.transform = 'translateX(-50%) rotate(5deg)'; |
|
|
} else { |
|
|
playerCar.style.transform = 'translateX(-50%) rotate(0deg)'; |
|
|
} |
|
|
}, 100); |
|
|
} |
|
|
|
|
|
function increaseScore() { |
|
|
score++; |
|
|
scoreElement.textContent = score; |
|
|
|
|
|
|
|
|
scoreElement.classList.add('score-pop'); |
|
|
setTimeout(() => { |
|
|
scoreElement.classList.remove('score-pop'); |
|
|
}, 200); |
|
|
} |
|
|
|
|
|
function checkCollision(player, obstacle) { |
|
|
const playerRect = player.getBoundingClientRect(); |
|
|
const obstacleRect = obstacle.getBoundingClientRect(); |
|
|
|
|
|
return !( |
|
|
playerRect.top > obstacleRect.bottom || |
|
|
playerRect.right < obstacleRect.left || |
|
|
playerRect.bottom < obstacleRect.top || |
|
|
playerRect.left > obstacleRect.right |
|
|
); |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=akram2019/https-cnetyjdg-manus-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
