Скример

by NeonPanther57
169 lines5.8 KB
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Скример</title>
    <style>
        * { margin:0; padding:0; box-sizing:border-box; user-select:none; -webkit-tap-highlight-color:transparent; }
        body {
            background:#000;
            display:flex;
            align-items:center;
            justify-content:center;
            height:100vh;
            overflow:hidden;
            touch-action:none;
            font-family:'Impact', sans-serif;
        }
        #start {
            color:#333;
            font-size:6vmin;
            letter-spacing:0.5vmin;
            cursor:pointer;
            transition:color 0.3s;
        }
        #scare {
            display:none;
            position:fixed;
            top:0; left:0;
            width:100%; height:100%;
            background:#cc0000;
            align-items:center;
            justify-content:center;
            flex-direction:column;
            animation:blink 0.15s infinite alternate;
            z-index:999;
        }
        #scare.active { display:flex; }
        @keyframes blink {
            0% { opacity:1; }
            100% { opacity:0.6; }
        }
        #scare h1 {
            font-size:20vmin;
            color:#fff;
            text-shadow:0 0 30px #000;
            text-align:center;
            line-height:1;
            animation:shake 0.1s infinite alternate;
        }
        @keyframes shake {
            0% { transform:translate(-2px,2px) rotate(-1deg); }
            100% { transform:translate(2px,-2px) rotate(1deg); }
        }
        #scare p {
            font-size:10vmin;
            color:#ff0;
            margin-top:2vmin;
            text-shadow:0 0 20px #000;
        }
        /* Портретная ориентация – просто предупреждение, но не блокируем */
        @media (orientation:portrait) {
            body::after {
                content:"Поверни телефон горизонтально";
                position:fixed;
                top:0; left:0; width:100%; height:100%;
                background:#000;
                color:#8b0000;
                display:flex;
                align-items:center;
                justify-content:center;
                font-size:5vmin;
                z-index:1000;
                font-family:'Courier New',monospace;
                text-shadow:0 0 30px #ff0000;
                border:10px solid #3a0000;
            }
        }
    </style>
</head>
<body>
    <div id="start">⚠ КОСНИСЬ ЭКРАНА</div>
    <div id="scare">
        <h1>YOU ARE<br>AN IDIOT</h1>
        <p>😂🤪😂</p>
    </div>

    <script>
        (function() {
            const start = document.getElementById('start');
            const scare = document.getElementById('scare');
            let triggered = false;

            function playAudio() {
                if (!window.speechSynthesis) return;
                // Фраза из мема
                const phrases = [
                    "You are an idiot.",
                    "You are an idiot!",
                    "Hahahaha!"
                ];
                let delay = 0;
                phrases.forEach((text, i) => {
                    setTimeout(() => {
                        const msg = new SpeechSynthesisUtterance(text);
                        msg.lang = 'en-US';
                        msg.rate = 1.3;
                        msg.pitch = i === 2 ? 1.8 : 1.4; // смех выше
                        msg.volume = 1;
                        window.speechSynthesis.speak(msg);
                    }, delay);
                    delay += 1200;
                });
            }

            function triggerScare() {
                if (triggered) return;
                triggered = true;

                // Скрываем стартовый текст
                start.style.display = 'none';

                // Показываем скример
                scare.classList.add('active');

                // Звук
                playAudio();

                // Вибрация (если есть)
                if (navigator.vibrate) {
                    navigator.vibrate([100, 50, 100, 50, 200, 100, 300]);
                }

                // Полноэкранный режим (если разрешено – добавит эффект)
                try {
                    document.documentElement.requestFullscreen?.();
                } catch(e) {}
            }

            // Обработчики клика/касания
            start.addEventListener('click', triggerScare);
            start.addEventListener('touchstart', function(e) {
                e.preventDefault();
                triggerScare();
            }, { passive: false });

            // Можно также выйти из скримера двойным касанием (скрыто)
            let tapCount = 0, tapTimer = null;
            scare.addEventListener('click', function(e) {
                tapCount++;
                if (tapCount === 1) {
                    tapTimer = setTimeout(() => { tapCount = 0; }, 400);
                } else if (tapCount >= 2) {
                    // Сброс: возвращаем начальный экран
                    scare.classList.remove('active');
                    start.style.display = 'block';
                    triggered = false;
                    tapCount = 0;
                    clearTimeout(tapTimer);
                }
            });
            scare.addEventListener('touchstart', function(e) {
                e.preventDefault();
                scare.click();
            }, { passive: false });
        })();
    </script>
</body>
</html>
Game Source: Скример

Creator: NeonPanther57
Libraries: none
Complexity: moderate (169 lines, 5.8 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-neonpanther57-msreysd2" to link back to the original. Then publish at arcadelab.ai/publish.