Spaces:

Okwutecloud
/

undefined

Running

App Files Files Community

Okwutecloud commited on Oct 16

Commit

5b76f58

verified ·

1 Parent(s): e0e33ad

Create a formula one game

Browse files

Files changed (3) hide show

f1game.html +251 -0
formula1.html +5 -3
index.html +1 -0

f1game.html ADDED Viewed

	@@ -0,0 +1,251 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>F1 Racing Game</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        body {
+            background-color: #15151E;
+            color: #F4F4F4;
+            overflow: hidden;
+            font-family: 'Arial', sans-serif;
+        }
+        .game-container {
+            background-image: url('http://static.photos/sport/1200x630/10');
+            background-size: cover;
+            background-position: center;
+            height: 100vh;
+            position: relative;
+        }
+        .car {
+            position: absolute;
+            width: 100px;
+            height: 200px;
+            background-image: url('http://static.photos/automotive/200x200/1');
+            background-size: contain;
+            background-repeat: no-repeat;
+            bottom: 50px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .obstacle {
+            position: absolute;
+            width: 80px;
+            height: 120px;
+            background-image: url('http://static.photos/automotive/200x200/2');
+            background-size: contain;
+            background-repeat: no-repeat;
+        }
+        .score-board {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background-color: rgba(0,0,0,0.7);
+            padding: 10px;
+            border-radius: 5px;
+            border-left: 4px solid #E10600;
+        }
+        .game-over {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: rgba(0,0,0,0.9);
+            padding: 30px;
+            border-radius: 10px;
+            text-align: center;
+            display: none;
+        }
+        .controls {
+            position: absolute;
+            bottom: 20px;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+        }
+        .control-btn {
+            background-color: #E10600;
+            color: white;
+            border: none;
+            padding: 15px 25px;
+            border-radius: 50%;
+            font-size: 20px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <div class="game-container" id="gameArea">
+        <div class="score-board">
+            <h3 class="font-bold">SCORE: <span id="score">0</span></h3>
+            <p>HIGH SCORE: <span id="highScore">0</span></p>
+        </div>
+        <div class="car" id="playerCar"></div>
+        <div class="game-over" id="gameOver">
+            <h2 class="text-3xl font-bold text-red-500 mb-4">GAME OVER</h2>
+            <p class="text-xl mb-6">Your Score: <span id="finalScore">0</span></p>
+            <button id="restartBtn" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-6 rounded">
+                Play Again
+            </button>
+        </div>
+        <div class="controls">
+            <button class="control-btn" id="leftBtn"><i data-feather="chevron-left"></i></button>
+            <button class="control-btn" id="rightBtn"><i data-feather="chevron-right"></i></button>
+        </div>
+    </div>
+    <script>
+        feather.replace();
+        // Game variables
+        let score = 0;
+        let highScore = localStorage.getItem('f1HighScore') || 0;
+        let gameSpeed = 5;
+        let isGameOver = false;
+        let obstacles = [];
+        let animationId;
+        // DOM elements
+        const gameArea = document.getElementById('gameArea');
+        const playerCar = document.getElementById('playerCar');
+        const scoreElement = document.getElementById('score');
+        const highScoreElement = document.getElementById('highScore');
+        const finalScoreElement = document.getElementById('finalScore');
+        const gameOverElement = document.getElementById('gameOver');
+        const restartBtn = document.getElementById('restartBtn');
+        const leftBtn = document.getElementById('leftBtn');
+        const rightBtn = document.getElementById('rightBtn');
+        // Set high score display
+        highScoreElement.textContent = highScore;
+        // Player car position
+        let carPosition = 50; // percentage from left
+        // Keyboard controls
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft' && carPosition > 10) {
+                carPosition -= 10;
+            } else if (e.key === 'ArrowRight' && carPosition < 90) {
+                carPosition += 10;
+            }
+            updateCarPosition();
+        });
+        // Touch controls
+        leftBtn.addEventListener('click', () => {
+            if (carPosition > 10) {
+                carPosition -= 10;
+                updateCarPosition();
+            }
+        });
+        rightBtn.addEventListener('click', () => {
+            if (carPosition < 90) {
+                carPosition += 10;
+                updateCarPosition();
+            }
+        });
+        function updateCarPosition() {
+            playerCar.style.left = `${carPosition}%`;
+        }
+        // Create obstacles
+        function createObstacle() {
+            if (isGameOver) return;
+            const obstacle = document.createElement('div');
+            obstacle.className = 'obstacle';
+            obstacle.style.left = `${Math.random() * 80 + 10}%`;
+            obstacle.style.top = '-120px';
+            gameArea.appendChild(obstacle);
+            obstacles.push(obstacle);
+            setTimeout(createObstacle, Math.random() * 2000 + 1000);
+        }
+        // Move obstacles
+        function moveObstacles() {
+            obstacles.forEach((obstacle, index) => {
+                const obstacleTop = parseInt(obstacle.style.top) + gameSpeed;
+                obstacle.style.top = `${obstacleTop}px`;
+                // Check collision
+                if (obstacleTop > gameArea.offsetHeight - 200 &&
+                    obstacleTop < gameArea.offsetHeight - 50 &&
+                    Math.abs(parseInt(obstacle.style.left) - carPosition) < 10) {
+                    gameOver();
+                }
+                // Remove obstacle when off screen
+                if (obstacleTop > gameArea.offsetHeight) {
+                    obstacle.remove();
+                    obstacles.splice(index, 1);
+                    score++;
+                    scoreElement.textContent = score;
+                    // Increase speed every 5 points
+                    if (score % 5 === 0) {
+                        gameSpeed += 0.5;
+                    }
+                }
+            });
+            if (!isGameOver) {
+                animationId = requestAnimationFrame(moveObstacles);
+            }
+        }
+        // Game over function
+        function gameOver() {
+            isGameOver = true;
+            cancelAnimationFrame(animationId);
+            // Update high score
+            if (score > highScore) {
+                highScore = score;
+                localStorage.setItem('f1HighScore', highScore);
+                highScoreElement.textContent = highScore;
+            }
+            finalScoreElement.textContent = score;
+            gameOverElement.style.display = 'block';
+        }
+        // Restart game
+        function restartGame() {
+            // Clear obstacles
+            obstacles.forEach(obstacle => obstacle.remove());
+            obstacles = [];
+            // Reset variables
+            score = 0;
+            gameSpeed = 5;
+            isGameOver = false;
+            // Update displays
+            scoreElement.textContent = score;
+            gameOverElement.style.display = 'none';
+            // Start game
+            createObstacle();
+            moveObstacles();
+        }
+        restartBtn.addEventListener('click', restartGame);
+        // Start game
+        createObstacle();
+        moveObstacles();
+    </script>
+</body>
+</html>

