| <!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> |
