Webleb - Extraits de Code

HTML CSS JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neighbor's House - Stealth Exploration</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            user-select: none;
        }

body {
            background-color: #0d0f12;
            color: #eceff4;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            overflow: hidden;
        }

#game-wrapper {
            position: relative;
            width: 800px;
            height: 500px;
            border: 3px solid #2e3440;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
            background-color: #000;
            overflow: hidden;
        }

canvas {
            display: block;
            width: 100%;
            height: 100%;
            cursor: crosshair;
        }

#ui-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 16px;
            background: linear-gradient(transparent, rgba(15, 17, 23, 0.95));
            pointer-events: none;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

#status-box {
            font-size: 15px;
            color: #ebcb8b;
            font-weight: 600;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
            min-height: 22px;
        }

#inventory-box {
            font-size: 13px;
            color: #88c0d0;
            letter-spacing: 0.5px;
        }

#top-controls {
            position: absolute;
            top: 12px;
            right: 12px;
            display: flex;
            gap: 8px;
            z-index: 10;
        }

button {
            background: #3b4252;
            color: #e5e9f0;
            border: 1px solid #4c566a;
            padding: 6px 12px;
            font-family: inherit;
            font-size: 11px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

button:hover {
            background: #434c5e;
            border-color: #88c0d0;
            color: #fff;
        }

#jumpscare-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 100;
            pointer-events: none;
        }

#start-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 17, 23, 0.96);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 50;
            gap: 16px;
        }

h1 {
            color: #bf616a;
            letter-spacing: 3px;
            font-size: 34px;
            text-transform: uppercase;
            text-shadow: 0 0 10px rgba(191, 97, 106, 0.5);
        }

p {
            font-size: 13px;
            color: #d8dee9;
            max-width: 460px;
            text-align: center;
            line-height: 1.6;
        }

.highlight {
            color: #ebcb8b;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div id="game-wrapper">
    <div id="top-controls">
        <button id="toggle-audio">Mute Sound</button>
        <button id="toggle-jumpscares">Jumpscares: ON</button>
    </div>

<div id="start-screen">
        <h1>NEIGHBOR'S BASEMENT</h1>
        <p>Sneak into your Neighbor's house, find the <span class="highlight">Basement Key</span> hidden inside, and unlock the heavy basement door before he spots you.</p>
        <button id="start-btn" style="padding: 12px 24px; font-size: 14px; background: #bf616a; color: #fff; border: none;">BREAK IN</button>
    </div>

<div id="ui-overlay">
        <div id="status-box">Sneak inside through the front porch...</div>
        <div id="inventory-box">Inventory: Empty</div>
    </div>
</div>

function initAudio() {
    if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    }
}

function playSuspenseDrone() {
    if (audioMuted || !audioCtx) return;
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = 'triangle';
    osc.frequency.setValueAtTime(65, audioCtx.currentTime); 
    gain.gain.setValueAtTime(0.04, audioCtx.currentTime);

const filter = audioCtx.createBiquadFilter();
    filter.type = 'lowpass';
    filter.frequency.setValueAtTime(250, audioCtx.currentTime);

osc.connect(filter);
    filter.connect(gain);
    gain.connect(audioCtx.destination);
    osc.start();
}

function playCatchScream() {
    if (audioMuted || !audioCtx) return;

const bufferSize = audioCtx.sampleRate * 1.2;
    const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
    const data = buffer.getChannelData(0);
    for (let i = 0; i < bufferSize; i++) {
        data[i] = Math.random() * 2 - 1;
    }

const noise = audioCtx.createBufferSource();
    noise.buffer = buffer;

const filter = audioCtx.createBiquadFilter();
    filter.type = 'bandpass';
    filter.frequency.setValueAtTime(1200, audioCtx.currentTime);

const gain = audioCtx.createGain();
    gain.gain.setValueAtTime(0.9, audioCtx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 1.2);

noise.connect(filter);
    filter.connect(gain);
    gain.connect(audioCtx.destination);
    noise.start();
}

function playClickSound() {
    if (audioMuted || !audioCtx) return;
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = 'sine';
    osc.frequency.setValueAtTime(520, audioCtx.currentTime);
    gain.gain.setValueAtTime(0.06, audioCtx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.06);
    osc.connect(gain);
    gain.connect(audioCtx.destination);
    osc.start();
}

