Spaces:

Greats
/

clone

Running

App Files Files Community

Greats commited on May 3

Commit

7c920f9

verified ·

1 Parent(s): 676e5bb

Add 2 files

Browse files

Files changed (2) hide show

index.html +73 -755
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,37 +3,26 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GTA 5 Online Clone</title>
     <style>
         body {
             margin: 0;
-            padding: 0;
             overflow: hidden;
             background-color: #222;
             font-family: Arial, sans-serif;
         }
-        #gameContainer {
-            position: relative;
-            width: 100vw;
-            height: 100vh;
-        }
         #gameCanvas {
             display: block;
             background-color: #87CEEB;
         }
-        #uiContainer {
             position: absolute;
             top: 10px;
             left: 10px;
             color: white;
             font-size: 16px;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-            pointer-events: none;
         }
         #startScreen {
             position: absolute;
             top: 0;
@@ -46,111 +35,39 @@
             justify-content: center;
             align-items: center;
             color: white;
-            z-index: 100;
-        }
-        #startScreen h1 {
-            font-size: 48px;
-            color: #FF4500;
-            margin-bottom: 30px;
-            text-shadow: 0 0 10px rgba(255, 69, 0, 0.7);
         }
         #startButton {
             padding: 15px 30px;
-            font-size: 24px;
             background-color: #FF4500;
             color: white;
             border: none;
             border-radius: 5px;
             cursor: pointer;
-            transition: all 0.3s;
-        }
-        #startButton:hover {
-            background-color: #FF6347;
-            transform: scale(1.05);
-        }
-        #wantedLevel {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            color: white;
-            font-size: 24px;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-        }
-        .wanted-star {
-            color: yellow;
-            margin-left: 5px;
-        }
-        #missionText {
-            position: absolute;
-            bottom: 20px;
-            left: 0;
-            width: 100%;
-            text-align: center;
-            color: white;
-            font-size: 24px;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-            opacity: 0;
-            transition: opacity 0.5s;
-        }
-        #radio {
-            position: absolute;
-            bottom: 60px;
-            left: 10px;
-            color: white;
-            font-size: 14px;
-            font-style: italic;
         }
     </style>
 </head>
 <body>
-    <div id="gameContainer">
-        <canvas id="gameCanvas"></canvas>
-        <div id="uiContainer">
-            <div>Money: $<span id="money">0</span></div>
-            <div>Score: <span id="score">0</span></div>
-            <div>Health: <span id="health">100</span>%</div>
-            <div>Speed: <span id="speed">0</span> mph</div>
-        </div>
-        <div id="wantedLevel">
-            Wanted: <span id="wantedStars"></span>
-        </div>
-        <div id="missionText"></div>
-        <div id="radio">
-            Radio: <span id="radioStation">Off</span>
-        </div>
-        <div id="startScreen">
-            <h1>GTA 5 Online Clone</h1>
-            <p>Drive around the city, complete missions, and avoid the police!</p>
-            <p>Controls: Arrow keys to drive, Space to handbrake, H to honk</p>
-            <button id="startButton">START GAME</button>
-        </div>
     </div>
     <script>
-        // Game variables
         const canvas = document.getElementById('gameCanvas');
         const ctx = canvas.getContext('2d');
         const startScreen = document.getElementById('startScreen');
         const startButton = document.getElementById('startButton');
         const moneyDisplay = document.getElementById('money');
-        const scoreDisplay = document.getElementById('score');
         const healthDisplay = document.getElementById('health');
-        const speedDisplay = document.getElementById('speed');
-        const wantedStarsDisplay = document.getElementById('wantedStars');
-        const missionText = document.getElementById('missionText');
-        const radioStation = document.getElementById('radioStation');
         // Set canvas size
         canvas.width = window.innerWidth;
@@ -158,25 +75,8 @@
         // Game state
         let gameRunning = false;
-        let lastTime = 0;
-        let score = 0;
         let money = 0;
