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