Skip to content

Commit

Permalink
[Tested] index swap for github deployment
Browse files Browse the repository at this point in the history
  • Loading branch information
@Auc7us
Auc7us committed Dec 12, 2024
1 parent f310b17 commit f002fa7
Show file tree
Hide file tree
Showing 3 changed files with 299 additions and 299 deletions.
241 changes: 219 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta name="description" content="A fun, interactive JavaScript FPS game with customizable mouse sensitivity and intuitive controls.">
<meta charset="utf-8">
<title>Guns N' Poses</title>
<meta charset="UTF-8">
<meta name="description" content="A WebGL FPS game with interactive controls and customizable settings.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guns N' Poses - WebGL Edition</title>
<style>
body {
display: flex;
Expand All @@ -22,14 +23,51 @@
.controls h1 {
font-size: 22px;
}
#cooldown-container {
position: absolute;
bottom: 20px;
left: 42%;
transform: translateX(-50%);
width: 200px;
height: 40px;
background-color: rgb(37, 33, 33);
border: 2px solid black;
border-radius: 5px;
overflow: hidden;
z-index: 100;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 5px 0;
}

#cooldown-label {
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
color: white;
}

#cooldownBar {
width: 0%;
height: 20px;
background-color: rgb(143, 5, 5);
border-radius: 3px;
transition: width 0.1s linear;
}
</style>
</head>
<body>
<canvas id="canvas" width="1600" height="900"></canvas>
<div id="cooldown-container">
<span id="cooldown-label">Weapon Cooldown</span>
<div id="cooldownBar"></div>
</div>
<div class="controls">
<label for="slider1">Mouse Sensitivity:</label>
<input id="slider1" type="range" min="1" max="10" />
<!-- <label for="slider1">Mouse Sensitivity:</label>
<input id="slider1" type="range" min="1" max="10" /> -->

<label for="fovSlider">Field of View:</label>
<input id="fovSlider" type="range" min="55" max="95" step="1" value="65">
<p>FOV: <span id="fovValue">65</span>°</p>
Expand All @@ -41,19 +79,180 @@ <h1>Game Controls</h1>
<li><strong>A</strong>: Move Left</li>
<li><strong>D</strong>: Move Right</li>
<li><strong>Shift</strong>: Sprint</li>
<li><strong>C</strong>: Crouch</li>
<!-- <li><strong>C</strong>: Crouch</li> -->
<li><strong>Space</strong>: Jump</li>
<li><strong>Left Mouse Button (Hold)</strong>: Rifle Shoot</li>
<li><strong>Right Mouse Button (Click)</strong>: Single Heavy Shot</li>
<li><strong>Right Mouse Button (Hold)</strong>: Charged Heavy Shot</li>
<li><strong>V</strong>: Display Platform Path</li>

<li><strong>Left Mouse Button</strong>: Shoot</li>
<!-- <li><strong>Right Mouse Button</strong>: Charged Shot</li>
<li><strong>V</strong>: Display Path</li> -->
</ul>
<p><strong>Instructions:</strong> Click on the game to take pointer control. Press <strong>Esc</strong> to exit pointer control.</p>
<p><strong>Note:</strong> Floor/ Ground mechanics are <strong>under active developement</strong> and havent been added. Hit box mechanics will also be added in the future</p>
</div>

<!-- Use type="module" to enable ES6 modules -->
<!-- Vertex Shader -->
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec3 aPosition;
attribute vec3 aNormal;

uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;
uniform mat3 uNormalMatrix;

varying vec3 vNormal;
varying vec3 vPosition;

void main() {
vec4 worldPosition = uModelMatrix * vec4(aPosition, 1.0);
vPosition = worldPosition.xyz;
vNormal = normalize(uNormalMatrix * aNormal);

gl_Position = uProjectionMatrix * uViewMatrix * worldPosition;
}
</script>

<script id="vertex-texture" type="x-shader/x-vertex">
attribute vec3 aPosition;
attribute vec3 aNormal;
attribute vec2 aTexCoord;

uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;
uniform mat3 uNormalMatrix;

