[WGL/P] Added a proper level management system, added more options to the menu

1 files changed, 28 insertions, 19 deletions

diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html
index 6133dba..1dc3ffe 100644
--- a/Year 2/Computer Graphics with WebGL/Project/Project.html
+++ b/Year 2/Computer Graphics with WebGL/Project/Project.html
@@ -11,7 +11,7 @@
 body {

 	padding: 0;

 	margin: 0;

-	font: 21px sans-serif;

+	font: 18px sans-serif;

 }

 canvas {

 	display: block;

@@ -44,6 +44,7 @@ h2 {
 	padding: 0.2em;

 	border: 2px solid white;

 	width: auto;

+	background-color: black;

 }

 #paused { 

 	left: 0;

@@ -55,7 +56,8 @@ h2 {
 	right: 0;

 	top: 0;

 	padding: 0.5em;

-	max-width: 15em;

+	max-width: 24em;

+	max-height: calc(100vh - 0.5em);

 }

 	</style>

 

@@ -63,6 +65,7 @@ h2 {
 	<script src="skybox.js"></script>

 	<script src="star.js"></script>

 	<script src="blackhole.js"></script>

+	<script src="level.js"></script>

 	<script>

 		/*

 		 * WebGL

@@ -101,20 +104,12 @@ h2 {
 			gl.uniform3f(uDiffuseColor,1,1,1);

 			gl.uniform3f(uLightDir,0,0,-1);

 

-			skybox = new Skybox(10000, [0,0,0], undefined);

-

-			stars = [

-				new Star([1200,0,1000], 10),

-				// new Star([1000,0,900], 30),

-				// new Star([950,0,1100], 40),

-			];

-						// new Star([1000,0,-1000], 50)

-			// 			new Star([0,0,0], 100)

-			// 			new Star([1000, 0, -30], 20);

+			gl.uniform4f(uBlack, 0,0,0,1);

+			gl.uniform4f(uBHBlack, 0,0,0,1);

 

-			blackHoles = [

-				new BlackHole([1000,0,900], 30)

-			];

+			skybox = new Skybox(10000, [0,0,0], undefined);

+			createLevels();

+			initMenu();

 

 			resizeglcanvas();

 		}

@@ -135,7 +130,7 @@ h2 {
 			updateCamera();

 			gl.uniform3fv(uEye, pos);

 

-			stars[0].moveTo(vecSum(stars[0].sphere.center, [-0.5,0,0]));

+			// stars[0].moveTo(vecSum(stars[0].sphere.center, [-0.5,0,0]));

 

 			skybox.draw();

 			stars.forEach((s) => s.draw());

@@ -148,15 +143,29 @@ h2 {
 <body onload="start()">

 	<canvas id="picasso"></canvas>

 	<div id="menu">

-		<div id="paused">Click here to explore</div>

+		<div id="paused">Click here to start moving</div>

 		<div id="settings">

 			<h2>About</h2>

 			<p>

 				Simulation of the light-bending effects of black holes.<br>

-				WASD to move around, space and shift for up and down, mouse cursor to look around.

+				WASD to move around, space and shift for up and down, mouse cursor to look around.<br>

+				Escape will remove your controls and bring you back here.

+			</p>

+			<h2>Level</h2>

+			<p>

+				<select id="level-select"></select>

+				<p id="level-description"></p>

+				<p>

+					Pause movement: <input type="checkbox" id="pause-movement">

+				</p>

 			</p>

 			<h2>Settings</h2>

-			Move speed:

+			<p>

+				Debug mode: <input type="checkbox" id="debug-mode"><br>

+				Only horizontal mouse movement: <input type="checkbox" id="only-horizontal"><br>

+				Only vertical mouse movement: <input type="checkbox" id="only-vertical">

+			</p>

 		</div>

 	</div>

+	<script src="menu.js"></script>

 </body>