index.html

<!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">
        <!-- Game Header -->
        <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>
        
        <!-- Game Area -->
        <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>
        
        <!-- Game Footer -->
        <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>
        // Game variables
        let gameActive = false;
        let gamePaused = false;
        let score = 0;
        let highScore = localStorage.getItem('akram2019car_highscore') || 0;
        let playerPosition = 1; // 0: left, 1: center, 2: right
        let obstacles = [];
        let gameSpeed = 5;
        let gameLoop;
        let obstacleInterval;
        
        // DOM elements
        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');
        
        // Initialize high score display
        highscoreElement.textContent = highScore;
        
        // Event listeners
        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();
            }
        });
        
        // Touch controls for mobile
        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) { // Swipe left
                moveLeft();
                touchStartX = touchX;
            } else if (diff < -50) { // Swipe right
                moveRight();
                touchStartX = touchX;
            }
        });
        
        // Game functions
        function startGame() {
            gameActive = true;
            score = 0;
            scoreElement.textContent = score;
            playerPosition = 1;
            updatePlayerPosition();
            startScreen.classList.add('hidden');
            road.classList.add('animate-road');
            
            // Clear any existing obstacles
            obstacles.forEach(obstacle => obstacle.element.remove());
            obstacles = [];
            
            // Start game loop
            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');
            
            // Update high score
            if (score > highScore) {
                highScore = score;
                highscoreElement.textContent = highScore;
                localStorage.setItem('akram2019car_highscore', highScore);
                
                // Show new high score animation
                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() {
            // Move obstacles
            obstacles.forEach((obstacle, index) => {
                const element = obstacle.element;
                const top = parseInt(element.style.top) || 0;
                const newTop = top + gameSpeed;
                
                element.style.top = `${newTop}px`;
                
                // Check collision
                if (checkCollision(playerCar, element) && gameActive) {
                    gameOver();
                }
                
                // Remove obstacles that are out of screen
                if (newTop > window.innerHeight) {
                    element.remove();
                    obstacles.splice(index, 1);
                    increaseScore();
                }
            });
            
            // Increase difficulty
            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';
            
            // Random obstacle type (car or box)
            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';
            }
            
            // Set initial position
            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;
            
            // Reset rotation after a short delay
            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;
            
            // Score pop effect
            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>