// --- Game Engine Variables ---
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const jsCanvas = document.getElementById('jumpscare-canvas');
const jsCtx = jsCanvas.getContext('2d');

let mouseX = 400;
let mouseY = 250;
let currentRoom = 'yard';
let inventory = [];
let paintingShifted = false;

const statusBox = document.getElementById('status-box');
const inventoryBox = document.getElementById('inventory-box');

// Room States & Interactions
const rooms = {
    yard: {
        title: "Front Yard",
        draw: function() {
            // Outdoor Night Sky
            ctx.fillStyle = '#141824';
            ctx.fillRect(0, 0, 800, 500);

// Neighbor's House Exterior
            ctx.fillStyle = '#81a1c1';
            ctx.fillRect(200, 150, 400, 250);

// Roof
            ctx.fillStyle = '#bf616a';
            ctx.beginPath();
            ctx.moveTo(180, 150);
            ctx.lineTo(400, 70);
            ctx.lineTo(620, 150);
            ctx.fill();

// Front Door
            ctx.fillStyle = '#d08770';
            ctx.fillRect(360, 280, 80, 120);
            ctx.fillStyle = '#ebcb8b';
            ctx.beginPath();
            ctx.arc(425, 340, 5, 0, Math.PI * 2);
            ctx.fill();

// Glowing Window
            ctx.fillStyle = '#ebcb8b';
            ctx.fillRect(250, 200, 70, 70);
            ctx.strokeStyle = '#4c566a';
            ctx.lineWidth = 3;
            ctx.strokeRect(250, 200, 70, 70);
        },
        click: function(x, y) {
            // Click Front Door
            if (x >= 360 && x <= 440 && y >= 280 && y <= 400) {
                playClickSound();
                currentRoom = 'livingRoom';
                statusBox.innerText = "You slipped into the Living Room. Keep quiet!";
            } else {
                statusBox.innerText = "Head for the front door to sneak inside.";
            }
        }
    },
    livingRoom: {
        title: "Living Room",
        draw: function() {
            // Room Interior
            ctx.fillStyle = '#2e3440';
            ctx.fillRect(0, 0, 800, 500);

// Wallpaper Pattern / Panels
            ctx.fillStyle = '#3b4252';
            ctx.fillRect(0, 380, 800, 120);

// Locked Basement Door
            ctx.fillStyle = '#4c566a';
            ctx.fillRect(620, 160, 110, 220);
            ctx.fillStyle = '#bf616a';
            ctx.fillRect(630, 170, 90, 200);
            ctx.fillStyle = '#ebcb8b';
            ctx.fillRect(640, 260, 12, 20); // Padlock symbol

// Armchair
            ctx.fillStyle = '#d08770';
            ctx.fillRect(100, 280, 140, 100);

// Mysterious Painting on Wall
            ctx.fillStyle = '#a3be8c';
            if (!paintingShifted) {
                ctx.fillRect(340, 140, 120, 90);
                ctx.fillStyle = '#2e3440';
                ctx.font = '12px Segoe UI';
                ctx.fillText("PORTRAIT", 365, 190);
            } else {
                // Shifted Painting
                ctx.fillRect(430, 150, 120, 90);

// Hidden Safe behind Painting
                ctx.fillStyle = '#434c5e';
                ctx.fillRect(340, 140, 80, 80);

if (!inventory.includes('Basement Key')) {
                    // Key inside safe
                    ctx.fillStyle = '#ebcb8b';
                    ctx.fillRect(365, 175, 30, 12);
                    ctx.beginPath();
                    ctx.arc(365, 181, 8, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
        },
        click: function(x, y) {
            // Click Painting
            if (!paintingShifted && x >= 340 && x <= 460 && y >= 140 && y <= 230) {
                playClickSound();
                paintingShifted = true;
                statusBox.innerText = "You moved the portrait! There's a hidden wall safe behind it.";
            }
            // Click Key inside Safe
            else if (paintingShifted && !inventory.includes('Basement Key') && x >= 340 && x <= 420 && y >= 140 && y <= 220) {
                playClickSound();
                inventory.push('Basement Key');
                inventoryBox.innerText = "Inventory: Basement Key";
                statusBox.innerText = "You grabbed the Basement Key!";

if (jumpscaresEnabled) {
                    setTimeout(triggerNeighborJumpscare, 350);
                }
            }
            // Click Locked Basement Door
            else if (x >= 620 && x <= 730 && y >= 160 && y <= 380) {
                playClickSound();
                if (inventory.includes('Basement Key')) {
                    statusBox.innerText = "You unlocked the door and escaped into the basement! YOU WIN!";
                    triggerWin();
                } else {
                    statusBox.innerText = "The basement door is padlocked shut. Find the key!";
                }
            }
        }
    }
};

// Flashlight lighting effect
function drawTorchLight() {
    ctx.save();
    ctx.globalCompositeOperation = 'destination-in';

const gradient = ctx.createRadialGradient(mouseX, mouseY, 25, mouseX, mouseY, 190);
    gradient.addColorStop(0, 'rgba(0,0,0,1)');
    gradient.addColorStop(0.75, 'rgba(0,0,0,0.85)');
    gradient.addColorStop(1, 'rgba(0,0,0,0)');

ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(mouseX, mouseY, 190, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
}

// Neighbor Jumpscare Sequence
function triggerNeighborJumpscare() {
    playCatchScream();
    jsCanvas.style.display = 'block';

let frame = 0;
    const interval = setInterval(() => {
        frame++;
        jsCtx.fillStyle = '#000';
        jsCtx.fillRect(0, 0, 800, 500);

// Neighbor Silhouette Visual
        jsCtx.fillStyle = frame % 2 === 0 ? '#bf616a' : '#ebcb8b';

// Neighbor Head & Mustache
        jsCtx.beginPath();
        jsCtx.arc(400 + (Math.random() * 16 - 8), 180, 90, 0, Math.PI * 2);
        jsCtx.fill();

// Glowing Eyes
        jsCtx.fillStyle = '#000';
        jsCtx.beginPath();
        jsCtx.arc(365, 160, 18, 0, Math.PI * 2);
        jsCtx.arc(435, 160, 18, 0, Math.PI * 2);
        jsCtx.fill();

// Yellow Eye Centers
        jsCtx.fillStyle = '#ebcb8b';
        jsCtx.beginPath();
        jsCtx.arc(365, 160, 6, 0, Math.PI * 2);
        jsCtx.arc(435, 160, 6, 0, Math.PI * 2);
        jsCtx.fill();

// Iconic Mustache
        jsCtx.fillStyle = '#4c566a';
        jsCtx.fillRect(330, 210, 140, 30);

if (frame > 22) {
            clearInterval(interval);
            jsCanvas.style.display = 'none';
        }
    }, 45);
}

function triggerWin() {
    statusBox.innerText = "SUCCESS! You unlocked the secret basement door and escaped!";
}

// Render Loop
function render() {
    ctx.clearRect(0, 0, 800, 500);
    rooms[currentRoom].draw();
    drawTorchLight();
    requestAnimationFrame(render);
}

// User Control Inputs
canvas.addEventListener('mousemove', (e) => {
    const rect = canvas.getBoundingClientRect();
    mouseX = e.clientX - rect.left;
    mouseY = e.clientY - rect.top;
});

canvas.addEventListener('click', (e) => {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    rooms[currentRoom].click(x, y);
});

document.getElementById('start-btn').addEventListener('click', () => {
    initAudio();
    playSuspenseDrone();
    document.getElementById('start-screen').style.display = 'none';
});

document.getElementById('toggle-audio').addEventListener('click', (e) => {
    audioMuted = !audioMuted;
    e.target.innerText = audioMuted ? "Unmute Sound" : "Mute Sound";
});

document.getElementById('toggle-jumpscares').addEventListener('click', (e) => {
    jumpscaresEnabled = !jumpscaresEnabled;
    e.target.innerText = jumpscaresEnabled ? "Jumpscares: ON" : "Jumpscares: OFF";
});

// Run Game
render();
</script>
</body>
</html>

Preview

Open Advanced Editor Full Screen