-        let playerHealth = 100;
-        let wantedLevel = 0;
-        let currentMission = null;
-        let missionCompleteTimeout = null;
-        // Radio stations
-        const radioStations = [
-            "Off",
-            "Los Santos Rock Radio",
-            "Space 103.2",
-            "West Coast Classics",
-            "FlyLo FM",
-            "The Lowdown 91.1",
-            "Radio Mirror Park"
-        ];
-        let currentRadioIndex = 0;
         // Player car
         const player = {
@@ -184,329 +84,62 @@
             y: canvas.height / 2,
             width: 40,
             height: 70,
-            color: '#FF4500',
             speed: 0,
-            maxSpeed: 10,
-            acceleration: 0.1,
-            deceleration: 0.05,
             rotation: 0,
-            rotationSpeed: 0.05,
-            health: 100,
-            lastCollisionTime: 0
         };
-        // Map elements
         const roads = [];
-        const buildings = [];
-        const trees = [];
-        const npcCars = [];
-        const policeCars = [];
-        const collectibles = [];
-        const explosions = [];
-        // Generate city
         function generateCity() {
-            // Clear existing elements
             roads.length = 0;
-            buildings.length = 0;
-            trees.length = 0;
-            // Generate roads
-            const roadWidth = 200;
-            const horizontalRoadCount = Math.ceil(canvas.height / 300);
-            const verticalRoadCount = Math.ceil(canvas.width / 300);
-            for (let i = 0; i < horizontalRoadCount; i++) {
                 roads.push({
                     x: 0,
-                    y: i * 300,
                     width: canvas.width,
-                    height: roadWidth,
-                    horizontal: true
                 });
             }
-            for (let i = 0; i < verticalRoadCount; i++) {
                 roads.push({
-                    x: i * 300,
                     y: 0,
-                    width: roadWidth,
-                    height: canvas.height,
-                    horizontal: false
-                });
-            }
-            // Generate buildings
-            for (let i = 0; i < 50; i++) {
-                const size = 50 + Math.random() * 100;
-                buildings.push({
-                    x: Math.random() * canvas.width,
-                    y: Math.random() * canvas.height,
-                    width: size,
-                    height: size,
-                    color: `rgb(${100 + Math.random() * 155}, ${100 + Math.random() * 155}, ${100 + Math.random() * 155})`
-                });
-            }
-            // Generate trees
-            for (let i = 0; i < 100; i++) {
-                trees.push({
-                    x: Math.random() * canvas.width,
-                    y: Math.random() * canvas.height,
-                    size: 20 + Math.random() * 30,
-                    color: '#228B22'
                 });
             }
-            // Position player at a road intersection
-            const road = roads[0];
-            player.x = road.x + road.width / 2;
-            player.y = road.y + road.height / 2;
         }
-        // Generate NPC cars
-        function generateNPC() {
-            npcCars.length = 0;
-            for (let i = 0; i < 10; i++) {
-                const road = roads[Math.floor(Math.random() * roads.length)];
-                npcCars.push({
-                    x: road.horizontal ?
-                        Math.random() * canvas.width :
-                        road.x + road.width / 2,
-                    y: road.horizontal ?
-                        road.y + road.height / 2 :
-                        Math.random() * canvas.height,
-                    width: 30,
-                    height: 50,
-                    color: `hsl(${Math.random() * 360}, 70%, 50%)`,
-                    speed: 2 + Math.random() * 3,
-                    direction: road.horizontal ? (Math.random() > 0.5 ? 0 : Math.PI) : (Math.random() > 0.5 ? Math.PI/2 : 3*Math.PI/2),
-                    road: road
-                });
-            }
-        }
-        // Generate collectibles
-        function generateCollectibles() {
-            collectibles.length = 0;
-            for (let i = 0; i < 15; i++) {
-                collectibles.push({
-                    x: Math.random() * canvas.width,
-                    y: Math.random() * canvas.height,
-                    radius: 15,
-                    type: Math.random() > 0.5 ? 'money' : 'health',
-                    value: Math.random() > 0.7 ? 100 : 50,
-                    collected: false
-                });
-            }
-        }
-        // Draw rotated rectangle (for cars)
         function drawRotatedRect(x, y, width, height, rotation, color) {
             ctx.save();
             ctx.translate(x, y);
             ctx.rotate(rotation);
             ctx.fillStyle = color;
-            ctx.fillRect(-width / 2, -height / 2, width, height);
-            // Add some details to make it look more like a car
-            ctx.fillStyle = '#222';
-            ctx.fillRect(-width / 2 + 5, -height / 2 + 5, width - 10, height / 3);
             ctx.restore();
         }
