const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; if (typeof window.__P5_CLEANUP__ === "function") { window.__P5_CLEANUP__(); } const sketch = (p) => { let angle = 0; let scaleFactor = 1; let offsetX = 0; let offsetY = 0; let resizeObserver = null; let resizeHandler = null; let teardown = null; // Quiz game state let quizState = 0; let questionTimer = 0; let scareLevel = 0; let shakeAmount = 0; let userName = ""; let inputText = ""; let inputActive = false; let questions = [ { text: "What's your favorite color?", type: "text" }, { text: "How old are you?", type: "text" }, { text: "What's your name?", type: "name" }, { text: "Where do you live?", type: "text" }, { text: "Favorite food?", type: "text" }, { text: "What's your pet's name?", type: "text" }, { text: "Job or school?", type: "text" }, { text: "Hobby?", type: "text" }, { text: "Morning person?", type: "text" }, { text: "Coffee or tea?", type: "text" }, { text: "Favorite movie?", type: "text" }, { text: "Dream vacation?", type: "text" }, { text: "Superpower wish?", type: "text" }, { text: "Scariest movie?", type: "text" }, { text: "Believe in ghosts?", type: "text" }, { text: "Hi {name}, nice answers!", type: "personalized" }, { text: "I remember your favorite color...", type: "creepy" }, { text: "Watching you type, {name}...", type: "creepy" }, { text: "Your screen feels close now...", type: "creepy" }, { text: "Something behind you? Turn around.", type: "creepy" }, { text: "GET OUT!", type: "jumpscare" } ]; const getContainer = () => document.getElementById("renderDiv"); const computeLayout = () => { const container = getContainer(); const width = Math.max(1, container ? container.clientWidth : window.innerWidth); const height = Math.max(1, container ? container.clientHeight : window.innerHeight); const fitScale = Math.max( 0.1, Math.min(width / DESIGN_WIDTH, height / DESIGN_HEIGHT) || 1 ); scaleFactor = fitScale; offsetX = (width - DESIGN_WIDTH * scaleFactor) / 2; offsetY = (height - DESIGN_HEIGHT * scaleFactor) / 2; return { width, height }; }; const resizeCanvasToContainer = () => { const { width, height } = computeLayout(); p.resizeCanvas(width, height); }; const toDesignSpace = (clientX, clientY) => ({ x: (clientX - offsetX) / scaleFactor, y: (clientY - offsetY) / scaleFactor, }); p.setup = () => { const { width, height } = computeLayout(); const renderer = p.createCanvas(width, height); renderer.parent("renderDiv"); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); p.noStroke(); const container = getContainer(); if (typeof ResizeObserver !== "undefined" && container) { resizeObserver = new ResizeObserver(() => { resizeCanvasToContainer(); }); resizeObserver.observe(container); } else { resizeHandler = () => resizeCanvasToContainer(); window.addEventListener("resize", resizeHandler); } teardown = () => { if (resizeObserver) { resizeObserver.disconnect(); resizeObserver = null; } if (resizeHandler) { window.removeEventListener("resize", resizeHandler); resizeHandler = null; } }; }; p.windowResized = () => { resizeCanvasToContainer(); }; p.draw = () => { // Screen shake effect const shakeX = (Math.random() - 0.5) * shakeAmount; const shakeY = (Math.random() - 0.5) * shakeAmount; p.background(15 - Math.min(scareLevel * 2, 30), 23 - Math.min(scareLevel * 3, 40), 42 - Math.min(scareLevel * 4, 50)); p.push(); p.translate(offsetX + shakeX, offsetY + shakeY); p.scale(scaleFactor); p.textAlign(p.CENTER); p.textSize(28); p.fill(quizState < 15 ? 255 : 200 - scareLevel * 10, quizState < 15 ? 200 : 100 - scareLevel * 15, quizState < 15 ? 150 : 50 - scareLevel * 20); p.textFont('Courier New'); let displayText = questions[quizState].text; if (displayText.includes("{name}") && userName) { displayText = displayText.replace("{name}", userName); } if (questions[quizState].type === "jumpscare") { p.textSize(80); p.fill(255, 0, 0); p.text(displayText, DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); p.noLoop(); return; } p.text(displayText, DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 - 100); // Show chat responses after quiz if (quizState >= 15 && questions[quizState].type !== "jumpscare") { p.textSize(20); p.fill(150, 100, 200, 200); p.text("Type anything to continue chatting...", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 150); } // Input box for text answers if (quizState < questions.length - 1 && (questions[quizState].type === "text" || questions[quizState].type === "name")) { const inputWidth = 400; const inputHeight = 50; const inputY = DESIGN_HEIGHT / 2 + 20; p.textSize(24); p.noStroke(); p.fill(40, 30, 60, inputActive ? 200 : 120); p.rect((DESIGN_WIDTH - inputWidth) / 2, inputY - inputHeight / 2, inputWidth, inputHeight, 8); p.fill(255); p.textAlign(p.LEFT); if (inputText || inputActive) { p.text(inputText || "_", (DESIGN_WIDTH - inputWidth) / 2 + 20, inputY + 8); } // Next button const nextWidth = 120; const nextHeight = 40; const nextX = DESIGN_WIDTH / 2 + 100; const nextY = inputY; const pointer = toDesignSpace(p.mouseX, p.mouseY); p.fill(80, 60, 100); if (pointer.x > nextX - nextWidth / 2 && pointer.x < nextX + nextWidth / 2 && pointer.y > nextY - nextHeight / 2 && pointer.y < nextY + nextHeight / 2) { p.fill(120, 90, 140); } p.rect(nextX - nextWidth / 2, nextY - nextHeight / 2, nextWidth, nextHeight, 6); p.fill(255); p.textAlign(p.CENTER, p.CENTER); p.textSize(20); p.text("ENTER", nextX, nextY + 5); p.textAlign(p.CENTER); } else if ((quizState >= questions.length - 1 || questions[quizState].type !== "text" && questions[quizState].type !== "name") && questions[quizState].type !== "jumpscare") { const inputWidth = 400; const inputHeight = 50; const inputY = DESIGN_HEIGHT / 2 + 20; p.textSize(24); p.noStroke(); p.fill(40, 30, 60, inputActive ? 200 : 120); p.rect((DESIGN_WIDTH - inputWidth) / 2, inputY - inputHeight / 2, inputWidth, inputHeight, 8); p.fill(255); p.textAlign(p.LEFT); if (inputText || inputActive) { p.text(inputText || "_", (DESIGN_WIDTH - inputWidth) / 2 + 20, inputY + 8); } } // Stop eyes before creepy phase if (quizState >= 15 && quizState < 20) { p.noStroke(); p.fill(255, 0 + scareLevel * 15, 0); const eyeSize = 15 + scareLevel * 2; p.circle(DESIGN_WIDTH * 0.3, DESIGN_HEIGHT * 0.25, eyeSize); p.circle(DESIGN_WIDTH * 0.7, DESIGN_HEIGHT * 0.25, eyeSize); const pointer = toDesignSpace(p.mouseX, p.mouseY); const pupilX1 = p.map(pointer.x, 0, DESIGN_WIDTH, DESIGN_WIDTH * 0.3 - 6, DESIGN_WIDTH * 0.3 + 6); const pupilX2 = p.map(pointer.x, 0, DESIGN_WIDTH, DESIGN_WIDTH * 0.7 - 6, DESIGN_WIDTH * 0.7 + 6); const pupilY = p.map(pointer.y, 0, DESIGN_HEIGHT, DESIGN_HEIGHT * 0.25 - 6, DESIGN_HEIGHT * 0.25 + 6); p.fill(80); p.circle(pupilX1, pupilY, 8); p.circle(pupilX2, pupilY, 8); } p.pop(); // Update effects angle += 0.02 + scareLevel * 0.01; questionTimer++; shakeAmount *= 0.95; }; p.mousePressed = () => { const pointer = toDesignSpace(p.mouseX, p.mouseY); // Check input next button if (quizState < questions.length - 1 && (questions[quizState].type === "text" || questions[quizState].type === "name")) { const inputWidth = 400; const inputHeight = 50; const inputY = DESIGN_HEIGHT / 2 + 20; const nextWidth = 120; const nextHeight = 40; const nextX = DESIGN_WIDTH / 2 + 100; const nextY = inputY; if (pointer.x > nextX - nextWidth / 2 && pointer.x < nextX + nextWidth / 2 && pointer.y > nextY - nextHeight / 2 && pointer.y < nextY + nextHeight / 2) { nextQuestion(); } } // Click to focus input const inputWidth = 400; const inputHeight = 50; const inputY = DESIGN_HEIGHT / 2 + 20; const inputX = (DESIGN_WIDTH - inputWidth) / 2; if (pointer.x > inputX && pointer.x < inputX + inputWidth && pointer.y > inputY - inputHeight / 2 && pointer.y < inputY + inputHeight / 2) { inputActive = true; } }; p.keyPressed = () => { if (inputActive && questions[quizState].type !== "jumpscare") { if (p.keyCode === p.ENTER) { nextQuestion(); } else if (p.keyCode === p.BACKSPACE) { inputText = inputText.slice(0, -1); } else if (p.key.length === 1 && inputText.length < 25) { inputText += p.key.toLowerCase(); } } }; const nextQuestion = () => { if (inputText.trim()) { if (questions[quizState].type === "name") { userName = inputText.trim(); } inputText = ""; } quizState++; inputActive = false; if (quizState < 15) { scareLevel += 0.1; shakeAmount = 2; } else { scareLevel += 1.5; shakeAmount = 15; } if (quizState >= questions.length) { quizState = questions.length - 1; } }; const originalRemove = p.remove.bind(p); p.remove = () => { if (typeof teardown === "function") { teardown(); teardown = null; } originalRemove(); }; }; const instance = new window.p5(sketch, "renderDiv"); window.__P5_CLEANUP__ = () => { try { instance.remove(); } catch (error) { console.warn("Failed to remove p5 instance", error); } };

SCARY QUIZ GAME NOW AVAILABLE

How to Play