LightsOutMaze/app.html at main · thorn91/LightsOutMaze · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Lights Out!</title>
	<link href="css/main.css" rel="stylesheet" type="text/css">
    <link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
	<!-- <script src="https://unpkg.com/three@0.120.0/build/three.js"></script> -->

	<script id="vGlow" type="x-shader/x-fragment">
		uniform vec3 vVector;
		uniform float c;
		uniform float p;
		varying float intensity;

		void main()
		{
			vec3 vNorm = normalize(normalMatrix * normal);
			vec3 Norm = normalize(normalMatrix * vVector);
			intensity = pow( c - dot(vNorm, Norm), p);

			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
		}
	</script>
	<script id="fGlow" type="x-shader/x-fragment">
		uniform vec3 glowColor;
		varying float intensity;

		void main()
		{
			vec3 glow = glowColor * intensity;
			gl_FragColor = vec4( glow, 1.0 );
		}
	</script>

</head>

<body>
	<div id="scene-container">
		<script src="app.js" type="module"></script>
		<div id="start" class="nes-container is-rounded" style="position:fixed; padding:8px; font-family: monospace;
        margin: 0; z-index:10; min-width: 100%; min-height: 100%;
        color:white; border: thick solid gold; background-image: url(./resources/cornentrance.jpg); display: hidden; background-size: 100%" >
			<div id="centered-good">
				<h2>Enter the corn.</h2>
				<h3>Collect torches to add daylight and find the exit.<h3>
				<h3>When the torch glows, start moving.  There is no going back.</h3>
				<br>
				<button id="easybtn">Easy</button> - a more comfortable bigger field of view
				<br><br>
				<button id="hardbtn">Hard</button> - a closer and disorienting view
				<br><br>
				<h3>Controls:</h3>
				<ul>
					<li><strong>wasd/Arrow Keys</strong> - move and turn</li>
					<li><strong>q</strong> - sprint (while staming remains)</li>
					<li><strong>shift + turn</strong> - sharp turn</li>
				</ul>
				<ul> (For Debugging / Demonstrating)
					<li><strong>=</strong> - top down camera (does not reset)</li>
					<li><strong>Mouse Click</strong> - logs point of contact between the camera->ground</li>
					<li><strong>e or t</strong> - time remaining - 25s</li>
					<li><strong>,</strong> - moves exit to center start area (left of player)</li>
				</ul>
			</div>
        </div>


		<div id="gameover" class="nes-container is-rounded" style="position:fixed; padding:8px; font-family: monospace;
        margin: 0; z-index:10; min-width: 100%; min-height: 100%;
        color:white; border: thick solid black; display: none;" >
            <div id="centered">
				<span id="endmsg"><p></p></span><br>
				<span id="score"></span>
				<br><br><br>
				<button onclick="window.location.reload();">Play Again?</button>
            </div>
        </div>
	</div>


	<h3 style="position:fixed; top:5px; left:5px; padding:8px;
	margin: 0; z-index:10; background-color:#32332A;
	color:ghostwhite; border: thick solid ghostwhite; font-family:monospace">
	Escape the corn maze! <br>
	Time Remaining: <span id="timeLeft">0</span><br>
	Torches Collected: <span id="collected">0</span>
	<span><br>
		<audio id="music" src="./resources/halloween.mp3"></audio>
		<div>
			<!-- <button onclick="document.getElementById('music').play()">Play</button> -->
			<!-- <button onclick="document.getElementById('music').pause()">Pause</button> -->
			<button onclick="document.getElementById('music').muted=!document.getElementById('music').muted">Mute/ Unmute</button>
		</div>
	</h3>
	<h3 style="position:fixed; top:5px; right:5px; padding:8px;
	margin: 0; z-index:10; background-color:#32332A;
	color:ghostwhite; border: thick solid ghostwhite; font-family:monospace">
		Stamina: <span id=stamina>100</span>
	</h3>

</body>
</html>