FnafGame

by enbette

HTML

<div id='taskScreen' hidden></div>
<canvas id='uiCanvas' width=688 height=500></canvas>

<img id='sideBtns' src='https://i.ibb.co/7tGJ81vC/sideBtn.png' hidden>
<img id='redBtn' src='https://i.ibb.co/S7c9qRGH/btnsRed.png' hidden>
<img id='yellowBtn' src='https://i.ibb.co/6RFh1d5d/btns-Yellow.png' hidden>

<div id='nose' hidden> <p class='message'>You found a secret!<br>
F: CodeCodeCode</p>
<p class='message' style="color:red; font-size:50px" onclick="document.getElementById('nose').hidden=true">X</p></div>
<img id='clickToPlay' class='loading' src='https://i.ibb.co/kgHMFCZK/Play.png'>
<img id='warningB' class='loading' src='https://i.ibb.co/qLbG1pW3/warningB.png'>
<img id='warning' class='loading' style='opacity:0' src='https://i.ibb.co/vvRTsr98/Warning.png'>
<img id='clickToContinue' class='loading' src='https://i.ibb.co/VKrHt6Y/click-To-Continue.png'>
<img id='loading' class='loading' src='https://i.ibb.co/N2Sb42Gb/Loading-Screen.png'>


<script type="x-shader/x-vertex" id="vs">

  varying vec2 vclr;
  varying vec3 pos;

  void main() {
     
  	vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
		
    gl_Position = projectionMatrix * mvPosition;
    vclr = uv;
    pos = position.xyz;
  }
</script>

<script id="fs" type="x-shader/x-fragment">
varying vec2 vclr;
varying vec3 pos;
float str = 1.0;
float ok = 2.5;
uniform vec2 iResolution;
uniform sampler2D texture1;
uniform int screamer;

uniform float iTime;

float vertJerkOpt = 0.1;
float vertMovementOpt = 0.05;
float bottomStaticOpt = 0.1;
float scalinesOpt = 1.0;
float rgbOffsetOpt = 0.2;
float horzFuzzOpt = 0.2;

vec3 mod289(vec3 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec2 mod289(vec2 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec3 permute(vec3 x) {
  return mod289(((x*34.0)+1.0)*x);
}

float snoise(vec2 v)
  {
  const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
                     ...

CSS

body {
  background: #171616;
}
canvas{
  
  position: absolute;

}

#uiCanvas{
  pointer-events: none
}

.loading{
  position:absolute;
  
}

#nose{
  position:absolute;
  background-color: #322f2f;
  width:688px;
  height:500px;
}
.message{
  text-align: center;
  font-size: 38px;
  color: #7d8161
}

#taskScreen{
  position:absolute;
  width:688px;
  height:500px;
  background-color: #bac2c3;
}

JavaScript

import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';

let urls = {
  playS: 'https://i.ibb.co/67g8XN39/Play-Sound.png',
  of1: 'https://i.ibb.co/yFMzHyZQ/Office2.png',
  of2: 'https://i.ibb.co/fGFGsvmp/Office22.png',
  ofdark: 'https://i.ibb.co/0VXLQ93J/Office2dark.png',
  ofdarkMonster: 'https://i.ibb.co/JFQ9ZYq8/Office2g.png',
  ofMonster: 'https://i.ibb.co/07ZHk4M/Office2-Presence2.png',

  minimap: 'https://i.ibb.co/wFSKV3HM/MiniMap.png',
  c1: 'https://i.ibb.co/SDL32MGH/Cam1Btn.png',
  c2: 'https://i.ibb.co/xtV69tcP/Cam2Btn.png',
  c3: 'https://i.ibb.co/8DRzyk0w/Cam3Btn.png',
  c4: 'https://i.ibb.co/ZqHFw8H/Cam4Btn.png',
  c5: 'https://i.ibb.co/qL3LBzxM/Cam5Btn.png',
  c6: 'https://i.ibb.co/zVgKpQmh/Cam6Btn.png',
  c7: 'https://i.ibb.co/kVHP82mr/Cam7Btn.png',
  c8: 'https://i.ibb.co/XxTzfsbH/Cam8Btn.png',
  c9: 'https://i.ibb.co/YFkZ5XXM/Cam9Btn.png',

  c1NoM: 'https://i.ibb.co/WNh4z81y/image.png',
  c2NoM: 'https://i.ibb.co/4nKgxqYv/Arcade.png',
  c3NoM: 'https://i.ibb.co/gNKhkDN/Hall1.png',
  c4NoM: 'https://i.ibb.co/kVtCVfy3/Hall2.png',
  c5NoM: 'https://i.ibb.co/PsLHfVBm/Manager.png',
  c6NoM: 'https://i.ibb.co/fdpRwyZQ/clothing-store.png',
  c7NoM: 'https://i.ibb.co/Y79PG717/stage.png',
  c8NoM: 'https://i.ibb.co/tT4V8cRZ/Designers.png',
  c9NoM: 'https://i.ibb.co/5gkSSxH0/Admin.png',

  c1M: 'https://i.ibb.co/ZPqs0cB/NT-OFFIFCE-w-monster.png',
  c2M: 'https://i.ibb.co/Y7pGJFhc/ArcadeM.png',
  c3M: 'https://i.ibb.co/jPMqwdxw/Hall1M.png',
  c4M: 'https://i.ibb.co/fdYktx4j/Hall2M.png',
  c5M: 'https://i.ibb.co/mCLv9W0Q/ManagerM.png',
  c6M: 'https://i.ibb.co/SXjvz1Mc/image.png',
  c7M: 'https://i.ibb.co/9kLM7gCS/stage-monster-2.png',
  c8M: 'https://i.ibb.co/CsWxpqtG/Designers-M.png',
  c9M: 'https://i.ibb.co/d4KRwgmG/AdminM.png',

  cMClose: 'https://i.ibb.co/yB5K7WWc/MClose.png',
  bTexture: 'https://i.ibb.co/Q7j28rGk/Black-Screen2.png',
  scr0:...