Stealth (Full Game)

52 Mad_Official

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Stealth Prototype - Mobile Ready</title>
    <style>
        * {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
        }
        body {
            margin: 0;
            background-color: #222;
            color: white;
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            overflow: hidden;
            touch-action: none;
        }
        #game-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            aspect-ratio: 4 / 3;
        }
        canvas {
            width: 100%;
            height: 100%;
            border: 4px solid #fff;
            background-color: #333;
            display: block;
        }
        #ui {
            margin-top: 10px;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
        }
        /* Virtual Touch Joystick */
        #joystick-container {
            position: fixed;
            bottom: 30px;
            left: 30px;
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: none; /* Controlled by JS based on touch detection */
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        #joystick-knob {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>
<body>

<div id="game-container">
        <canvas id="gameCanvas" width="800" height="600"></canvas>
    </div>
    <div id="ui">Status: Sneaking...</div>

<div id="joystick-container">
        <div id="joystick-knob"></div>
    </div>

// Game State Variables
        const player = { x: 50, y: 50, radius: 15, speed: 4, color: "#00FF00" };
        const opponent = { x: 400, y: 300, radius: 20, speed: 1.8, color: "#FF0000", visionRadius: 150 };
        const goal = { x: 740, y: 540, width: 40, height: 40, color: "#FFFF00" };
        
        const keys = {};
        let touchControls = { active: false, dx: 0, dy: 0 };

// Desktop Keyboard Inputs
        window.addEventListener("keydown", e => keys[e.key] = true);
        window.addEventListener("keyup", e => keys[e.key] = false);

// Mobile Touch Joystick Logic
        window.addEventListener("touchstart", (e) => {
            // Show custom joystick on first touch
            joystickContainer.style.display = "flex";
        }, { passive: true });

joystickContainer.addEventListener("touchstart", handleTouchStart, { passive: false });
        window.addEventListener("touchmove", handleTouchMove, { passive: false });
        window.addEventListener("touchend", handleTouchEnd, { passive: true });

let joyCenterX = 0;
        let joyCenterY = 0;

function handleTouchStart(e) {
            e.preventDefault();
            const rect = joystickContainer.getBoundingClientRect();
            joyCenterX = rect.left + rect.width / 2;
            joyCenterY = rect.top + rect.height / 2;
            touchControls.active = true;
        }

function handleTouchMove(e) {
            if (!touchControls.active) return;
            
            // Find active touch on the joystick area
            let touch = e.touches[0];
            for (let i = 0; i < e.touches.length; i++) {
                if (e.touches[i].clientX < window.innerWidth / 2) {
                    touch = e.touches[i];
                    break;
                }
            }

let deltaX = touch.clientX - joyCenterX;
            let deltaY = touch.clientY - joyCenterY;
            let distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
            let maxRadius = 40; // Max distance knob can travel

if (distance > maxRadius) {
                deltaX = (deltaX / distance) * maxRadius;
                deltaY = (deltaY / distance) * maxRadius;
                distance = maxRadius;
            }

// Visually update joystick knob position
            joystickKnob.style.transform = `translate(${deltaX}px, ${deltaY}px)`;

// Normalize values between -1 and 1 for game movement mapping
            touchControls.dx = deltaX / maxRadius;
            touchControls.dy = deltaY / maxRadius;
        }

function handleTouchEnd() {
            touchControls.active = false;
            touchControls.dx = 0;
            touchControls.dy = 0;
            joystickKnob.style.transform = "translate(0px, 0px)";
        }

function update() {
            // Priority 1: Keyboard Input
            if (keys["ArrowUp"] || keys["w"]) player.y -= player.speed;
            if (keys["ArrowDown"] || keys["s"]) player.y += player.speed;
            if (keys["ArrowLeft"] || keys["a"]) player.x -= player.speed;
            if (keys["ArrowRight"] || keys["d"]) player.x += player.speed;

// Priority 2: Mobile Touch Input
            if (touchControls.active) {
                player.x += touchControls.dx * player.speed;
                player.y += touchControls.dy * player.speed;
            }

// Keep player bounded on screen maps
            player.x = Math.max(player.radius, Math.min(canvas.width - player.radius, player.x));
            player.y = Math.max(player.radius, Math.min(canvas.height - player.radius, player.y));

// AI Logic tracking distance
            const dx = player.x - opponent.x;
            const dy = player.y - opponent.y;
            const distance = Math.sqrt(dx * dx + dy * dy);

// AI tracking states
            if (distance < opponent.visionRadius) {
                opponent.x += (dx / distance) * opponent.speed;
                opponent.y += (dy / distance) * opponent.speed;
                ui.textContent = "Status: Caught in the Neighbor's sight! RUN!";
                ui.style.color = "#FF3333";
            } else {
                ui.textContent = "Status: Sneaking hidden...";
                ui.style.color = "#33FF33";
            }

// Game End Conditions
            if (distance < player.radius + opponent.radius) {
                alert("The Neighbor caught you! Back to your house.");
                resetGame();
            }

if (player.x > goal.x && player.x < goal.x + goal.width &&
                player.y > goal.y && player.y < goal.y + goal.height) {
                alert("Victory! You unlocked the secret basement door!");
                resetGame();
            }
        }

function resetGame() {
            player.x = 50;
            player.y = 50;
            opponent.x = 400;
            opponent.y = 300;
            handleTouchEnd();
        }

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

// Goal/Basement door
            ctx.fillStyle = goal.color;
            ctx.fillRect(goal.x, goal.y, goal.width, goal.height);

// Vision Area
            ctx.beginPath();
            ctx.arc(opponent.x, opponent.y, opponent.visionRadius, 0, Math.PI * 2);
            ctx.fillStyle = "rgba(255, 0, 0, 0.12)";
            ctx.fill();

// Neighbor Node
            ctx.beginPath();
            ctx.arc(opponent.x, opponent.y, opponent.radius, 0, Math.PI * 2);
            ctx.fillStyle = opponent.color;
            ctx.fill();

// Player Node
            ctx.beginPath();
            ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
            ctx.fillStyle = player.color;
            ctx.fill();
        }

function loop() {
            update();
            draw();
            requestAnimationFrame(loop);
        }

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

CSS

Stealth (Full Game)

Recommended