Spaces:

Okwutecloud
/

undefined

Running

App Files Files Community

Okwutecloud commited on Oct 16

Commit

054b578

verified ·

1 Parent(s): c96693a

Using javascript, bootstrap, and c# and c++ create a motorsport game

Browse files

Files changed (3) hide show

f1game.html +4 -2
index.html +1 -0
motorsport.html +345 -0

f1game.html CHANGED Viewed

@@ -140,12 +140,14 @@
                 New Race
             </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();

                 New Race
             </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 class="text-center mt-3">
+            <a href="motorsport.html" class="text-white hover:text-red-500">Try Our New Motorsport Game</a>
+        </div>
+</div>
     <script>
         feather.replace();

index.html CHANGED Viewed

@@ -105,6 +105,7 @@
                         <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>

                         <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>
+                        <a href="motorsport.html" class="text-sm font-medium hover:text-primary">Motorsport</a>
 </div>
         </div>
     </nav>

motorsport.html ADDED Viewed

	@@ -0,0 +1,345 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Motorsport Racing Game</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-color: #121212;
+            color: white;
+            overflow: hidden;
+            font-family: 'Arial', sans-serif;
+        }
+        #gameContainer {
+            position: relative;
+            width: 100%;
+            height: 100vh;
+            overflow: hidden;
+        }
+        #track {
+            position: absolute;
+            width: 100%;
+            height: 200%;
+            background-color: #333;
+            background-image: linear-gradient(90deg, #555 1px, transparent 1px),
+                              linear-gradient(#555 1px, transparent 1px);
+            background-size: 40px 40px;
+        }
+        #playerCar {
+            position: absolute;
+            width: 60px;
+            height: 120px;
+            background-image: url('http://static.photos/automotive/200x200/1');
+            background-size: contain;
+            background-repeat: no-repeat;
+            bottom: 50px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 10;
+        }
+        .opponent {
+            position: absolute;
+            width: 60px;
+            height: 120px;
+            background-size: contain;
+            background-repeat: no-repeat;
+            z-index: 5;
+        }
+        #hud {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background-color: rgba(0,0,0,0.7);
+            padding: 10px;
+            border-radius: 5px;
+            z-index: 20;
+        }
+        #gameOverModal {
+            z-index: 30;
+        }
+        .control-btn {
+            width: 80px;
+            height: 80px;
+            font-size: 24px;
+        }
+    </style>
+</head>
+<body>
+    <div id="gameContainer">
+        <div id="track"></div>
+        <div id="playerCar"></div>
+        <div id="hud" class="text-white">
+            <h3>LAP: <span id="lapCounter">1</span>/3</h3>
+            <p>POSITION: <span id="position">1</span></p>
+            <p>TIME: <span id="raceTime">0:00.000</span></p>
+            <p>BEST: <span id="bestTime">0:00.000</span></p>
+            <p>SPEED: <span id="speed">200</span> km/h</p>
+        </div>
+        <!-- Game Over Modal -->
+        <div class="modal fade" id="gameOverModal" tabindex="-1" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered">
+                <div class="modal-content bg-dark text-white">
+                    <div class="modal-header border-0">
+                        <h5 class="modal-title">Race Finished</h5>
+                    </div>
+                    <div class="modal-body text-center">
+                        <h2 class="mb-3">Final Position: <span id="finalPosition">1</span></h2>
+                        <p class="mb-1">Best Lap: <span id="finalBestTime">0:00.000</span></p>
+                        <p>Total Time: <span id="finalTotalTime">0:00.000</span></p>
+                    </div>
+                    <div class="modal-footer border-0 justify-content-center">
+                        <button id="restartBtn" class="btn btn-danger px-4">Race Again</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Mobile Controls -->
+        <div class="d-flex justify-content-center gap-4 fixed-bottom mb-4 d-md-none">
+            <button id="leftBtn" class="btn btn-primary control-btn rounded-circle">←</button>
+            <button id="rightBtn" class="btn btn-primary control-btn rounded-circle">→</button>
+        </div>
+    </div>
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Game state
+        const gameState = {
+            lap: 1,
+            position: 1,
+            speed: 200,
+            isRaceOver: false,
+            opponents: [],
+            trackPosition: 0,
+            raceStartTime: 0,
+            currentLapTime: 0,
+            bestLapTime: 0,
+            totalRaceTime: 0,
+            playerX: 50,
+            gameSpeed: 5
+        };
+        // DOM elements
+        const track = document.getElementById('track');
+        const playerCar = document.getElementById('playerCar');
+        const lapCounter = document.getElementById('lapCounter');
+        const positionElement = document.getElementById('position');
+        const raceTimeElement = document.getElementById('raceTime');
+        const bestTimeElement = document.getElementById('bestTime');
+        const speedElement = document.getElementById('speed');
+        const finalPositionElement = document.getElementById('finalPosition');
+        const finalBestTimeElement = document.getElementById('finalBestTime');
+        const finalTotalTimeElement = document.getElementById('finalTotalTime');
+        const gameOverModal = new bootstrap.Modal(document.getElementById('gameOverModal'));
+        const restartBtn = document.getElementById('restartBtn');
+        const leftBtn = document.getElementById('leftBtn');
+        const rightBtn = document.getElementById('rightBtn');
+        // Initialize game
+        function initGame() {
+            // Reset game state
+            gameState.lap = 1;
+            gameState.position = 1;
+            gameState.speed = 200;
+            gameState.isRaceOver = false;
+            gameState.trackPosition = 0;
+            gameState.raceStartTime = Date.now();
+            gameState.currentLapTime = 0;
+            gameState.totalRaceTime = 0;
+            gameState.playerX = 50;
+            gameState.gameSpeed = 5;
+            // Clear existing opponents
+            gameState.opponents.forEach(opponent => {
+                if (opponent.element && opponent.element.parentNode) {
+                    opponent.element.parentNode.removeChild(opponent.element);
+                }
+            });
+            gameState.opponents = [];
+            // Update UI
+            lapCounter.textContent = gameState.lap;
+            positionElement.textContent = gameState.position;
+            raceTimeElement.textContent = formatTime(0);
+            bestTimeElement.textContent = formatTime(0);
+            speedElement.textContent = gameState.speed;
+            playerCar.style.left = `${gameState.playerX}%`;
+            // Create opponents
+            createOpponents();
+            // Start game loop
+            requestAnimationFrame(gameLoop);
+        }
+        // Game loop
+        function gameLoop() {
+            if (gameState.isRaceOver) return;
+            // Move track
+            gameState.trackPosition += gameState.gameSpeed;
+            track.style.backgroundPositionY = `${gameState.trackPosition}px`;
+            // Move opponents
+            moveOpponents();
+            // Update lap time
+            updateLapTime();
+            // Check lap completion
+            if (gameState.trackPosition % 5000 < gameState.gameSpeed) {
+                completeLap();
+            }
+            requestAnimationFrame(gameLoop);
+        }
+        // Create opponents
+        function createOpponents() {
+            const opponentImages = [
+                'http://static.photos/automotive/200x200/2',
+                'http://static.photos/automotive/200x200/3',
+                'http://static.photos/automotive/200x200/4',
+                'http://static.photos/automotive/200x200/5'
+            ];
+            for (let i = 0; i < 5; i++) {
+                const opponent = document.createElement('div');
+                opponent.className = 'opponent';
+                opponent.style.backgroundImage = `url('${opponentImages[i % opponentImages.length]}')`;
+                const xPos = 30 + Math.random() * 40;
+                const yPos = -200 - Math.random() * 300;
+                opponent.style.left = `${xPos}%`;
+                opponent.style.top = `${yPos}px`;
+                document.getElementById('gameContainer').appendChild(opponent);
+                gameState.opponents.push({
+                    element: opponent,
+                    x: xPos,
+                    y: yPos,
+                    speed: 3 + Math.random() * 3
+                });
+            }
+        }
+        // Move opponents
+        function moveOpponents() {
+            gameState.opponents.forEach((opponent, index) => {
+                opponent.y += opponent.speed;
+                opponent.x += Math.sin(Date.now() / 1000 + index) * 0.5;
+                // Wrap around track
+                if (opponent.y > window.innerHeight) {
+                    opponent.y = -200;
+                    opponent.x = 30 + Math.random() * 40;
+                }
+                opponent.element.style.top = `${opponent.y}px`;
+                opponent.element.style.left = `${opponent.x}%`;
+                // Simple collision detection
+                if (Math.abs(opponent.x - gameState.playerX) < 10 &&
+                    Math.abs(opponent.y - (window.innerHeight - 170)) < 100) {
+                    handleCollision();
+                }
+            });
+        }
+        // Handle collision
+        function handleCollision() {
+            gameState.speed = Math.max(100, gameState.speed - 20);
+            speedElement.textContent = gameState.speed;
+            gameState.gameSpeed = Math.max(2, gameState.gameSpeed - 0.5);
+        }
+        // Update lap time
+        function updateLapTime() {
+            const currentTime = Date.now();
+            gameState.currentLapTime = currentTime - (gameState.raceStartTime + gameState.totalRaceTime);
+            gameState.totalRaceTime = currentTime - gameState.raceStartTime;
+            raceTimeElement.textContent = formatTime(gameState.currentLapTime);
+            speedElement.textContent = Math.floor(gameState.speed + Math.random() * 5);
+        }
+        // Format time
+        function formatTime(ms) {
+            const minutes = Math.floor(ms / 60000);
+            const seconds = Math.floor((ms % 60000) / 1000);
+            const milliseconds = ms % 1000;
+            return `${minutes}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}`;
+        }
+        // Complete a lap
+        function completeLap() {
+            gameState.lap++;
+            lapCounter.textContent = gameState.lap;
+            // Update best lap time
+            if (gameState.currentLapTime < gameState.bestLapTime || gameState.bestLapTime === 0) {
+                gameState.bestLapTime = gameState.currentLapTime;
+                bestTimeElement.textContent = formatTime(gameState.bestLapTime);
+            }
+            // Check race completion
+            if (gameState.lap > 3) {
+                finishRace();
+            } else {
+                // Reset lap timer
+                gameState.raceStartTime = Date.now() - gameState.totalRaceTime;
+            }
+        }
+        // Finish race
+        function finishRace() {
+            gameState.isRaceOver = true;
+            finalPositionElement.textContent = gameState.position;
+            finalBestTimeElement.textContent = formatTime(gameState.bestLapTime);
+            finalTotalTimeElement.textContent = formatTime(gameState.totalRaceTime);
+            gameOverModal.show();
+        }
+        // Keyboard controls
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft') {
+                gameState.playerX = Math.max(20, gameState.playerX - 5);
+            } else if (e.key === 'ArrowRight') {
+                gameState.playerX = Math.min(80, gameState.playerX + 5);
+            }
+            playerCar.style.left = `${gameState.playerX}%`;
+        });
+        // Touch controls
+        leftBtn.addEventListener('click', () => {
+            gameState.playerX = Math.max(20, gameState.playerX - 5);
+            playerCar.style.left = `${gameState.playerX}%`;
+        });
+        rightBtn.addEventListener('click', () => {
+            gameState.playerX = Math.min(80, gameState.playerX + 5);
+            playerCar.style.left = `${gameState.playerX}%`;
+        });
+        // Restart game
+        restartBtn.addEventListener('click', () => {
+            gameOverModal.hide();
+            initGame();
+        });
+        // Initialize game when page loads
+        window.addEventListener('load', initGame);
+    </script>
+</body>
+</html>