-        // Check collision between two rectangles
-        function checkCollision(rect1, rect2) {
-            return rect1.x < rect2.x + rect2.width &&
-                   rect1.x + rect1.width > rect2.x &&
-                   rect1.y < rect2.y + rect2.height &&
-                   rect1.y + rect1.height > rect2.y;
-        }
-        // Check if point is in rectangle
-        function pointInRect(x, y, rect) {
-            return x > rect.x && x < rect.x + rect.width &&
-                   y > rect.y && y < rect.y + rect.height;
-        }
-        // Get distance between two points
-        function getDistance(x1, y1, x2, y2) {
-            return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
-        }
-        // Create explosion effect
-        function createExplosion(x, y) {
-            explosions.push({
-                x: x,
-                y: y,
-                radius: 5,
-                maxRadius: 50,
-                alpha: 1,
-                color: `hsl(${Math.random() * 60}, 100%, 50%)`
-            });
-        }
-        // Spawn police cars
-        function spawnPolice() {
-            const count = wantedLevel;
-            for (let i = 0; i < count; i++) {
-                // Don't spawn more than 5 police cars
-                if (policeCars.length >= 5) break;
-                // Spawn police car at edge of screen
-                let x, y;
-                const side = Math.floor(Math.random() * 4);
-                switch (side) {
-                    case 0: // top
-                        x = Math.random() * canvas.width;
-                        y = -50;
-                        break;
-                    case 1: // right
-                        x = canvas.width + 50;
-                        y = Math.random() * canvas.height;
-                        break;
-                    case 2: // bottom
-                        x = Math.random() * canvas.width;
-                        y = canvas.height + 50;
-                        break;
-                    case 3: // left
-                        x = -50;
-                        y = Math.random() * canvas.height;
-                        break;
-                }
-                policeCars.push({
-                    x: x,
-                    y: y,
-                    width: 35,
-                    height: 60,
-                    color: '#4169E1',
-                    speed: 4 + wantedLevel,
-                    rotation: Math.atan2(player.y - y, player.x - x),
-                    health: 100,
-                    lastShotTime: 0
-                });
-            }
-        }
-        // Update wanted level
-        function updateWantedLevel(level) {
-            wantedLevel = Math.min(Math.max(level, 0), 5);
-            // Update display
-            wantedStarsDisplay.innerHTML = '';
-            for (let i = 0; i < wantedLevel; i++) {
-                wantedStarsDisplay.innerHTML += '<span class="wanted-star">★</span>';
-            }
-            // Spawn police if needed
-            if (wantedLevel > 0 && policeCars.length < wantedLevel) {
-                spawnPolice();
-            }
-        }
-        // Show mission text
-        function showMission(text) {
-            missionText.textContent = text;
-            missionText.style.opacity = 1;
-            if (missionCompleteTimeout) {
-                clearTimeout(missionCompleteTimeout);
-            }
-            missionCompleteTimeout = setTimeout(() => {
-                missionText.style.opacity = 0;
-            }, 3000);
-        }
-        // Start a random mission
-        function startRandomMission() {
-            const missions = [
-                {
-                    name: "Collect Cash",
-                    description: "Collect $500 in cash",
-                    target: 500,
-                    current: 0,
-                    type: "money"
-                },
-                {
-                    name: "Avoid Police",
-                    description: "Avoid police for 30 seconds",
-                    target: 30,
-                    current: 0,
-                    type: "avoid"
-                },
-                {
-                    name: "Destroy Police",
-                    description: "Destroy 3 police cars",
-                    target: 3,
-                    current: 0,
-                    type: "destroy"
-                },
-                {
-                    name: "Speed Demon",
-                    description: "Drive over 100 mph for 5 seconds",
-                    target: 5,
-                    current: 0,
-                    type: "speed"
-                }
-            ];
-            currentMission = missions[Math.floor(Math.random() * missions.length)];
-            showMission(`MISSION: ${currentMission.name} - ${currentMission.description}`);
-        }
-        // Check mission progress
-        function checkMissionProgress() {
-            if (!currentMission) return;
-            switch (currentMission.type) {
-                case "money":
-                    currentMission.current = money;
-                    break;
-                case "avoid":
-                    if (wantedLevel === 0) {
-                        currentMission.current += 1/60; // Assuming 60 FPS
-                    }
-                    break;
-                case "destroy":
-                    // Handled in collision detection
-                    break;
-                case "speed":
-                    const speedMph = Math.abs(player.speed) * 10;
-                    if (speedMph > 100) {
-                        currentMission.current += 1/60;
-                    }
-                    break;
-            }
-            // Check if mission is complete
-            if (currentMission.current >= currentMission.target) {
-                const reward = currentMission.target * 10;
-                money += reward;
-                moneyDisplay.textContent = money;
-                showMission(`MISSION COMPLETE! +$${reward}`);
-                currentMission = null;
-                // Start new mission after delay
-                setTimeout(startRandomMission, 5000);
-            }
-        }
         // Game loop