varying vec3 vNormal;
varying vec3 vPosition;
varying vec2 vTexCoord;

void main() {
vec4 worldPosition = uModelMatrix * vec4(aPosition, 1.0);
vPosition = worldPosition.xyz;
vNormal = normalize(uNormalMatrix * aNormal);
vTexCoord = aTexCoord;

gl_Position = uProjectionMatrix * uViewMatrix * worldPosition;
}
</script>

<script id="fragment-bullet" type="x-shader/x-fragment">
precision mediump float;
varying vec3 vNormal;
varying vec3 vPosition;

uniform vec3 uLightDirection;
uniform vec3 uLightColor;
uniform vec3 uObjectColor;
uniform vec3 uViewPosition;

const float reflectionStrength = 0.07;

void main() {
vec3 lightDir = normalize(uLightDirection);
vec3 viewDir = normalize(uViewPosition - vPosition);

float ambientStrength = 0.5;
vec3 ambient = ambientStrength * uLightColor;

float diffuseStrength = max(dot(vNormal, -lightDir), 0.0);
vec3 diffuse = diffuseStrength * uLightColor;

vec3 reflectDir = reflect(lightDir, vNormal);
float shininess = 10.0;
float specularStrength = 40.0;
float spec = 0.0;
if (diffuseStrength > 0.0) {
spec = pow(max(dot(viewDir, reflectDir), 0.0), shininess);
}
vec3 specular = specularStrength * spec * uLightColor;

vec3 finalColor = (ambient + diffuse) * uObjectColor + specular * uLightColor ;

gl_FragColor = vec4(finalColor, 1.0);
//gl_FragColor = vec4(vNormal * 0.5 + 0.5, 1.0);
}
</script>

<script id="fragment-bpd" type="x-shader/x-fragment">
precision mediump float;
varying vec3 vNormal;
varying vec3 vPosition;

uniform vec3 uLightDirection;
uniform vec3 uLightColor;
uniform vec3 uObjectColor;
uniform vec3 uViewPosition;

const float reflectionStrength = 0.07;

void main() {
vec3 lightDir = normalize(uLightDirection);
vec3 viewDir = normalize(uViewPosition - vPosition);

float ambientStrength = 0.02;
vec3 ambient = ambientStrength * uLightColor;

float diffuseStrength = max(dot(vNormal, -lightDir), 0.0);
vec3 diffuse = diffuseStrength * uLightColor;

vec3 reflectDir = reflect(lightDir, vNormal);
float shininess = 100.0;
float specularStrength = 40.0;
float spec = 0.0;
if (diffuseStrength > 0.0) {
spec = pow(max(dot(viewDir, reflectDir), 0.0), shininess);
}
vec3 specular = specularStrength * spec * uLightColor;

vec3 reflectionDir = reflect(viewDir, vNormal);
vec3 reflectionColor = vec3(0.8, 0.9, 1.0);
float reflectionIntensity = pow(max(dot(viewDir, reflectionDir), 0.0), 4.0);
vec3 reflection = reflectionStrength * reflectionIntensity * reflectionColor;

vec3 finalColor = (ambient + diffuse) * uObjectColor + specular * uLightColor + reflection;

gl_FragColor = vec4(finalColor, 1.0);
//gl_FragColor = vec4(vNormal * 0.5 + 0.5, 1.0);
}
</script>

<script id="fragment-texture" type="x-shader/x-fragment">
precision mediump float;

varying vec3 vNormal;
varying vec3 vPosition;
varying vec2 vTexCoord;

uniform vec3 uLightDirection;
uniform vec3 uLightColor;
uniform vec3 uViewPosition;
uniform sampler2D uTexture;
uniform sampler2D uNormalMap;