formula1.html CHANGED Viewed

@@ -45,8 +45,9 @@
                     <a href="#" class="hover:text-f1red">News</a>
                     <a href="#" class="hover:text-f1red">Schedule</a>
                     <a href="#" class="hover:text-f1red">Drivers</a>
-                    <a href="#" class="hover:text-f1red">Teams</a>
-                    <a href="#" class="hover:text-f1red">Standings</a>
                 </div>
             </div>
             <div class="flex items-center space-x-4">
@@ -394,7 +395,8 @@
                         <li><a href="#" class="text-gray-400 hover:text-f1red">Schedule</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-f1red">Drivers</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-f1red">Teams</a></li>
-                    </ul>
                 </div>
                 <div>
                     <h3 class="text-lg font-bold mb-4">Follow Us</h3>

                     <a href="#" class="hover:text-f1red">News</a>
                     <a href="#" class="hover:text-f1red">Schedule</a>
                     <a href="#" class="hover:text-f1red">Drivers</a>
+                            <a href="#" class="hover:text-f1red">Teams</a>
+                            <a href="f1game.html" class="hover:text-f1red">Game</a>
+<a href="#" class="hover:text-f1red">Standings</a>
                 </div>
             </div>
             <div class="flex items-center space-x-4">
                         <li><a href="#" class="text-gray-400 hover:text-f1red">Schedule</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-f1red">Drivers</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-f1red">Teams</a></li>
+                        <li><a href="f1game.html" class="text-gray-400 hover:text-f1red">F1 Game</a></li>
+</ul>
                 </div>
                 <div>
                     <h3 class="text-lg font-bold mb-4">Follow Us</h3>

index.html CHANGED Viewed

@@ -104,6 +104,7 @@
                         <a href="#" class="text-sm font-medium hover:text-primary">Toys & Games</a>
                         <a href="#" class="text-sm font-medium hover:text-primary">Pet Supplies</a>
                         <a href="formula1.html" class="text-sm font-medium hover:text-primary">Sports</a>
 </div>
         </div>
     </nav>

                         <a href="#" class="text-sm font-medium hover:text-primary">Toys & Games</a>
                         <a href="#" class="text-sm font-medium hover:text-primary">Pet Supplies</a>
                         <a href="formula1.html" class="text-sm font-medium hover:text-primary">Sports</a>
+                        <a href="f1game.html" class="text-sm font-medium hover:text-primary">F1 Game</a>
 </div>
         </div>
     </nav>