Untitled

<!DOCTYPE html>
<html>
<head>
    <title>AI GTA Engine v1.0</title>
    <style>
        body { margin: 0; overflow: hidden; background: #222; font-family: sans-serif; }
        #gameCanvas { background: #333; display: block; }
        #ui { position: absolute; top: 10; left: 10; color: white; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 5px; }
    </style>
</head>
<body>
    <div id="ui">
        <b>GTA AI ENGINE v1.0</b><br>
        WASD to Move | F to Enter/Exit Car<br>
        Status: <span id="status">On Foot</span>
    </div>
    <canvas id="gameCanvas"></canvas>

<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Game State
let player = { x: 100, y: 100, w: 20, h: 20, color: '#00ff00', speed: 4, inVehicle: false };
let car = { x: 300, y: 300, w: 50, h: 30, color: '#ff0000', speed: 0, maxSpeed: 8, active: false };
let keys = {};

window.addEventListener('keydown', e => keys[e.key.toLowerCase()] = true);
window.addEventListener('keyup', e => keys[e.key.toLowerCase()] = false);

function update() {
    if (!player.inVehicle) {
        // Player Movement
        if (keys['w']) player.y -= player.speed;
        if (keys['s']) player.y += player.speed;
        if (keys['a']) player.x -= player.speed;
        if (keys['d']) player.x += player.speed;

        // Check for Car Entry
        if (keys['f']) {
            let dist = Math.hypot(player.x - car.x, player.y - car.y);
            if (dist < 50) {
                player.inVehicle = true;
                document.getElementById('status').innerText = "Driving";
                keys['f'] = false; // Prevent instant exit
            }
        }
    } else {
        // Car Movement
        if (keys['w']) car.speed = Math.min(car.speed + 0.2, car.maxSpeed);
        else car.speed *= 0.98; // Friction

        if (keys['s']) car.speed = Math.max(car.speed - 0.5, -3);
        if (keys['a']) car.x -= car.speed * 0.5; // Simple turning
        if (keys['d']) car.x += car.speed * 0.5;
        
        car.y -= car.speed;
        
        // Follow car with player coordinates
        player.x = car.x + 15;
        player.y = car.y + 5;

        // Exit Car
        if (keys['f']) {
            player.inVehicle = false;
            player.x += 60; // Pop out to the side
            document.getElementById('status').innerText = "On Foot";
            keys['f'] = false;
        }
    }
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw Roads (City Map)
    ctx.fillStyle = "#444";
    ctx.fillRect(0, 250, canvas.width, 100); // Horizontal Road
    ctx.fillRect(400, 0, 100, canvas.height); // Vertical Road

    // Draw Car
    ctx.fillStyle = car.color;
    ctx.fillRect(car.x, car.y, car.w, car.h);

    // Draw Player (Only if not in car, or as a dot inside)
    ctx.fillStyle = player.color;
    if (!player.inVehicle) {
        ctx.fillRect(player.x, player.y, player.w, player.h);
    } else {
        ctx.fillRect(player.x, player.y, 10, 10);
    }

    requestAnimationFrame(() => {
        update();
        draw();
    });
}

draw();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>GTA AI Engine v2.0</title>
    <style>
        body { margin: 0; overflow: hidden; background: #1a1a1a; font-family: 'Courier New', Courier, monospace; }
        #ui { position: absolute; top: 15px; left: 15px; color: #0f0; background: rgba(0,0,0,0.8); padding: 15px; border: 2px solid #0f0; border-radius: 5px; pointer-events: none; }
        .wanted { color: #f00; font-weight: bold; font-size: 20px; }
        #gameCanvas { display: block; cursor: crosshair; }
    </style>
</head>
<body>
    <div id="ui">
        <b>SYSTEM: GTA_CORE_V2.0</b><br>
        WASD: Move | F: Car | SPACE: Shoot<br>
        <hr>
        STATUS: <span id="status">ON FOOT</span><br>
        WANTED: <span id="wanted" class="wanted">☆☆☆☆☆</span>
    </div>
    <canvas id="gameCanvas"></canvas>

<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// --- Game Objects ---
let player = { x: 100, y: 100, w: 20, h: 20, color: '#00ff00', speed: 4, inVehicle: false };
let car = { x: 400, y: 300, w: 60, h: 35, color: '#ffcc00', speed: 0, maxSpeed: 7 };
let bullets = [];
let police = [];
let buildings = [
    { x: 200, y: 50, w: 150, h: 150 }, // Building A
    { x: 600, y: 400, w: 200, h: 100 } // Building B
];
let wantedLevel = 0;
let keys = {};

// --- Input Handling ---
window.addEventListener('keydown', e => keys[e.key.toLowerCase()] = true);
window.addEventListener('keyup', e => keys[e.key.toLowerCase()] = false);

// --- Collision Logic ---
function checkCollision(obj, target) {
    return obj.x < target.x + target.w && obj.x + 20 > target.x &&
           obj.y < target.y + target.h && obj.y + 20 > target.y;
}

// --- Logic Loop ---
function update() {
    let prevX = player.x;
    let prevY = player.y;

    if (!player.inVehicle) {
        // Player Walking
        if (keys['w']) player.y -= player.speed;
        if (keys['s']) player.y += player.speed;
        if (keys['a']) player.x -= player.speed;
        if (keys['d']) player.x += player.speed;

        // Collision with buildings
        buildings.forEach(b => {
            if (checkCollision(player, b)) {
                player.x = prevX;
                player.y = prevY;
            }
        });

        // Shooting
        if (keys[' ']) {
            bullets.push({ x: player.x + 10, y: player.y, speed: 10 });
            keys[' '] = false; // Semi-auto
            if (wantedLevel < 5) wantedLevel++;
            updateWantedUI();
        }

        // Enter Car
        if (keys['f']) {
            let dist = Math.hypot(player.x - car.x, player.y - car.y);
            if (dist < 60) {
                player.inVehicle = true;
                document.getElementById('status').innerText = "DRIVING";
                keys['f'] = false;
            }
        }
    } else {
        // Car Driving
        if (keys['w']) car.speed = Math.min(car.speed + 0.15, car.maxSpeed);
        else car.speed *= 0.98;

        if (keys['s']) car.speed = Math.max(car.speed - 0.3, -2);
        if (keys['a']) car.x -= car.speed * 0.4;
        if (keys['d']) car.x += car.speed * 0.4;
        
        car.y -= car.speed;
        player.x = car.x + 20;
        player.y = car.y + 7;

        if (keys['f']) {
            player.inVehicle = false;
            player.x += 70;
            document.getElementById('status').innerText = "ON FOOT";
            keys['f'] = false;
        }
    }

    // Bullet Logic
    bullets.forEach((b, i) => {
        b.y -= b.speed;
        if (b.y < 0) bullets.splice(i, 1);
    });

    // Police AI (Spawn if wanted)
    if (wantedLevel > 0 && police.length < wantedLevel) {
        police.push({ x: Math.random() * canvas.width, y: canvas.height, speed: 2 });
    }

    police.forEach(p => {
        let dx = player.x - p.x;
        let dy = player.y - p.y;
        let angle = Math.atan2(dy, dx);
        p.x += Math.cos(angle) * p.speed;
        p.y += Math.sin(angle) * p.speed;
    });
}

function updateWantedUI() {
    let stars = "★".repeat(wantedLevel) + "☆".repeat(5 - wantedLevel);
    document.getElementById('wanted').innerText = stars;
}

// --- Render Loop ---
function draw() {
    ctx.fillStyle = "#222"; // Ground
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Roads
    ctx.fillStyle = "#333";
    ctx.fillRect(canvas.width/2 - 50, 0, 100, canvas.height);
    ctx.fillRect(0, canvas.height/2 - 50, canvas.width, 100);

    // Buildings
    ctx.fillStyle = "#445";
    buildings.forEach(b => {
        ctx.fillRect(b.x, b.y, b.w, b.h);
        ctx.strokeStyle = "#556";
        ctx.strokeRect(b.x, b.y, b.w, b.h);
    });

    // Car
    ctx.fillStyle = car.color;
    ctx.fillRect(car.x, car.y, car.w, car.h);

    // Player
    if (!player.inVehicle) {
        ctx.fillStyle = player.color;
        ctx.fillRect(player.x, player.y, player.w, player.h);
    }

    // Bullets
    ctx.fillStyle = "yellow";
    bullets.forEach(b => ctx.fillRect(b.x, b.y, 4, 10));

    // Police
    ctx.fillStyle = "blue";
    police.forEach(p => {
        ctx.fillRect(p.x, p.y, 20, 20);
        // Flashing lights
        ctx.fillStyle = (Date.now() % 400 < 200) ? "red" : "blue";
        ctx.fillRect(p.x, p.y - 5, 20, 5);
    });

    requestAnimationFrame(() => {
        update();
        draw();
    });
}

draw();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>GTA AI Engine v3.0 - Lighting</title>
    <style>
        body { margin: 0; overflow: hidden; background: #050505; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        #ui { position: absolute; top: 15px; left: 15px; color: #0f0; background: rgba(0,0,0,0.8); padding: 15px; border-left: 5px solid #0f0; pointer-events: none; z-index: 10; }
        #gameCanvas { display: block; }
    </style>
</head>
<body>
    <div id="ui">
        <b>ENGINE: PHOTON_CORE_V3</b><br>
        <small>Real-time Shadows Enabled</small><br>
        <hr>
        WANTED: <span id="wanted" style="color:red">☆☆☆☆☆</span>
    </div>
    <canvas id="gameCanvas"></canvas>

<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let player = { x: 200, y: 200, w: 20, h: 20, color: '#2ecc71', speed: 4, inVehicle: false, angle: 0 };
let car = { x: 500, y: 400, w: 70, h: 35, color: '#f1c40f', speed: 0, maxSpeed: 8, angle: 0 };
let bullets = [];
let police = [];
let wantedLevel = 0;
let keys = {};

window.addEventListener('keydown', e => keys[e.key.toLowerCase()] = true);
window.addEventListener('keyup', e => keys[e.key.toLowerCase()] = false);

function update() {
    // Player Rotation Logic
    if (keys['w'] || keys['s'] || keys['a'] || keys['d']) {
        player.angle = Math.atan2(keys['s'] - keys['w'], keys['d'] - keys['a']);
    }

    if (!player.inVehicle) {
        if (keys['w']) player.y -= player.speed;
        if (keys['s']) player.y += player.speed;
        if (keys['a']) player.x -= player.speed;
        if (keys['d']) player.x += player.speed;

        if (keys[' '] && bullets.length < 10) {
            bullets.push({ x: player.x, y: player.y, angle: player.angle, life: 50 });
            if (wantedLevel < 5) { wantedLevel++; updateUI(); }
        }

        if (keys['f'] && Math.hypot(player.x - car.x, player.y - car.y) < 60) {
            player.inVehicle = true;
            keys['f'] = false;
        }
    } else {
        // Car Physics
        if (keys['w']) car.speed = Math.min(car.speed + 0.2, car.maxSpeed);
        else car.speed *= 0.97;
        
        if (keys['a']) car.angle -= 0.05;
        if (keys['d']) car.angle += 0.05;

        car.x += Math.cos(car.angle) * car.speed;
        car.y += Math.sin(car.angle) * car.speed;
        player.x = car.x; player.y = car.y;

        if (keys['f']) { player.inVehicle = false; player.x += 80; keys['f'] = false; }
    }

    // Police AI Logic
    if (wantedLevel > 0 && police.length < wantedLevel) {
        police.push({ x: 0, y: 0, speed: 2.5, angle: 0 });
    }
    police.forEach(p => {
        p.angle = Math.atan2(player.y - p.y, player.x - p.x);
        p.x += Math.cos(p.angle) * p.speed;
        p.y += Math.sin(p.angle) * p.speed;
    });
}

function updateUI() {
    document.getElementById('wanted').innerText = "★".repeat(wantedLevel) + "☆".repeat(5-wantedLevel);
}

function draw() {
    // 1. Draw Background (The World)
    ctx.fillStyle = "#111"; 
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Draw "Roads"
    ctx.fillStyle = "#1a1a1a";
    ctx.fillRect(0, canvas.height/2 - 60, canvas.width, 120);

    // Draw Entities
    ctx.fillStyle = car.color;
    ctx.save();
    ctx.translate(car.x, car.y);
    ctx.rotate(car.angle);
    ctx.fillRect(-car.w/2, -car.h/2, car.w, car.h);
    ctx.restore();

    if (!player.inVehicle) {
        ctx.fillStyle = player.color;
        ctx.fillRect(player.x-10, player.y-10, 20, 20);
    }

    police.forEach(p => {
        ctx.fillStyle = "blue";
        ctx.fillRect(p.x-10, p.y-10, 20, 20);
    });

    // 2. LIGHTING LAYER (The "Realistic" Part)
    // Create a black overlay
    ctx.globalCompositeOperation = 'multiply';
    ctx.fillStyle = '#050510'; // Dark blue night tint
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = 'lighter';

    // Player/Car Light Source
    drawLight(player.x, player.y, 150, '#ffffff33');
    
    // Police Siren Lights
    police.forEach(p => {
        let color = (Date.now() % 400 < 200) ? '#ff000088' : '#0000ff88';
        drawLight(p.x, p.y, 200, color);
    });

    ctx.globalCompositeOperation = 'source-over';
    requestAnimationFrame(() => { update(); draw(); });
}

function drawLight(x, y, radius, color) {
    let grad = ctx.createRadialGradient(x, y, 0, x, y, radius);
    grad.addColorStop(0, color);
    grad.addColorStop(1, 'transparent');
    ctx.fillStyle = grad;
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fill();
}

draw();
</script>
</body>
</html>