void main() {
vec3 normalMap = texture2D(uNormalMap, vTexCoord).rgb;
vec3 tangentNormal = normalize(normalMap * 2.0 - 1.0);
vec3 worldNormal = normalize(tangentNormal);
vec3 lightDir = normalize(-uLightDirection);
vec3 viewDir = normalize(uViewPosition - vPosition);

float diffuseStrength = max(dot(worldNormal, lightDir), 0.0);
vec3 diffuse = diffuseStrength * uLightColor;

vec3 reflectDir = reflect(-lightDir, worldNormal);
float shininess = 32.0;
float specularStrength = 0.4;
float spec = pow(max(dot(viewDir, reflectDir), 0.0), shininess);
vec3 specular = specularStrength * spec * uLightColor;
float ambientStrength = 0.1;
vec3 ambient = ambientStrength * uLightColor;
vec4 texColor = texture2D(uTexture, vTexCoord);
vec3 finalColor = texColor.rgb * (ambient + diffuse) + specular;
gl_FragColor = vec4(finalColor, texColor.a);
}

</script>

<!-- JavaScript Modules -->
<script type="module">
document.addEventListener('DOMContentLoaded', function() {
const fovSlider = document.getElementById('fovSlider');
Expand All @@ -68,13 +267,11 @@ <h1>Game Controls</h1>
});
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>

<script type="module" src="mainGL.js"></script>


<script type="text/javascript" src="gl-matrix-min.js"></script>
<script type="module" src="main.js"></script>
<script type="module" src="worldLoader.js"></script>
<script type="module" src="render.js"></script>
<script type="module" src="groundMechanics.js"></script>
<script type="module" src="mechanics.js"></script>
<script type="module" src="utils.js"></script>
</body>
</html>
80 changes: 80 additions & 0 deletions index2D.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="A fun, interactive JavaScript FPS game with customizable mouse sensitivity and intuitive controls.">
<meta charset="utf-8">
<title>Guns N' Poses</title>
<style>
body {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
#canvas {
border: 3px solid #000;
}
.controls {
margin-left: 30px;
margin-top: 30px;
font-size: 18px;
}
.controls h1 {
font-size: 22px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1600" height="900"></canvas>
<div class="controls">
<label for="slider1">Mouse Sensitivity:</label>
<input id="slider1" type="range" min="1" max="10" />

<label for="fovSlider">Field of View:</label>
<input id="fovSlider" type="range" min="55" max="95" step="1" value="65">
<p>FOV: <span id="fovValue">65</span>°</p>

<h1>Game Controls</h1>
<ul>
<li><strong>W</strong>: Walk Forward</li>
<li><strong>S</strong>: Walk Backward</li>
<li><strong>A</strong>: Move Left</li>
<li><strong>D</strong>: Move Right</li>
<li><strong>Shift</strong>: Sprint</li>
<li><strong>C</strong>: Crouch</li>
<li><strong>Space</strong>: Jump</li>
<li><strong>Left Mouse Button (Hold)</strong>: Rifle Shoot</li>
<li><strong>Right Mouse Button (Click)</strong>: Single Heavy Shot</li>
<li><strong>Right Mouse Button (Hold)</strong>: Charged Heavy Shot</li>
<li><strong>V</strong>: Display Platform Path</li>

</ul>
<p><strong>Instructions:</strong> Click on the game to take pointer control. Press <strong>Esc</strong> to exit pointer control.</p>
<p><strong>Note:</strong> Floor/ Ground mechanics are <strong>under active developement</strong> and havent been added. Hit box mechanics will also be added in the future</p>
</div>

<!-- Use type="module" to enable ES6 modules -->
<script type="module">
document.addEventListener('DOMContentLoaded', function() {
const fovSlider = document.getElementById('fovSlider');
const fovValueDisplay = document.getElementById('fovValue');

// Set the initial FOV value
fovValueDisplay.textContent = fovSlider.value;

// Update FOV value when slider is moved
fovSlider.addEventListener('input', function() {
fovValueDisplay.textContent = this.value;
});
});
</script>

<script type="text/javascript" src="gl-matrix-min.js"></script>
<script type="module" src="main.js"></script>
<script type="module" src="worldLoader.js"></script>
<script type="module" src="render.js"></script>
<script type="module" src="groundMechanics.js"></script>
<script type="module" src="mechanics.js"></script>
<script type="module" src="utils.js"></script>
</body>
</html>
Loading

0 comments on commit f002fa7

Please sign in to comment.