-        function gameLoop(timestamp) {
             if (!gameRunning) return;
-            // Calculate delta time
-            const deltaTime = timestamp - lastTime;
-            lastTime = timestamp;
             // Clear canvas
             ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -515,312 +148,52 @@
             roads.forEach(road => {
                 ctx.fillRect(road.x, road.y, road.width, road.height);
-                // Draw road markings
                 ctx.fillStyle = 'white';
-                if (road.horizontal) {
-                    const dashLength = 30;
-                    const gapLength = 20;
-                    const centerY = road.y + road.height / 2 - 2;
-                    for (let x = 0; x < road.width; x += dashLength + gapLength) {
-                        ctx.fillRect(road.x + x, centerY, dashLength, 4);
                     }
-                } else {
-                    const dashLength = 30;
-                    const gapLength = 20;
-                    const centerX = road.x + road.width / 2 - 2;
-                    for (let y = 0; y < road.height; y += dashLength + gapLength) {
-                        ctx.fillRect(centerX, road.y + y, 4, dashLength);
                     }
                 }
                 ctx.fillStyle = '#333';
             });
-            // Draw buildings
-            buildings.forEach(building => {
-                ctx.fillStyle = building.color;
-                ctx.fillRect(building.x, building.y, building.width, building.height);
-                // Add windows
-                const windowSize = 8;
-                const windowMargin = 10;
-                ctx.fillStyle = '#ADD8E6';
-                for (let y = building.y + windowMargin; y < building.y + building.height - windowMargin; y += windowSize + windowMargin) {
-                    for (let x = building.x + windowMargin; x < building.x + building.width - windowMargin; x += windowSize + windowMargin) {
-                        // Randomly turn some windows off
-                        if (Math.random() > 0.3) {
-                            ctx.fillRect(x, y, windowSize, windowSize);
-                        }
-                    }
-                }
-            });
-            // Draw trees
-            trees.forEach(tree => {
-                // Trunk
-                ctx.fillStyle = '#8B4513';
-                ctx.fillRect(tree.x - 3, tree.y - tree.size/2, 6, tree.size/2);
-                // Leaves
-                ctx.fillStyle = tree.color;
-                ctx.beginPath();
-                ctx.arc(tree.x, tree.y - tree.size/2, tree.size/2, 0, Math.PI * 2);
-                ctx.fill();
-            });
-            // Update and draw NPC cars
-            npcCars.forEach((car, index) => {
-                // Move car along road
-                if (car.road.horizontal) {
-                    car.x += Math.cos(car.direction) * car.speed;
-                    // If car goes off screen, reset to other side
-                    if (car.direction === 0 && car.x > canvas.width + car.width/2) {
-                        car.x = -car.width/2;
-                    } else if (car.direction === Math.PI && car.x < -car.width/2) {
-                        car.x = canvas.width + car.width/2;
-                    }
-                } else {
-                    car.y += Math.sin(car.direction) * car.speed;
-                    // If car goes off screen, reset to other side
-                    if (car.direction === Math.PI/2 && car.y > canvas.height + car.height/2) {
-                        car.y = -car.height/2;
-                    } else if (car.direction === 3*Math.PI/2 && car.y < -car.height/2) {
-                        car.y = canvas.height + car.height/2;
-                    }
-                }
-                // Draw NPC car
-                drawRotatedRect(car.x, car.y, car.width, car.height, car.direction, car.color);
-                // Check collision with player
-                const now = Date.now();
-                if (checkCollision(
-                    {x: player.x - player.width/2, y: player.y - player.height/2, width: player.width, height: player.height},
-                    {x: car.x - car.width/2, y: car.y - car.height/2, width: car.width, height: car.height}
-                ) && now - player.lastCollisionTime > 1000) {
-                    player.speed *= -0.5;
-                    player.health -= 10;
-                    healthDisplay.textContent = player.health;
-                    player.lastCollisionTime = now;
-                    // Increase wanted level for reckless driving
-                    updateWantedLevel(wantedLevel + 1);
-                    // Create explosion effect
-                    createExplosion((player.x + car.x) / 2, (player.y + car.y) / 2);
-                    // Check if this was a police car for mission
-                    if (currentMission && currentMission.type === "destroy") {
-                        currentMission.current++;
-                        showMission(`MISSION: ${currentMission.name} - ${currentMission.current}/${currentMission.target}`);
-                    }
-                }
-            });
-            // Update and draw police cars
-            policeCars.forEach((police, index) => {
-                // Move police toward player
-                const angle = Math.atan2(player.y - police.y, player.x - police.x);
-                police.rotation = angle;
-                police.x += Math.cos(angle) * police.speed;
-                police.y += Math.sin(angle) * police.speed;
-                // Draw police car with siren
-                drawRotatedRect(police.x, police.y, police.width, police.height, police.rotation, police.color);
-                // Draw siren lights
-                const now = Date.now();
-                if (now % 500 < 250) {
-                    // Left light (red)
-                    ctx.fillStyle = 'red';
-                    ctx.beginPath();
-                    ctx.arc(
-                        police.x + Math.cos(police.rotation - Math.PI/2) * 20,
-                        police.y + Math.sin(police.rotation - Math.PI/2) * 20,
-                        5, 0, Math.PI * 2
-                    );
-                    ctx.fill();
-                    // Right light (blue)
-                    ctx.fillStyle = 'blue';
-                    ctx.beginPath();
-                    ctx.arc(
-                        police.x + Math.cos(police.rotation + Math.PI/2) * 20,
-                        police.y + Math.sin(police.rotation + Math.PI/2) * 20,
-                        5, 0, Math.PI * 2
-                    );
-                    ctx.fill();
-                }
-                // Check collision with player
-                const now = Date.now();
-                if (checkCollision(
-                    {x: player.x - player.width/2, y: player.y - player.height/2, width: player.width, height: player.height},
-                    {x: police.x - police.width/2, y: police.y - police.height/2, width: police.width, height: police.height}
-                ) && now - player.lastCollisionTime > 1000) {
-                    player.speed *= -0.5;
-                    player.health -= 20;
-                    healthDisplay.textContent = player.health;
-                    player.lastCollisionTime = now;
-                    // Create explosion effect
-                    createExplosion((player.x + police.x) / 2, (player.y + police.y) / 2);
-                    // Check if this was a police car for mission
-                    if (currentMission && currentMission.type === "destroy") {
-                        currentMission.current++;
-                        showMission(`MISSION: ${currentMission.name} - ${currentMission.current}/${currentMission.target}`);
-                    }
-                }
-                // Remove police if too far away (and wanted level is 0)
-                if (wantedLevel === 0 && getDistance(police.x, police.y, player.x, player.y) > 1000) {
-                    policeCars.splice(index, 1);
-                }
-            });
-            // Draw collectibles
-            collectibles.forEach((item, index) => {
-                if (item.collected) return;
-                ctx.beginPath();
-                ctx.arc(item.x, item.y, item.radius, 0, Math.PI * 2);
-                if (item.type === 'money') {
-                    ctx.fillStyle = 'gold';
-                    ctx.fill();
-                    // Draw dollar sign
-                    ctx.fillStyle = '#333';
-                    ctx.font = `${item.radius}px Arial`;
-                    ctx.textAlign = 'center';
-                    ctx.textBaseline = 'middle';
-                    ctx.fillText('$', item.x, item.y);
-                } else {
-                    ctx.fillStyle = 'red';
-                    ctx.fill();
-                    // Draw plus sign
-                    ctx.fillStyle = 'white';
-                    ctx.font = `${item.radius}px Arial`;
-                    ctx.textAlign = 'center';
-                    ctx.textBaseline = 'middle';
-                    ctx.fillText('+', item.x, item.y);
-                }
-                // Check collision with player
-                if (getDistance(item.x, item.y, player.x, player.y) < item.radius + player.width/2) {
-                    item.collected = true;
-                    if (item.type === 'money') {
-                        money += item.value;
-                        moneyDisplay.textContent = money;
-                        showMission(`+$${item.value}`);
-                    } else {
-                        player.health = Math.min(player.health + item.value, 100);
-                        healthDisplay.textContent = player.health;
-                        showMission(`+${item.value}% Health`);
-                    }
-                    // Check mission progress
-                    checkMissionProgress();
-                }
-            });
-            // Draw explosions
-            explosions.forEach((explosion, index) => {
-                explosion.radius += 1;
-                explosion.alpha -= 0.02;
-                ctx.globalAlpha = explosion.alpha;
-                ctx.fillStyle = explosion.color;
-                ctx.beginPath();
-                ctx.arc(explosion.x, explosion.y, explosion.radius, 0, Math.PI * 2);
-                ctx.fill();
-                ctx.globalAlpha = 1;
-                if (explosion.alpha <= 0) {
-                    explosions.splice(index, 1);
-                }
-            });
-            // Draw player car
             drawRotatedRect(player.x, player.y, player.width, player.height, player.rotation, player.color);
-            // Draw player health bar
-            ctx.fillStyle = 'red';
-            ctx.fillRect(10, canvas.height - 30, 200 * (player.health / 100), 20);
-            ctx.strokeStyle = 'white';
-            ctx.strokeRect(10, canvas.height - 30, 200, 20);
-            // Update UI
-            speedDisplay.textContent = Math.floor(Math.abs(player.speed) * 10);
-            // Check if player is dead
-            if (player.health <= 0) {
-                showMission("WASTED");
-                setTimeout(resetGame, 3000);
-                gameRunning = false;
-                return;
-            }
-            // Check mission progress
-            checkMissionProgress();
-            // Randomly decrease wanted level if no crimes are being committed
-            if (wantedLevel > 0 && Math.random() < 0.005) {
-                updateWantedLevel(wantedLevel - 1);
-            }
             // Request next frame
             requestAnimationFrame(gameLoop);
         }
