Блокировка
by NeonPanther57118 lines6.9 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, viewport-fit=cover" />
<title>Блокировка</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }
body { background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; overflow: hidden; touch-action: none; font-family: 'Courier New', monospace; }
#container { position: relative; width: 100vw; height: 100vh; background: #000; overflow: hidden; touch-action: none; }
#startScreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; align-items: center; justify-content: center; z-index: 30; color: #333; font-size: 4vmin; letter-spacing: 0.5vmin; transition: opacity 0.3s; }
#startScreen.hidden { opacity: 0; pointer-events: none; }
#sayoriImg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: none; z-index: 10; filter: contrast(1.5) brightness(0.8) saturate(0.5); animation: glitch 0.3s infinite alternate; }
#sayoriImg.active { display: block; }
@keyframes glitch { 0% { transform: translate(0,0) scale(1); opacity:1; } 20% { transform: translate(-5px,3px) scale(1.02); opacity:0.9; } 40% { transform: translate(5px,-3px) scale(0.98); opacity:1; } 60% { transform: translate(-3px,5px) scale(1.01); opacity:0.95; } 80% { transform: translate(3px,-5px) scale(0.99); opacity:1; } 100% { transform: translate(0,0) scale(1); opacity:1; } }
#fallbackScare { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8b0000; display: none; align-items: center; justify-content: center; z-index: 10; color: #000; font-size: 12vmin; font-weight: bold; text-shadow: 0 0 40px #ff0000; animation: glitch 0.2s infinite alternate; }
#fallbackScare.active { display: flex; }
#glitchOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,0,0,0.1); z-index: 11; pointer-events: none; display: none; animation: flicker 0.1s infinite alternate; }
@keyframes flicker { 0% { opacity:0.2; } 100% { opacity:0.8; } }
#lockScreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0a0000; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; touch-action: none; animation: lockGlitch 0.5s infinite alternate; }
#lockScreen.active { display: flex; }
@keyframes lockGlitch { 0% { transform: translate(0,0); } 25% { transform: translate(-2px,2px); } 50% { transform: translate(2px,-2px); } 75% { transform: translate(-1px,1px); } 100% { transform: translate(0,0); } }
#lockScreen h1 { color: #8b0000; font-size: 8vmin; text-shadow: 0 0 40px #ff0000, 0 0 80px #660000; letter-spacing: 1vmin; text-align: center; font-weight: bold; }
#lockScreen p { color: #550000; font-size: 3vmin; margin-top: 2vmin; text-shadow: 0 0 20px #880000; letter-spacing: 0.3vmin; }
#lockScreen .hint { position: absolute; bottom: 3vmin; color: #220000; font-size: 2vmin; opacity: 0.2; }
@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; text-align: center; z-index: 999; padding: 10vmin; font-family: 'Courier New', monospace; text-shadow: 0 0 30px #ff0000; border: 10px solid #3a0000; } }
</style>
</head>
<body>
<div id="container">
<div id="startScreen">⚠ КОСНИТЕСЬ ЭКРАНА</div>
<img id="sayoriImg" src="sayori.png" alt="" />
<div id="fallbackScare">⚠ ОШИБКА</div>
<div id="glitchOverlay"></div>
<div id="lockScreen">
<h1>⚠ ТЕЛЕФОН ЗАБЛОКИРОВАН</h1>
<p>доступ запрещён</p>
<div class="hint">▼</div>
</div>
</div>
<script>
(function() {
const container = document.getElementById('container');
const startScreen = document.getElementById('startScreen');
const sayoriImg = document.getElementById('sayoriImg');
const fallback = document.getElementById('fallbackScare');
const glitchOverlay = document.getElementById('glitchOverlay');
const lockScreen = document.getElementById('lockScreen');
let step = 0;
function startScare() {
if (step !== 0) return;
step = 1;
startScreen.classList.add('hidden');
setTimeout(() => {
sayoriImg.classList.add('active');
glitchOverlay.style.display = 'block';
sayoriImg.onerror = function() {
sayoriImg.classList.remove('active');
fallback.classList.add('active');
};
setTimeout(() => {
sayoriImg.classList.remove('active');
fallback.classList.remove('active');
glitchOverlay.style.display = 'none';
lockScreen.classList.add('active');
step = 2;
}, 2500);
}, 300);
}
container.addEventListener('click', function(e) {
if (step === 0) startScare();
});
container.addEventListener('touchstart', function(e) {
e.preventDefault();
if (step === 0) startScare();
}, { passive: false });
let tapCount = 0, tapTimer = null;
lockScreen.addEventListener('click', function(e) {
tapCount++;
if (tapCount === 1) {
tapTimer = setTimeout(() => { tapCount = 0; }, 500);
} else if (tapCount >= 3) {
lockScreen.classList.remove('active');
startScreen.classList.remove('hidden');
step = 0;
tapCount = 0;
clearTimeout(tapTimer);
}
});
lockScreen.addEventListener('touchstart', function(e) {
e.preventDefault();
lockScreen.click();
}, { passive: false });
let startY = 0;
lockScreen.addEventListener('touchstart', function(e) {
startY = e.touches[0].clientY;
});
lockScreen.addEventListener('touchmove', function(e) {
if (!startY) return;
const delta = e.touches[0].clientY - startY;
if (delta > 80) {
lockScreen.classList.remove('active');
startScreen.classList.remove('hidden');
step = 0;
startY = 0;
}
});
lockScreen.addEventListener('touchend', function() {
startY = 0;
});
})();
</script>
</body>
</html>Game Source: Блокировка
Creator: NeonPanther57
Libraries: none
Complexity: moderate (118 lines, 6.9 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" to link back to the original. Then publish at arcadelab.ai/publish.