Let's see The Game

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>She Is Always Watching You</title>
   <style>
       @import url('https://fonts.googleapis.com/css2?family=Creepster&family=Crimson+Text:wght@400;700&display=swap');
       
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       
       body {
           background: #000;
           overflow: hidden;
           font-family: 'Crimson Text', serif;
           cursor: none;
       }
       
       /* Start Screen */
       #start-screen {
           position: fixed;
           top: 0;
           left: 0;
           width: 100vw;
           height: 100vh;
           background: radial-gradient(circle at center, #0a0a0a 0%, #000 100%);
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           z-index: 1000;
           transition: opacity 2s ease;
       }
       
       #start-screen.fade-out {
           opacity: 0;
           pointer-events: none;
       }
       
       .title {
           font-family: 'Creepster', cursive;
           font-size: 4rem;
           color: #8b0000;
           text-shadow: 0 0 20px #ff0000, 0 0 40px #8b0000;
           margin-bottom: 2rem;
           animation: titleFlicker 3s infinite alternate;
           text-align: center;
           padding: 0 1rem;
       }
       
       @keyframes titleFlicker {
           0%, 100% { opacity: 1; text-shadow: 0 0 20px #ff0000, 0 0 40px #8b0000; }
           50% { opacity: 0.8; text-shadow: 0 0 10px #ff0000, 0 0 20px #8b0000; }
       }
       
       .warning {
           color: #666;
           font-size: 0.9rem;
           max-width: 500px;
           text-align: center;
           margin-bottom: 3rem;
           line-height: 1.6;
           border: 1px solid #333;
           padding: 1.5rem;
           background: rgba(139, 0, 0, 0.1);
       }
       
       .warning strong {
           color: #8b0000;
       }
       
       #start-btn {
           font-family: 'Creepster', cursive;
           font-size: 2rem;
           color: #fff;
           background: linear-gradient(135deg, #8b0000 0%, #4a0000 100%);
           border: 3px solid #ff0000;
           padding: 1rem 3rem;
           cursor: pointer;
           transition: all 0.3s ease;
           box-shadow: 0 0 30px rgba(139, 0, 0, 0.5);
           text-shadow: 0 0 10px #ff0000;
       }
       
       #start-btn:hover {
           transform: scale(1.1);
           box-shadow: 0 0 50px rgba(255, 0, 0, 0.8);
           background: linear-gradient(135deg, #ff0000 0%, #8b0000 100%);
       }
       
       /* Game Screen */
       #game-screen {
           position: fixed;
           top: 0;
           left: 0;
           width: 100vw;
           height: 100vh;
           display: none;
           background: #000;
       }
       
       #game-screen.active {
           display: block;
       }
       
       /* The Face Container */
       .face-container {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           width: 400px;
           height: 500px;
           transition: all 0.5s ease;
       }
       
       /* Pale Face */
       .face {
           width: 100%;
           height: 100%;
           background: radial-gradient(ellipse at center, #f5f5f5 0%, #e0e0e0 50%, #c0c0c0 100%);
           border-radius: 50% 50% 45% 45%;
           position: relative;
           box-shadow: 
               inset -20px -20px 60px rgba(0,0,0,0.3),
               0 0 100px rgba(255,255,255,0.1);
           animation: breathe 4s ease-in-out infinite;
       }
       
       @keyframes breathe {
           0%, 100% { transform: scale(1); }
           50% { transform: scale(1.02); }
       }
       
       /* Eyes Container */
       .eyes-container {
           position: absolute;
           top: 35%;
           left: 50%;
           transform: translateX(-50%);
           display: flex;
           gap: 60px;
       }
       
       .eye-socket {
           width: 100px;
           height: 80px;
           background: #fff;
           border-radius: 50%;
           position: relative;
           overflow: hidden;
           box-shadow: 
               inset 0 0 20px rgba(0,0,0,0.1),
               0 5px 15px rgba(0,0,0,0.2);
       }
       
       .eye {
           width: 40px;
           height: 40px;
           background: radial-gradient(circle at 30% 30%, #4a0000 0%, #000 100%);
           border-radius: 50%;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           transition: all 0.1s ease;
       }
       
       .eye::after {
           content: '';
           position: absolute;
           top: 25%;
           left: 25%;
           width: 12px;
           height: 12px;
           background: #fff;
           border-radius: 50%;
       }
       
       /* Veins on eyes */
       .eye-socket::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: 
               radial-gradient(circle at 20% 30%, transparent 40%, rgba(139,0,0,0.3) 100%),
               radial-gradient(circle at 80% 70%, transparent 40%, rgba(139,0,0,0.2) 100%);
           border-radius: 50%;
       }
       
       /* Nose */
       .nose {
           position: absolute;
           top: 55%;
           left: 50%;
           transform: translateX(-50%);
           width: 30px;
           height: 50px;
           background: linear-gradient(to bottom, #e0e0e0, #c0c0c0);
           border-radius: 50% 50% 60% 60%;
           box-shadow: 0 5px 10px rgba(0,0,0,0.2);
       }
       
       /* Mouth */
       .mouth {
           position: absolute;
           bottom: 20%;
           left: 50%;
           transform: translateX(-50%);
           width: 120px;
           height: 20px;
           background: #1a1a1a;
           border-radius: 0 0 60px 60px;
           transition: all 0.5s ease;
           overflow: hidden;
       }
       
       .mouth.open {
           height: 80px;
           border-radius: 10px 10px 60px 60px;
           background: #0a0a0a;
       }
       
       /* Teeth */
       .mouth::before {
           content: '';
           position: absolute;
           top: 0;
           left: 10%;
           width: 80%;
           height: 15px;
           background: linear-gradient(to bottom, #fffff0, #e0e0e0);
           opacity: 0;
           transition: opacity 0.3s;
       }
       
       .mouth.open::before {
           opacity: 1;
       }
       
       /* Hair */
       .hair {
           position: absolute;
           top: -50px;
           left: 50%;
           transform: translateX(-50%);
           width: 450px;
           height: 200px;
           background: #0a0a0a;
           border-radius: 50% 50% 0 0;
           z-index: -1;
       }
       
       .hair-strand {
           position: absolute;
           width: 20px;
           background: #0a0a0a;
           border-radius: 50%;
       }
       
       /* Horror Messages */
       .horror-message {
           position: fixed;
           color: #8b0000;
           font-family: 'Creepster', cursive;
           font-size: 2rem;
           text-shadow: 0 0 20px #ff0000;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.5s;
           z-index: 100;
       }
       
       .horror-message.show {
           opacity: 1;
           animation: messageFlicker 0.5s infinite alternate;
       }
       
       @keyframes messageFlicker {
           from { opacity: 0.3; }
           to { opacity: 1; }
       }
       
       /* Screen Effects */
       .flicker-overlay {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(255, 0, 0, 0.1);
           opacity: 0;
           pointer-events: none;
           z-index: 50;
           transition: opacity 0.1s;
       }
       
       .flicker-overlay.active {
           animation: screenFlicker 0.1s infinite;
       }
       
       @keyframes screenFlicker {
           0%, 100% { opacity: 0; }
           50% { opacity: 0.3; }
       }
       
       /* Static Noise */
       .static {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
           opacity: 0;
           pointer-events: none;
           z-index: 49;
           mix-blend-mode: overlay;
       }
       
       .static.active {
           animation: staticNoise 0.2s infinite;
       }
       
       @keyframes staticNoise {
           0%, 100% { opacity: 0.05; }
           50% { opacity: 0.15; }
       }
       
       /* Blood Drip */
       .blood {
           position: fixed;
           top: -100px;
           width: 30px;
           height: 100px;
           background: linear-gradient(to bottom, #8b0000, #4a0000);
           border-radius: 0 0 50% 50%;
           opacity: 0;
           z-index: 48;
           filter: blur(2px);
       }
       
       .blood.drip {
           animation: bloodDrip 3s ease-in forwards;
       }
       
       @keyframes bloodDrip {
           0% { opacity: 0; transform: translateY(0); }
           10% { opacity: 1; }
           100% { opacity: 1; transform: translateY(100vh); }
       }
       
       /* Final Scare */
       #final-scare {
           position: fixed;
           top: 0;
           left: 0;
           width: 100vw;
           height: 100vh;
           background: #000;
           display: none;
           justify-content: center;
           align-items: center;
           z-index: 2000;
       }
       
       #final-scare.active {
           display: flex;
           animation: scareFlash 0.1s infinite;
       }
       
       .scare-face {
           width: 80vw;
           height: 80vh;
           background: radial-gradient(ellipse at center, #fff 0%, #ccc 30%, #666 100%);
           border-radius: 50%;
           position: relative;
           animation: scareZoom 0.5s ease-out forwards;
           box-shadow: 0 0 100px rgba(255,0,0,0.8);
       }
       
       @keyframes scareZoom {
           0% { transform: scale(0); }
           100% { transform: scale(1.5); }
       }
       
       @keyframes scareFlash {
           0%, 100% { background: #000; }
           50% { background: #300; }
       }
       
       .scare-eyes {
           position: absolute;
           top: 30%;
           left: 50%;
           transform: translateX(-50%);
           display: flex;
           gap: 100px;
       }
       
       .scare-eye {
           width: 150px;
           height: 150px;
           background: #000;
           border-radius: 50%;
           position: relative;
           overflow: hidden;
       }
       
       .scare-eye::after {
           content: '';
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           width: 50px;
           height: 50px;
           background: #ff0000;
           border-radius: 50%;
           box-shadow: 0 0 50px #ff0000;
           animation: eyePulse 0.2s infinite alternate;
       }
       
       @keyframes eyePulse {
           from { transform: translate(-50%, -50%) scale(1); }
           to { transform: translate(-50%, -50%) scale(1.2); }
       }
       
       .scare-mouth {
           position: absolute;
           bottom: 15%;
           left: 50%;
           transform: translateX(-50%);
           width: 300px;
           height: 150px;
           background: #000;
           border-radius: 0 0 150px 150px;
           overflow: hidden;
       }
       
       .scare-mouth::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 30px;
           background: repeating-linear-gradient(
               90deg,
               #fffff0 0px,
               #fffff0 20px,
               #000 20px,
               #000 25px
           );
       }
       
       .scare-text {
           position: absolute;
           bottom: 5%;
           left: 50%;
           transform: translateX(-50%);
           font-family: 'Creepster', cursive;
           font-size: 4rem;
           color: #ff0000;
           text-shadow: 0 0 30px #ff0000;
           animation: textShake 0.1s infinite;
           white-space: nowrap;
       }
       
       @keyframes textShake {
           0%, 100% { transform: translateX(-50%) translateX(-5px); }
           50% { transform: translateX(-50%) translateX(5px); }
       }
       
       /* Audio Visualizer Bars */
       .audio-viz {
           position: fixed;
           bottom: 20px;
           left: 50%;
           transform: translateX(-50%);
           display: flex;
           gap: 5px;
           opacity: 0;
           z-index: 60;
       }
       
       .audio-viz.active {
           opacity: 0.5;
       }
       
       .viz-bar {
           width: 10px;
           background: #8b0000;
           animation: vizPulse 0.5s ease-in-out infinite alternate;
       }
       
       @keyframes vizPulse {
           from { height: 20px; }
           to { height: 60px; }
       }
       
       /* Cursor follower */
       .cursor-follower {
           position: fixed;
           width: 20px;
           height: 20px;
           border: 2px solid rgba(139, 0, 0, 0.5);
           border-radius: 50%;
           pointer-events: none;
           z-index: 9999;
           transition: transform 0.1s;
           mix-blend-mode: difference;
       }
   </style>
</head>
<body>
   <!-- Start Screen -->
   <div id="start-screen">
       <h1 class="title">She Is Always Watching You</h1>
       <div class="warning">
           <strong>⚠️ WARNING:</strong> This game contains flashing images, loud sounds, and intense horror content. 
           Not recommended for people with heart conditions, epilepsy, or pregnant women. 
           Player discretion is strongly advised. You have been warned.
       </div>
       <button id="start-btn">START GAME</button>
   </div>
   
   <!-- Game Screen -->
   <div id="game-screen">
       <div class="flicker-overlay" id="flicker"></div>
       <div class="static" id="static"></div>
       
       <!-- Face -->
       <div class="face-container" id="face">
           <div class="hair"></div>
           <div class="face">
               <div class="eyes-container">
                   <div class="eye-socket">
                       <div class="eye" id="left-eye"></div>
                   </div>
                   <div class="eye-socket">
                       <div class="eye" id="right-eye"></div>
                   </div>
               </div>
               <div class="nose"></div>
               <div class="mouth" id="mouth"></div>
           </div>
       </div>
       
       <!-- Horror Messages -->
       <div class="horror-message" id="msg1" style="top: 10%; left: 10%;">Do not look into my eyes...</div>
       <div class="horror-message" id="msg2" style="top: 20%; right: 10%;">I can see your fear</div>
       <div class="horror-message" id="msg3" style="bottom: 30%; left: 5%;">You cannot escape</div>
       <div class="horror-message" id="msg4" style="bottom: 20%; right: 15%;">She is behind you</div>
       
       <!-- Blood drips -->
       <div class="blood" style="left: 10%;"></div>
       <div class="blood" style="left: 30%;"></div>
       <div class="blood" style="left: 70%;"></div>
       <div class="blood" style="left: 90%;"></div>
       
       <!-- Audio Visualizer -->
       <div class="audio-viz" id="viz">
           <div class="viz-bar" style="animation-delay: 0s;"></div>
           <div class="viz-bar" style="animation-delay: 0.1s;"></div>
           <div class="viz-bar" style="animation-delay: 0.2s;"></div>
           <div class="viz-bar" style="animation-delay: 0.3s;"></div>
           <div class="viz-bar" style="animation-delay: 0.4s;"></div>
       </div>
   </div>
   
   <!-- Final Scare -->
   <div id="final-scare">
       <div class="scare-face">
           <div class="scare-eyes">
               <div class="scare-eye"></div>
               <div class="scare-eye"></div>
           </div>
           <div class="scare-mouth"></div>
       </div>
       <div class="scare-text">SHE IS HERE</div>
   </div>
   
   <!-- Cursor Follower -->
   <div class="cursor-follower" id="cursor"></div>

   <script>
       // Game State
       let gameStarted = false;
       let mouseX = 0;
       let mouseY = 0;
       let gameTime = 0;
       let scareInterval;
       let messageInterval;
       
       // Elements
       const startScreen = document.getElementById('start-screen');
       const gameScreen = document.getElementById('game-screen');
       const startBtn = document.getElementById('start-btn');
       const leftEye = document.getElementById('left-eye');
       const rightEye = document.getElementById('right-eye');
       const mouth = document.getElementById('mouth');
       const flicker = document.getElementById('flicker');
       const staticOverlay = document.getElementById('static');
       const finalScare = document.getElementById('final-scare');
       const cursor = document.getElementById('cursor');
       const face = document.getElementById('face');
       const viz = document.getElementById('viz');
       
       // Audio Context for generating horror sounds
       let audioContext;
       
       function initAudio() {
           audioContext = new (window.AudioContext || window.webkitAudioContext)();
       }
       
       function playHorrorSound(type) {
           if (!audioContext) return;
           
           const oscillator = audioContext.createOscillator();
           const gainNode = audioContext.createGain();
           
           oscillator.connect(gainNode);
           gainNode.connect(audioContext.destination);
           
           if (type === 'drone') {
               oscillator.frequency.value = 50;
               oscillator.type = 'sawtooth';
               gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
               gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 2);
           } else if (type === 'whisper') {
               oscillator.frequency.value = 200;
               oscillator.type = 'sine';
               gainNode.gain.setValueAtTime(0.05, audioContext.currentTime);
               gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 1);
           } else if (type === 'scare') {
               oscillator.frequency.value = 100;
               oscillator.type = 'square';
               gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
               gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
           }
           
           oscillator.start(audioContext.currentTime);
           oscillator.stop(audioContext.currentTime + 2);
       }
       
       // Mouse tracking
       document.addEventListener('mousemove', (e) => {
           mouseX = e.clientX;
           mouseY = e.clientY;
           
           // Update cursor follower
           cursor.style.left = mouseX - 10 + 'px';
           cursor.style.top = mouseY - 10 + 'px';
           
           if (gameStarted) {
               updateEyes();
           }
       });
       
       function updateEyes() {
           const eyes = [leftEye, rightEye];
           
           eyes.forEach(eye => {
               const rect = eye.getBoundingClientRect();
               const eyeCenterX = rect.left + rect.width / 2;
               const eyeCenterY = rect.top + rect.height / 2;
               
               const angle = Math.atan2(mouseY - eyeCenterY, mouseX - eyeCenterX);
               const distance = Math.min(15, Math.hypot(mouseX - eyeCenterX, mouseY - eyeCenterY) / 20);
               
               const x = Math.cos(angle) * distance;
               const y = Math.sin(angle) * distance;
               
               eye.style.transform = `translate(calc(-50% + ${x}px), calc(-50% + ${y}px))`;
           });
       }
       
       // Start Game
       startBtn.addEventListener('click', () => {
           initAudio();
           startScreen.classList.add('fade-out');
           setTimeout(() => {
               gameScreen.classList.add('active');
               startGame();
           }, 2000);
       });
       
       function startGame() {
           gameStarted = true;
           viz.classList.add('active');
           
           // Play ambient drone
           setInterval(() => {
               if (gameStarted && Math.random() > 0.7) {
                   playHorrorSound('drone');
               }
           }, 3000);
           
           // Progressive horror events
           setTimeout(() => showMessage('msg1'), 2000);
           setTimeout(() => {
               mouth.classList.add('open');
               playHorrorSound('whisper');
           }, 5000);
           
           setTimeout(() => {
               flicker.classList.add('active');
               showMessage('msg2');
           }, 8000);
           
           setTimeout(() => {
               flicker.classList.remove('active');
               staticOverlay.classList.add('active');
           }, 10000);
           
           setTimeout(() => {
               staticOverlay.classList.remove('active');
               showMessage('msg3');
               startBloodDrips();
           }, 12000);
           
           setTimeout(() => {
               showMessage('msg4');
               face.style.transform = 'translate(-50%, -50%) scale(1.1)';
           }, 15000);
           
           setTimeout(() => {
               face.style.transform = 'translate(-50%, -50%) scale(1)';
               flicker.classList.add('active');
           }, 17000);
           
           // Final scare
           setTimeout(() => {
               triggerFinalScare();
           }, 20000);
       }
       
       function showMessage(id) {
           const msg = document.getElementById(id);
           msg.classList.add('show');
           setTimeout(() => {
               msg.classList.remove('show');
           }, 3000);
       }
       
       function startBloodDrips() {
           const bloods = document.querySelectorAll('.blood');
           bloods.forEach((blood, index) => {
               setTimeout(() => {
                   blood.classList.add('drip');
               }, index * 500);
           });
       }
       
       function triggerFinalScare() {
           playHorrorSound('scare');
           finalScare.classList.add('active');
           gameScreen.style.display = 'none';
           
           // Reset after scare
           setTimeout(() => {
               location.reload();
           }, 5000);
       }
       
       // Random micro-events during gameplay
       setInterval(() => {
           if (gameStarted && Math.random() > 0.9) {
               // Random eye twitch
               const eye = Math.random() > 0.5 ? leftEye : rightEye;
               eye.style.transform += ' scale(1.2)';
               setTimeout(() => {
                   updateEyes();
               }, 100);
           }
       }, 2000);
   </script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Banned Abroad Legal in Nigeria 3 Nigerian Food

 Nigeria is a country with a rich history, particularly one that radiates through its different scope of food sources the nation over. Nonetheless, while a portion of these delightful food things are legitimate and eaten in Nigeria, they stay restricted in different nations. These food things incorporate; Bushmeat Bushmeat is in some cases called game meat, a hot, simmered meat known for its remarkable taste. Creatures, for example, pronghorns, wild pigs, bunnies, squirrels, gators, crocodiles and other non-tamed creatures are utilized in the arrangement of bushmeat. In any case, as succulent and appetizing as bushmeat is, it is prohibited in the US of America because of wellbeing concerns like these creatures being transporters of sicknesses like ebola, and cholera, considering them dangerous to consume. Bushmeat, in any sum, found at U.S. ports of section are ended alongside any private things that might have interacted with the bushmeat. There is a $250,000 fine for bringing bus...
Read more