-        // Handle keyboard input
         const keys = {
             ArrowUp: false,
             ArrowDown: false,
             ArrowLeft: false,
             ArrowRight: false,
-            ' ': false, // space for handbrake
-            h: false // h for honk
         };
-        let lastHonkTime = 0;
         document.addEventListener('keydown', (e) => {
-            if (e.key in keys) {
-                keys[e.key] = true;
-                // Honk horn
-                if (e.key === 'h' && Date.now() - lastHonkTime > 1000) {
-                    lastHonkTime = Date.now();
-                    showMission("HONK!");
-                    // Increase wanted level for disturbing the peace
-                    if (wantedLevel < 1) {
-                        updateWantedLevel(1);
-                    }
-                }
-                // Change radio station
-                if (e.key === 'r') {
-                    currentRadioIndex = (currentRadioIndex + 1) % radioStations.length;
-                    radioStation.textContent = radioStations[currentRadioIndex];
-                }
-            }
         });
         document.addEventListener('keyup', (e) => {
-            if (e.key in keys) {
-                keys[e.key] = false;
-            }
         });
         // Update player based on input
@@ -829,59 +202,26 @@
             // Acceleration
             if (keys.ArrowUp) {
-                player.speed += player.acceleration;
             } else if (keys.ArrowDown) {
-                player.speed -= player.acceleration;
             } else {
-                // Deceleration
-                if (player.speed > 0) {
-                    player.speed = Math.max(player.speed - player.deceleration, 0);
-                } else if (player.speed < 0) {
-                    player.speed = Math.min(player.speed + player.deceleration, 0);
-                }
             }
-            // Handbrake
             if (keys[' ']) {
-                player.speed *= 0.95;
             }
             // Steering
-            if (keys.ArrowLeft) {
-                player.rotation -= player.rotationSpeed * Math.abs(player.speed) / player.maxSpeed;
-            }
-            if (keys.ArrowRight) {
-                player.rotation += player.rotationSpeed * Math.abs(player.speed) / player.maxSpeed;
-            }
-            // Limit speed
-            if (player.speed > player.maxSpeed) {
-                player.speed = player.maxSpeed;
-            } else if (player.speed < -player.maxSpeed / 2) {
-                player.speed = -player.maxSpeed / 2;
-            }
-            // Move player
-            player.x += Math.cos(player.rotation) * player.speed;
-            player.y += Math.sin(player.rotation) * player.speed;
-            // Wrap around screen edges
-            if (player.x < -player.width) player.x = canvas.width + player.width;
-            if (player.x > canvas.width + player.width) player.x = -player.width;
-            if (player.y < -player.height) player.y = canvas.height + player.height;
-            if (player.y > canvas.height + player.height) player.y = -player.height;
-            // Check if player is off-road (increase wanted level)
-            let onRoad = false;
-            for (const road of roads) {
-                if (pointInRect(player.x, player.y, road)) {
-                    onRoad = true;
-                    break;
-                }
             }
-            if (!onRoad && player.speed > 3 && Math.random() < 0.01) {
-                updateWantedLevel(wantedLevel + 1);
             }
         }
@@ -889,39 +229,23 @@
         function startGame() {
             startScreen.style.display = 'none';
             gameRunning = true;
-            lastTime = performance.now();
             // Reset game state
-            score = 0;
             money = 0;
-            playerHealth = 100;
-            wantedLevel = 0;
             // Generate city
             generateCity();
-            generateNPC();
-            generateCollectibles();
-            // Start first mission
-            setTimeout(startRandomMission, 2000);
             // Start game loop
-            requestAnimationFrame(gameLoop);
             // Start input update loop
             setInterval(updatePlayer, 1000/60);
         }
-        // Reset game
-        function resetGame() {
-            startScreen.style.display = 'flex';
-            gameRunning = false;
-            // Clear all game objects
-            policeCars.length = 0;
-            explosions.length = 0;
-        }
         // Start button event
         startButton.addEventListener('click', startGame);
@@ -929,13 +253,7 @@
         window.addEventListener('resize', () => {
             canvas.width = window.innerWidth;
             canvas.height = window.innerHeight;
-            if (gameRunning) {
-                // Regenerate city if game is running
-                generateCity();
-                generateNPC();
-                generateCollectibles();
-            }
         });
     </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=Greats/clone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GTA Style Game</title>
     <style>
         body {
             margin: 0;
             overflow: hidden;
             background-color: #222;
             font-family: Arial, sans-serif;
         }
         #gameCanvas {
             display: block;
             background-color: #87CEEB;
         }
+        #ui {
             position: absolute;
             top: 10px;
             left: 10px;
             color: white;
             font-size: 16px;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
         }
         #startScreen {
             position: absolute;
             top: 0;
             justify-content: center;
             align-items: center;
             color: white;
         }
         #startButton {
             padding: 15px 30px;
+            font-size: 20px;
             background-color: #FF4500;
             color: white;
             border: none;
             border-radius: 5px;
             cursor: pointer;
+            margin-top: 20px;
         }
     </style>
 </head>
 <body>
+    <canvas id="gameCanvas"></canvas>
+    <div id="ui">
+        <div>Money: $<span id="money">0</span></div>
+        <div>Health: <span id="health">100</span>%</div>
+    </div>
+    <div id="startScreen">
+        <h1>GTA Style Game</h1>
+        <p>Use arrow keys to drive, space to brake</p>
+        <button id="startButton">START GAME</button>
     </div>
     <script>
+        // Game setup
         const canvas = document.getElementById('gameCanvas');
         const ctx = canvas.getContext('2d');
         const startScreen = document.getElementById('startScreen');
         const startButton = document.getElementById('startButton');
         const moneyDisplay = document.getElementById('money');
         const healthDisplay = document.getElementById('health');
         // Set canvas size
         canvas.width = window.innerWidth;
         // Game state
         let gameRunning = false;
         let money = 0;
+        let health = 100;
         // Player car
         const player = {
             y: canvas.height / 2,
             width: 40,
             height: 70,
             speed: 0,
+            maxSpeed: 5,
             rotation: 0,
+            color: '#FF4500'
         };
+        // Roads
         const roads = [];
+        // Generate simple city
         function generateCity() {
             roads.length = 0;
+            // Horizontal roads
+            for (let y = 100; y < canvas.height; y += 200) {
                 roads.push({
                     x: 0,
+                    y: y,
                     width: canvas.width,
+                    height: 60
                 });
             }
+            // Vertical roads
+            for (let x = 100; x < canvas.width; x += 200) {
                 roads.push({
+                    x: x,
                     y: 0,
+                    width: 60,
+                    height: canvas.height
                 });
             }
+            // Position player at intersection
+            player.x = 200;
+            player.y = 200;
         }
+        // Draw rotated rectangle
         function drawRotatedRect(x, y, width, height, rotation, color) {
             ctx.save();
             ctx.translate(x, y);
             ctx.rotate(rotation);
             ctx.fillStyle = color;
+            ctx.fillRect(-width/2, -height/2, width, height);
+            // Add windows
+            ctx.fillStyle = '#333';
+            ctx.fillRect(-width/2 + 5, -height/2 + 5, width - 10, height/3);
             ctx.restore();
         }
         // Game loop
+        function gameLoop() {
             if (!gameRunning) return;
             // Clear canvas
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             roads.forEach(road => {
                 ctx.fillRect(road.x, road.y, road.width, road.height);
+                // Road markings
                 ctx.fillStyle = 'white';
+                if (road.width > road.height) { // horizontal road
+                    for (let x = 0; x < road.width; x += 40) {
+                        ctx.fillRect(road.x + x, road.y + road.height/2 - 2, 20, 4);
                     }
+                } else { // vertical road
+                    for (let y = 0; y < road.height; y += 40) {
+                        ctx.fillRect(road.x + road.width/2 - 2, road.y + y, 4, 20);
                     }
                 }
                 ctx.fillStyle = '#333';
             });
+            // Update player position
+            player.x += Math.cos(player.rotation) * player.speed;
+            player.y += Math.sin(player.rotation) * player.speed;
+            // Wrap around screen
+            if (player.x < 0) player.x = canvas.width;
+            if (player.x > canvas.width) player.x = 0;
+            if (player.y < 0) player.y = canvas.height;
+            if (player.y > canvas.height) player.y = 0;
+            // Draw player
             drawRotatedRect(player.x, player.y, player.width, player.height, player.rotation, player.color);
             // Request next frame
             requestAnimationFrame(gameLoop);
         }
+        // Keyboard controls
         const keys = {
             ArrowUp: false,
             ArrowDown: false,
             ArrowLeft: false,
             ArrowRight: false,
+            ' ': false
         };
         document.addEventListener('keydown', (e) => {
+            if (e.key in keys) keys[e.key] = true;
         });
         document.addEventListener('keyup', (e) => {
+            if (e.key in keys) keys[e.key] = false;
         });
         // Update player based on input
             // Acceleration
             if (keys.ArrowUp) {
+                player.speed = Math.min(player.speed + 0.05, player.maxSpeed);
             } else if (keys.ArrowDown) {
+                player.speed = Math.max(player.speed - 0.05, -player.maxSpeed/2);
             } else {
+                // Friction
+                player.speed *= 0.95;
+                if (Math.abs(player.speed) < 0.1) player.speed = 0;
             }
+            // Brake
             if (keys[' ']) {
+                player.speed *= 0.9;
             }
             // Steering
+            if (keys.ArrowLeft && player.speed !== 0) {
+                player.rotation -= 0.05 * (player.speed / player.maxSpeed);
             }
+            if (keys.ArrowRight && player.speed !== 0) {
+                player.rotation += 0.05 * (player.speed / player.maxSpeed);
             }
         }
         function startGame() {
             startScreen.style.display = 'none';
             gameRunning = true;
             // Reset game state
             money = 0;
+            health = 100;
+            moneyDisplay.textContent = money;
+            healthDisplay.textContent = health;
             // Generate city
             generateCity();
             // Start game loop
+            gameLoop();
             // Start input update loop
             setInterval(updatePlayer, 1000/60);
         }
         // Start button event
         startButton.addEventListener('click', startGame);
         window.addEventListener('resize', () => {
             canvas.width = window.innerWidth;
             canvas.height = window.innerHeight;
+            if (gameRunning) generateCity();
         });
     </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=Greats/clone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt CHANGED Viewed

@@ -1,3 +1,4 @@
 создай чудо
 сделай огромный проект ссобой полностью законченный и рабочий
-сделай сайт онлайн игру на подобе  гта5

 создай чудо
 сделай огромный проект ссобой полностью законченный и рабочий
+сделай сайт онлайн игру на подобе  гта5
+не работает