Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Tower of Doom
ID	5075622397657088
Created	7 months ago, 1718299997361
Updated	7 months ago, 1718300033860
Code	<!DOCTYPE html> <!-- ***************Controls: How to Play Alrighty, so you see that little green cube? Yep, that's you. Once you click start, then there will be a short countdown and then the race is on! * To control your character, you can use UP/DOWN to move forwards or backwards, LEFT/RIGHT to move side to side, and SPACE to jump. * The goal of the game is to speedrun up the ramp to the finish line in as little time as possible. Make sure not to fall off the edges of the platforms, or to fall through the cracks in the ramp * Make sure to share your best record in the comments below! * Note: Restarting the program doesn't seem to work. I'm not sure if that is a consistent bug for WebGL programs on KA, or if there is a simple fix to that. Regardless, if you need to restart the program for any reason just refresh the page instead. ***************Life Update Hey y'all! It's @IP here! I am currently wrapping up my third year in college towards my Computer Science degree. Boy has it been a journey. My life has been so busy these last few years and I've rarely had time to code on personal projects. However, one of the required classes in my degree program happened to a Computer Graphics course that focused on WebGL... so I decided that I would transfer my final project in the class over here on KA. * Hope you enjoy my basic speedrunner game, the "Tower of Doom"! I learned so much making this project, and it was a ton of fun along the way. I miss spending hours and hours on projects like this. Although I still won't really be active on KA, I'll probably release a few other small WebGL projects for testing purposes, and perhaps I'll make a Tower of Doom 2 if I find time. ***************Cool Computer Graphics Features I used many cool techniques for creating this WebGL app. (1) Lighting: I used a combination of ambient, directional, and point lights. (2) Shading: In addition to my lighting model, I created two types of objects, with one representing textured objects and another one representing objects that used plain colors. (3) Camera: I used a camera that tracks the player during the game, following at a close distance. In order to implement all of the camera functionality, I created a camera class. (4) Transformations: I applied a number of transformations. Besides converting objects from world space to camera space (etc), I also applied a clever transformation to the ramp platform that converted it from a straight platform extending out into Z-space into a circular platform that followed a parametric curve that circles the tower while extending up. ***************Future Developments If I ever get around to working more on this project, then I would want to make the game more interesting by adding other game elements such as coins, hoops to jump through, enemies, etc. ***************Github Repo If you are interested in running this project on your local host, then feel free to clone this Github repo: https://github.com/nacochran/Tower-Of-Doom/tree/main ***************Apology on Code Consistency Due to the limited time I had working on this project, my code's style is not as consistent or well documented with comments as I typically prefer it. Don't worry, any future WebGL projects I make should be more documented and consistent. --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tower of Doom</title> <style> body, #menu { margin: 0px !important; padding: 0px !important; } canvas { margin: 0px; padding: 0px; width: 100%; } #menu { background-color: rgba(107, 107, 107, 0.75); text-align: center; width: 100vw; position: absolute; bottom: 0px; } #menu h2 { font-size: 50px; margin-top: 5px; color: white; } button { font-size: 20px; padding: 10px; color: white; border-color: white; background-color: rgba(0, 0, 0, 0); width: 150px; margin-top: 0px; margin-bottom: 25px; transition: width 0.2s ease-in-out; } button:hover { cursor: hover; width: 200px; transition: width 0.2s ease-in-out; } .end-screen { background-color: rgba(107, 107, 107, 0.75); text-align: center; width: 100vw; position: absolute; bottom: 0px; } .end-screen h1 { font-size: 50px; margin-top: 5px; color: white; } body { margin: 0; } canvas { width: 100vw; height: 100vh; display: block; } .countdown { position: absolute; left: 3vw; width: 97vw; margin: 0px; padding: 0px; top: 250px; } .countdown h1 { text-align: center; color: rgb(116, 0, 0); font-size: 150px; margin: 0px; padding: 0px; text-shadow: 5px 5px 10px rgba(0, 0, 0, 1); } .game-time { font-size: 20px; position: absolute; left: 15px; top: 15px; margin: 0px; padding: 0px; } .game-time h1 { margin: 0px; } </style> </head> <body> <!-- Menu to welcome user --> <div id="menu"> <h2>Tower of Doom</h2> <button class="play" onclick="play()">Play</button> </div> <!-- Canvas to draw on --> <canvas id="canvas"></canvas> <!-- Additional UI for the game --> <div id="game-UI"> <div class="countdown"> <h1 style="display: none">Start!</h1> </div> <div class="game-time"> <h1></h1> </div> <div class="end-screen" style="display: none"> <h1>You scored </h1> <button onclick="play()">Play Again</button> </div> </div> <!-- vertex shader #1 --> <script id="vertex-shader-3d" type="x-shader/x-vertex"> attribute vec4 a_position; attribute vec4 a_color; attribute vec3 a_normal; attribute vec2 a_texcoord; varying vec4 v_color; varying vec3 v_normal; varying vec3 v_surfaceToLight; varying vec2 v_texcoord; // applies transformations to vertices in world coordinates uniform mat4 u_world; // used for normal calculation uniform mat4 u_worldMatrixInverseTranspose; // model view projection (MVP) matrix that we // use to project vertices from world coordinates to camera coordinates uniform mat4 u_viewMatrix; // the position of the light in our world uniform vec3 u_lightWorldPosition; void main() { // Multiply the position by the matrix. gl_Position = u_viewMatrix * u_world * a_position; // Pass the color to the fragment shader. v_color = a_color; // orient the normals and pass to the fragment shader v_normal = mat3(u_worldMatrixInverseTranspose) * a_normal; // compute the world position of the surface vec3 surfaceWorldPosition = (u_world * a_position).xyz; // compute the vector of the surface to the light // and pass it to the fragment shader v_surfaceToLight = u_lightWorldPosition - surfaceWorldPosition; // Pass the texcoord to the fragment shader. v_texcoord = a_texcoord; } </script> <!-- vertex shader #2: for spiral staircase --> <script id="spiral-vertex-shader" type="x-shader/x-vertex"> attribute vec4 a_position; attribute vec4 a_color; attribute vec3 a_normal; attribute vec2 a_texcoord; varying vec4 v_color; varying vec3 v_normal; varying vec3 v_surfaceToLight; varying vec2 v_texcoord; // applies transformations to vertices in world coordinates uniform mat4 u_world; // used for normal calculation uniform mat4 u_worldMatrixInverseTranspose; // model view projection (MVP) matrix that we // use to project vertices from world coordinates to camera coordinates uniform mat4 u_viewMatrix; // the position of the light in our world uniform vec3 u_lightWorldPosition; void main() { // transform object in world space gl_Position = u_world * a_position; // project object onto parametric curve float x = gl_Position.x; float y = gl_Position.y; float z = gl_Position.z; float radius = x; float theta = 3.14159265359 * z / 180.0; float newX = cos(theta) * radius; float newZ = sin(theta) * radius; float newY = y - theta * 100.0; gl_Position = vec4(newX, newY, newZ, 1.0); // convert vertex into camera coordinates gl_Position = u_viewMatrix * gl_Position; // Pass the color to the fragment shader. v_color = a_color; // orient the normals and pass to the fragment shader v_normal = mat3(u_worldMatrixInverseTranspose) * a_normal; // compute the world position of the surface vec3 surfaceWorldPosition = (u_world * a_position).xyz; // compute the vector of the surface to the light // and pass it to the fragment shader v_surfaceToLight = u_lightWorldPosition - surfaceWorldPosition; // Pass the texcoord to the fragment shader. v_texcoord = a_texcoord; } </script> <!-- fragment shader --> <script id="fragment-shader-3d" type="x-shader/x-fragment"> precision mediump float; varying vec4 v_color; varying vec3 v_normal; varying vec3 v_surfaceToLight; varying vec2 v_texcoord; // ambient light // first three arguments is RGB color // last argument is intensity of light uniform vec4 u_ambientLight; // directional light uniform vec3 u_reverseLightDirection; // the texture uniform sampler2D u_texture; uniform bool u_useTexture; void main() { vec4 color; if (u_useTexture) { color = texture2D(u_texture, v_texcoord); } else { color = v_color; } // Normalize the normal vector to make it a unit vector vec3 normal = normalize(v_normal); // Normalize the surface to light direction vector vec3 surfaceToLightDirection = normalize(v_surfaceToLight); // Calculate the diffuse light component float diffuseLight = max(dot(normal, surfaceToLightDirection), 0.0); float directionalLight = dot(normal, u_reverseLightDirection); // Calculate the final color by mixing the diffuse and ambient light components vec3 diffuseColor = color.rgb * diffuseLight; vec3 ambientColor = color.rgb * u_ambientLight.a; // Multiply by intensity // Add the ambient color to the diffuse color vec3 finalColor = diffuseColor * 0.6 + ambientColor + directionalLight * 0.3; // Ensure the final color does not exceed 1.0 in any component finalColor = clamp(finalColor, 0.0, 1.0); // Set the final fragment color gl_FragColor = vec4(finalColor, color.a); } </script> <!-- WebGL Util Functions --> <script> var webglUtils = { resizeCanvasToDisplaySize : function(canvas) { // Lookup the size the browser is displaying the canvas. var displayWidth = canvas.clientWidth; var displayHeight = canvas.clientHeight; // Check if the canvas is not the same size. if (canvas.width != displayWidth \|\| canvas.height != displayHeight) { // Make the canvas the same size canvas.width = displayWidth; canvas.height = displayHeight; } } }; // create a shader and compile it function createShader(gl, type, source) { var shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); if (success) { return shader; } //console.log(gl.getShaderInfoLog(shader)); gl.deleteShader(shader); } // Creates a program given GL context, & two shaders function createProgram(gl, vertexShader, fragmentShader) { var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); var success = gl.getProgramParameter(program, gl.LINK_STATUS); if (success) { return program; } console.log(gl.getProgramInfoLog(program)); gl.deleteProgram(program); } // Uses 'createProgram' to use WebGL program function useWebGLProgram(gl, shaders) { // get text content of our VERTEX SHADER code var vertexShaderSource = document.querySelector("#" + shaders[0]).text; // get text content of our FRAGMENT SHADER code var fragmentShaderSource = document.querySelector("#" + shaders[1]).text; // Create VERTEX SHADER var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); // Create FRAGMENT SHADER var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); return createProgram(gl, vertexShader, fragmentShader); } </script> <!-- libary.js --> <script type> let loop = true; function noLoop() { loop = false; } function radToDeg(r) { return r * 180 / Math.PI; } function degToRad(d) { return d * Math.PI / 180; } function subtractVectors(a, b) { return [a[0] - b[0], a[1] - b[1], a[2] - b[2]]; } function normalize(v) { var length = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]); // make sure we don't divide by 0. if (length > 0.00001) { return [v[0] / length, v[1] / length, v[2] / length]; } else { return [0, 0, 0]; } } function cross(a, b) { return [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]]; } let MatType = Float32Array; var m4 = { lookAt: function(cameraPosition, target, up) { var zAxis = normalize( subtractVectors(cameraPosition, target)); var xAxis = normalize(cross(up, zAxis)); var yAxis = normalize(cross(zAxis, xAxis)); return [ xAxis[0], xAxis[1], xAxis[2], 0, yAxis[0], yAxis[1], yAxis[2], 0, zAxis[0], zAxis[1], zAxis[2], 0, cameraPosition[0], cameraPosition[1], cameraPosition[2], 1, ]; }, perspective: function(fieldOfViewInRadians, aspect, near, far) { var f = Math.tan(Math.PI * 0.5 - 0.5 * fieldOfViewInRadians); var rangeInv = 1.0 / (near - far); return [ f / aspect, 0, 0, 0, 0, f, 0, 0, 0, 0, (near + far) * rangeInv, -1, 0, 0, near * far * rangeInv * 2, 0 ]; }, multiply: function(a, b) { var a00 = a[0 * 4 + 0]; var a01 = a[0 * 4 + 1]; var a02 = a[0 * 4 + 2]; var a03 = a[0 * 4 + 3]; var a10 = a[1 * 4 + 0]; var a11 = a[1 * 4 + 1]; var a12 = a[1 * 4 + 2]; var a13 = a[1 * 4 + 3]; var a20 = a[2 * 4 + 0]; var a21 = a[2 * 4 + 1]; var a22 = a[2 * 4 + 2]; var a23 = a[2 * 4 + 3]; var a30 = a[3 * 4 + 0]; var a31 = a[3 * 4 + 1]; var a32 = a[3 * 4 + 2]; var a33 = a[3 * 4 + 3]; var b00 = b[0 * 4 + 0]; var b01 = b[0 * 4 + 1]; var b02 = b[0 * 4 + 2]; var b03 = b[0 * 4 + 3]; var b10 = b[1 * 4 + 0]; var b11 = b[1 * 4 + 1]; var b12 = b[1 * 4 + 2]; var b13 = b[1 * 4 + 3]; var b20 = b[2 * 4 + 0]; var b21 = b[2 * 4 + 1]; var b22 = b[2 * 4 + 2]; var b23 = b[2 * 4 + 3]; var b30 = b[3 * 4 + 0]; var b31 = b[3 * 4 + 1]; var b32 = b[3 * 4 + 2]; var b33 = b[3 * 4 + 3]; return [ b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30, b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31, b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32, b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33, b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30, b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31, b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32, b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33, b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30, b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31, b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32, b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33, b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30, b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31, b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32, b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33, ]; }, translation: function(tx, ty, tz) { return [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, tx, ty, tz, 1, ]; }, xRotation: function(angleInRadians) { var c = Math.cos(angleInRadians); var s = Math.sin(angleInRadians); return [ 1, 0, 0, 0, 0, c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, ]; }, yRotation: function(angleInRadians) { var c = Math.cos(angleInRadians); var s = Math.sin(angleInRadians); return [ c, 0, -s, 0, 0, 1, 0, 0, s, 0, c, 0, 0, 0, 0, 1, ]; }, zRotation: function(angleInRadians) { var c = Math.cos(angleInRadians); var s = Math.sin(angleInRadians); return [ c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, ]; }, scaling: function(sx, sy, sz) { return [ sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1, ]; }, translate: function(m, tx, ty, tz) { return m4.multiply(m, m4.translation(tx, ty, tz)); }, xRotate: function(m, angleInRadians) { return m4.multiply(m, m4.xRotation(angleInRadians)); }, yRotate: function(m, angleInRadians) { return m4.multiply(m, m4.yRotation(angleInRadians)); }, zRotate: function(m, angleInRadians) { return m4.multiply(m, m4.zRotation(angleInRadians)); }, scale: function(m, sx, sy, sz) { return m4.multiply(m, m4.scaling(sx, sy, sz)); }, inverse: function(m) { var m00 = m[0 * 4 + 0]; var m01 = m[0 * 4 + 1]; var m02 = m[0 * 4 + 2]; var m03 = m[0 * 4 + 3]; var m10 = m[1 * 4 + 0]; var m11 = m[1 * 4 + 1]; var m12 = m[1 * 4 + 2]; var m13 = m[1 * 4 + 3]; var m20 = m[2 * 4 + 0]; var m21 = m[2 * 4 + 1]; var m22 = m[2 * 4 + 2]; var m23 = m[2 * 4 + 3]; var m30 = m[3 * 4 + 0]; var m31 = m[3 * 4 + 1]; var m32 = m[3 * 4 + 2]; var m33 = m[3 * 4 + 3]; var tmp_0 = m22 * m33; var tmp_1 = m32 * m23; var tmp_2 = m12 * m33; var tmp_3 = m32 * m13; var tmp_4 = m12 * m23; var tmp_5 = m22 * m13; var tmp_6 = m02 * m33; var tmp_7 = m32 * m03; var tmp_8 = m02 * m23; var tmp_9 = m22 * m03; var tmp_10 = m02 * m13; var tmp_11 = m12 * m03; var tmp_12 = m20 * m31; var tmp_13 = m30 * m21; var tmp_14 = m10 * m31; var tmp_15 = m30 * m11; var tmp_16 = m10 * m21; var tmp_17 = m20 * m11; var tmp_18 = m00 * m31; var tmp_19 = m30 * m01; var tmp_20 = m00 * m21; var tmp_21 = m20 * m01; var tmp_22 = m00 * m11; var tmp_23 = m10 * m01; var t0 = (tmp_0 * m11 + tmp_3 * m21 + tmp_4 * m31) - (tmp_1 * m11 + tmp_2 * m21 + tmp_5 * m31); var t1 = (tmp_1 * m01 + tmp_6 * m21 + tmp_9 * m31) - (tmp_0 * m01 + tmp_7 * m21 + tmp_8 * m31); var t2 = (tmp_2 * m01 + tmp_7 * m11 + tmp_10 * m31) - (tmp_3 * m01 + tmp_6 * m11 + tmp_11 * m31); var t3 = (tmp_5 * m01 + tmp_8 * m11 + tmp_11 * m21) - (tmp_4 * m01 + tmp_9 * m11 + tmp_10 * m21); var d = 1.0 / (m00 * t0 + m10 * t1 + m20 * t2 + m30 * t3); return [ d * t0, d * t1, d * t2, d * t3, d * ((tmp_1 * m10 + tmp_2 * m20 + tmp_5 * m30) - (tmp_0 * m10 + tmp_3 * m20 + tmp_4 * m30)), d * ((tmp_0 * m00 + tmp_7 * m20 + tmp_8 * m30) - (tmp_1 * m00 + tmp_6 * m20 + tmp_9 * m30)), d * ((tmp_3 * m00 + tmp_6 * m10 + tmp_11 * m30) - (tmp_2 * m00 + tmp_7 * m10 + tmp_10 * m30)), d * ((tmp_4 * m00 + tmp_9 * m10 + tmp_10 * m20) - (tmp_5 * m00 + tmp_8 * m10 + tmp_11 * m20)), d * ((tmp_12 * m13 + tmp_15 * m23 + tmp_16 * m33) - (tmp_13 * m13 + tmp_14 * m23 + tmp_17 * m33)), d * ((tmp_13 * m03 + tmp_18 * m23 + tmp_21 * m33) - (tmp_12 * m03 + tmp_19 * m23 + tmp_20 * m33)), d * ((tmp_14 * m03 + tmp_19 * m13 + tmp_22 * m33) - (tmp_15 * m03 + tmp_18 * m13 + tmp_23 * m33)), d * ((tmp_17 * m03 + tmp_20 * m13 + tmp_23 * m23) - (tmp_16 * m03 + tmp_21 * m13 + tmp_22 * m23)), d * ((tmp_14 * m22 + tmp_17 * m32 + tmp_13 * m12) - (tmp_16 * m32 + tmp_12 * m12 + tmp_15 * m22)), d * ((tmp_20 * m32 + tmp_12 * m02 + tmp_19 * m22) - (tmp_18 * m22 + tmp_21 * m32 + tmp_13 * m02)), d * ((tmp_18 * m12 + tmp_23 * m32 + tmp_15 * m02) - (tmp_22 * m32 + tmp_14 * m02 + tmp_19 * m12)), d * ((tmp_22 * m22 + tmp_16 * m02 + tmp_21 * m12) - (tmp_20 * m12 + tmp_23 * m22 + tmp_17 * m02)) ]; }, vectorMultiply: function(v, m) { var dst = []; for (var i = 0; i < 4; ++i) { dst[i] = 0.0; for (var j = 0; j < 4; ++j) { dst[i] += v[j] * m[j * 4 + i]; } } return dst; }, identity: function(dst) { dst = dst \|\| new MatType(16); dst[ 0] = 1; dst[ 1] = 0; dst[ 2] = 0; dst[ 3] = 0; dst[ 4] = 0; dst[ 5] = 1; dst[ 6] = 0; dst[ 7] = 0; dst[ 8] = 0; dst[ 9] = 0; dst[10] = 1; dst[11] = 0; dst[12] = 0; dst[13] = 0; dst[14] = 0; dst[15] = 1; return dst; }, transpose: function(m) { return [ m[0], m[4], m[8], m[12], m[1], m[5], m[9], m[13], m[2], m[6], m[10], m[14], m[3], m[7], m[11], m[15], ]; }, normalize: function(v, dst) { dst = dst \|\| new MatType(3); var length = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]); // make sure we don't divide by 0. if (length > 0.00001) { dst[0] = v[0] / length; dst[1] = v[1] / length; dst[2] = v[2] / length; } return dst; } }; function multiplyMatrixAndVector(matrix, vector) { var result = [ matrix[0] * vector[0] + matrix[4] * vector[1] + matrix[8] * vector[2] + matrix[12], matrix[1] * vector[0] + matrix[5] * vector[1] + matrix[9] * vector[2] + matrix[13], matrix[2] * vector[0] + matrix[6] * vector[1] + matrix[10] * vector[2] + matrix[14], matrix[3] * vector[0] + matrix[7] * vector[1] + matrix[11] * vector[2] + matrix[15], ]; // Perform perspective division if result[3] is not 1 if (result[3] !== 1 && result[3] !== 0) { result[0] /= result[3]; result[1] /= result[3]; result[2] /= result[3]; } return result.slice(0, 3); // Return the x, y, z components } ///// Vector-Matrix Library ///// var VL = { new: function(x, y, z) { return {x : x, y : y, z : z}; }, new2: function(x, y, z, u, v) { return {x : x, y : y, z : z, u : u, v : v}; }, dot: function(vec1, vec2) { return vec1.x * vec2.x + vec1.y * vec2.y + vec1.z * vec2.z; }, cross: function(vec1, vec2) { return VL.new( vec1.y * vec2.z - vec1.z * vec2.y, vec1.z * vec2.x - vec1.x * vec2.z, vec1.x * vec2.y - vec1.y * vec2.x ); }, add: function(vec1, vec2) { return VL.new(vec1.x + vec2.x, vec1.y + vec2.y, vec1.z + vec2.z); }, sub: function(vec1, vec2) { return VL.new(vec1.x - vec2.x, vec1.y - vec2.y, vec1.z - vec2.z); }, normalize: function(vec) { var m = mag(vec.x, vec.y, vec.z); return VL.new(vec.x / m, vec.y / m, vec.z / m); }, scale: function(vec, scaleX, scaleY, scaleZ) { return VL.new(vec.x * scaleX, vec.y * (scaleY \|\| scaleX), vec.z * (scaleZ \|\| scaleX)); }, rotateX: function(vec, theta) { return VL.new( vec.x, vec.y * cos(theta) - vec.z * sin(theta), vec.y * sin(theta) + vec.z * cos(theta) ); }, rotateY: function(vec, theta) { return VL.new( vec.x * cos(theta) + vec.z * sin(theta), vec.y, vec.x * -sin(theta) + vec.z * cos(theta)); }, rotateZ: function(vec, theta) { return VL.new( vec.x * cos(theta) - vec.y * sin(theta), vec.x * sin(theta) + vec.y * cos(theta), vec.z); }, MatrixMultVector: function(vec, mat, w) { return { x : vec.x * mat[0][0] + vec.y * mat[1][0] + vec.z * mat[2][0] + w * mat[3][0], y : vec.x * mat[0][1] + vec.y * mat[1][1] + vec.z * mat[2][1] + w * mat[3][1], z : vec.x * mat[0][2] + vec.y * mat[1][2] + vec.z * mat[2][2] + w * mat[3][2], w : vec.x * mat[0][3] + vec.y * mat[1][3] + vec.z * mat[2][3] + w * mat[3][3] }; }, quickInverse: function(m) { var matrix = [ [m[0][0], m[1][0], m[2][0], 0.0], [m[0][1], m[1][1], m[2][1], 0.0], [m[0][2], m[1][2], m[2][2], 0.0], [ -(m[3][0] * m[0][0] + m[3][1] * m[0][1] + m[3][2] * m[0][2]), -(m[3][0] * m[1][0] + m[3][1] * m[1][1] + m[3][2] * m[1][2]), -(m[3][0] * m[2][0] + m[3][1] * m[2][1] + m[3][2] * m[2][2]), 1.0 ] ]; return matrix; } }; </script> <!-- geometric_objects.js --> <script type> // objects in this array are rendered without texturing var gl_objects = []; // objects in this array are rendered with texturing var gl_t_objects = []; var usingTexture = false, currentTexture = null; function wipeTextures () { usingTexture = false; currentTexture = null; }; function setTexture (txt) { usingTexture = true; currentTexture = txt; }; function quad(x, y, z, width, height, color, surfaceDirection, targetObject) { // Create a new object to be rendered by WebGL let gl_object = { positions: [], colors: [], normals: [], textures: [], textureMap: null, targetObject: targetObject, primitiveType: 'TRIANGLES', type: (targetObject) ? targetObject.renderType : 'regular' }; var vertices; var normal; var textureArr; switch (surfaceDirection) { case 'front': vertices = [ x, y, z, x + width, y, z, x + width, y + height, z, x, y + height, z, ]; normal = [0, 0, 1]; textureArr = [ 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, ]; break; case 'back': vertices = [ x, y, z, x, y + height, z, x + width, y + height, z, x + width, y, z ]; normal = [0, 0, -1]; textureArr = [ // Back face 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1 ]; break; case 'top': vertices = [ x, y, z, x, y, z + height, x + width, y, z + height, x + width, y, z ]; normal = [0, 1, 0]; // Top face normal textureArr = [ // Top face 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0 ]; break; case 'bottom': vertices = [ // -hs, -hs, -hs, // hs, -hs, -hs, // hs, -hs, hs, // -hs, -hs, hs, x, y, z, x + width, y, z, x + width, y, z + height, x, y, z + height ]; normal = [0, -1, 0]; // Bottom face normal textureArr = [ // Bottom face 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1 ]; break; case 'right': vertices = [ x, y, z, x, y + height, z, x, y + height, z + width, x, y, z + width ]; normal = [1, 0, 0]; // Right face normal textureArr = [ 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1 ]; break; case 'left': vertices = [ x, y, z, x, y, z + width, x, y + height, z + width, x, y + height, z ]; normal = [-1, 0, 0]; // Left face normal textureArr = [ 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0 ]; break; default: console.error('Invalid surface direction for quad.'); return; } var indices = [0, 1, 2, 0, 2, 3]; // Add vertices to positions.triangles array for (var i = 0; i < indices.length; i++) { gl_object.positions.push(vertices[indices[i] * 3], vertices[indices[i] * 3 + 1], vertices[indices[i] * 3 + 2]); } for (var j = 0; j < 6; j++) { gl_object.colors.push(color[0], color[1], color[2]); } for (var j = 0; j < 6; j++) { gl_object.normals.push(normal[0], normal[1], normal[2]); } if (usingTexture) { gl_object.textures = textureArr; gl_object.textureMap = currentTexture; gl_t_objects.push(gl_object); } else { // add new object to render array to be iterated through gl_objects.push(gl_object); } } // function rectangularPrism(x, y, z, width, height, depth, colorsArrayForEachFace, targetObject) { // // create new object to be rendered by WebGL // let gl_object = { // positions: [], // colors: [], // normals: [], // textures: [], // textureMap: null, // targetObject: targetObject, // primitiveType: 'TRIANGLES', // type: (targetObject) ? targetObject.renderType : 'regular' // }; // var halfWidth = width / 2; // var halfHeight = height / 2; // var halfDepth = depth / 2; // var vertices = [ // // Front face // -halfWidth, -halfHeight, halfDepth, // halfWidth, -halfHeight, halfDepth, // halfWidth, halfHeight, halfDepth, // -halfWidth, halfHeight, halfDepth, // // Back face // -halfWidth, -halfHeight, -halfDepth, // -halfWidth, halfHeight, -halfDepth, // halfWidth, halfHeight, -halfDepth, // halfWidth, -halfHeight, -halfDepth, // // Top face // -halfWidth, halfHeight, -halfDepth, // -halfWidth, halfHeight, halfDepth, // halfWidth, halfHeight, halfDepth, // halfWidth, halfHeight, -halfDepth, // // Bottom face // -halfWidth, -halfHeight, -halfDepth, // halfWidth, -halfHeight, -halfDepth, // halfWidth, -halfHeight, halfDepth, // -halfWidth, -halfHeight, halfDepth, // // Right face // halfWidth, -halfHeight, -halfDepth, // halfWidth, halfHeight, -halfDepth, // halfWidth, halfHeight, halfDepth, // halfWidth, -halfHeight, halfDepth, // // Left face // -halfWidth, -halfHeight, -halfDepth, // -halfWidth, -halfHeight, halfDepth, // -halfWidth, halfHeight, halfDepth, // -halfWidth, halfHeight, -halfDepth, // ]; // // Translate vertices to assigned position // for (var i = 0; i < vertices.length; i += 3) { // vertices[i] += x; // vertices[i + 1] += y; // vertices[i + 2] += z; // } // // Indices for drawing the cube with TRIANGLES // var indices = [ // 0, 1, 2, 0, 2, 3, // front // 4, 5, 6, 4, 6, 7, // back // 8, 9, 10, 8, 10, 11, // top // 12, 13, 14, 12, 14, 15, // bottom // 16, 17, 18, 16, 18, 19, // right // 20, 21, 22, 20, 22, 23 // left // ]; // // Add vertices to positions.triangles array // for (var i = 0; i < indices.length; i++) { // gl_object.positions.push(vertices[indices[i] * 3] + halfWidth, vertices[indices[i] * 3 + 1] + halfHeight, vertices[indices[i] * 3 + 2] + halfDepth); // } // // Add colors to colors.triangles array // for (var i = 0; i < 6; i++) { // var color = colorsArrayForEachFace[i]; // for (var j = 0; j < 6; j++) { // 6 vertices per face // gl_object.colors.push(color[0], color[1], color[2]); // } // } // // Add normals to normals.triangles array // var faceNormals = [ // // Front face // [0, 0, 1], // // Back face // [0, 0, -1], // // Top face // [0, 1, 0], // // Bottom face // [0, -1, 0], // // Right face // [1, 0, 0], // // Left face // [-1, 0, 0] // ]; // for (var i = 0; i < 6; i++) { // var normal = faceNormals[i]; // for (var j = 0; j < 6; j++) { // 6 vertices per face // gl_object.normals.push(normal[0], normal[1], normal[2]); // } // } // if (usingTexture) { // let txtAr = new Float32Array([ // // Front face // 0, 1, // 1, 1, // 1, 0, // 0, 1, // 1, 0, // 0, 0, // // Back face // 1, 1, // 1, 0, // 0, 0, // 1, 1, // 0, 0, // 0, 1, // // Top face // 0, 0, // 0, 1, // 1, 1, // 0, 0, // 1, 1, // 1, 0, // // Bottom face // 1, 0, // 0, 0, // 0, 1, // 1, 0, // 0, 1, // 1, 1, // // Right face // 1, 0, // 0, 0, // 0, 1, // 1, 0, // 0, 1, // 1, 1, // // Left face // 0, 0, // 0, 1, // 1, 1, // 0, 0, // 1, 1, // 1, 0, // ]); // gl_object.textures = txtAr; // gl_object.textureMap = currentTexture; // gl_t_objects.push(gl_object); // } else { // // add new object to render array to be iterated through // gl_objects.push(gl_object); // } // } function cube(x, y, z, size, colorsArrayForEachFace, targetObject) { let oTextures = []; oTextures[0] = Array.isArray(currentTexture) ? currentTexture[0] : currentTexture; oTextures[1] = Array.isArray(currentTexture) ? currentTexture[1] : currentTexture; oTextures[2] = Array.isArray(currentTexture) ? currentTexture[2] : currentTexture; oTextures[3] = Array.isArray(currentTexture) ? currentTexture[3] : currentTexture; oTextures[4] = Array.isArray(currentTexture) ? currentTexture[4] : currentTexture; oTextures[5] = Array.isArray(currentTexture) ? currentTexture[5] : currentTexture; // Front face if (oTextures[0] === null) { wipeTextures(); } else { setTexture(oTextures[0]); } quad(x, y, z + size, size, size, colorsArrayForEachFace[0], 'front', targetObject); // Back face if (oTextures[1] === null) { wipeTextures(); } else { setTexture(oTextures[1]); } quad(x, y, z, size, size, colorsArrayForEachFace[1], 'back', targetObject); // Top face if (oTextures[2] === null) { wipeTextures(); } else { setTexture(oTextures[2]); } quad(x, y + size, z, size, size, colorsArrayForEachFace[2], 'top', targetObject); // Bottom face if (oTextures[3] === null) { wipeTextures(); } else { setTexture(oTextures[3]); } quad(x, y, z, size, size, colorsArrayForEachFace[3], 'bottom', targetObject); // Right face if (oTextures[4] === null) { wipeTextures(); } else { setTexture(oTextures[4]); } quad(x + size, y, z, size, size, colorsArrayForEachFace[4], 'right', targetObject); // Left face if (oTextures[5] === null) { wipeTextures(); } else { setTexture(oTextures[5]); } quad(x, y, z, size, size, colorsArrayForEachFace[5], 'left', targetObject); } function rectangularPrism(x, y, z, width, height, depth, colorsArrayForEachFace, targetObject) { let oTextures = []; oTextures[0] = Array.isArray(currentTexture) ? currentTexture[0] : currentTexture; oTextures[1] = Array.isArray(currentTexture) ? currentTexture[1] : currentTexture; oTextures[2] = Array.isArray(currentTexture) ? currentTexture[2] : currentTexture; oTextures[3] = Array.isArray(currentTexture) ? currentTexture[3] : currentTexture; oTextures[4] = Array.isArray(currentTexture) ? currentTexture[4] : currentTexture; oTextures[5] = Array.isArray(currentTexture) ? currentTexture[5] : currentTexture; // Front face if (oTextures[0] === null) { wipeTextures(); } else { setTexture(oTextures[0]); } quad(x, y, z + depth, width, height, colorsArrayForEachFace[0], 'front', targetObject); // // Back face if (oTextures[1] === null) { wipeTextures(); } else { setTexture(oTextures[1]); } quad(x, y, z, width, height, colorsArrayForEachFace[1], 'back', targetObject); // Top face if (oTextures[2] === null) { wipeTextures(); } else { setTexture(oTextures[2]); } quad(x, y + height, z, width, depth, colorsArrayForEachFace[2], 'top', targetObject); // Bottom face if (oTextures[3] === null) { wipeTextures(); } else { setTexture(oTextures[3]); } quad(x, y, z, width, depth, colorsArrayForEachFace[3], 'bottom', targetObject); // Right face if (oTextures[4] === null) { wipeTextures(); } else { setTexture(oTextures[4]); } quad(x + width, y, z, depth, height, colorsArrayForEachFace[4], 'right', targetObject); // // Left face if (oTextures[5] === null) { wipeTextures(); } else { setTexture(oTextures[5]); } quad(x, y, z, depth, height, colorsArrayForEachFace[5], 'left', targetObject); } // circle in xz plane (no texture yet) function xz_circle(x, y, z, radius, normalDirection, color, targetObject, segments) { // create new object to be rendered by WebGL let gl_object = { positions: [], colors: [], normals: [], textures: [], textureMap: null, targetObject: targetObject, primitiveType: 'TRIANGLE_FAN' }; var angleStep = (2 * Math.PI) / segments; // Top circle vertices gl_object.positions.push(x, y, z); for (var i = 0; i <= segments; i++) { var angle = i * angleStep * -normalDirection[1]; var cos = Math.cos(angle); var sin = Math.sin(angle); gl_object.positions.push(x + radius * cos, y, z + radius * sin); } // Add colors for top and bottom for (var i = 0; i <= segments + 1; i++) { gl_object.colors.push(...color); // Top face color } // Normals for (var i = 0; i <= segments + 1; i++) { gl_object.normals.push(...normalDirection); } // add new object to render array to be iterated through gl_objects.push(gl_object); } // cylinder (no texture yet) function cylinder(x, y, z, radius, height, colorsArrayForEachFace, targetObject, segments = 36) { var hs = height / 2; var topColor = colorsArrayForEachFace[0], bodyColor = colorsArrayForEachFace[1], bottomColor = colorsArrayForEachFace[2]; // Draw top circle xz_circle(x, y + hs, z, radius, [0, 1, 0], topColor, targetObject, segments); // Draw bottom circle xz_circle(x, y - hs, z, radius, [0, -1, 0], bottomColor, targetObject, segments); // Draw body let gl_object = { positions: [], colors: [], normals: [], textures: [], textureMap: null, targetObject: targetObject, primitiveType: 'TRIANGLE_STRIP' }; var angleStep = (2 * Math.PI) / segments; // Create vertices for the sides of the cylinder for (var i = 0; i <= segments; i++) { var angle = i * -angleStep; var x1 = x + radius * Math.cos(angle); var z1 = z + radius * Math.sin(angle); var y1 = y + hs; var y2 = y - hs; // Push vertices gl_object.positions.push(x1, y1, z1); gl_object.positions.push(x1, y2, z1); // Push colors gl_object.colors.push(...bodyColor); gl_object.colors.push(...bodyColor); // Calculate normals var normal = [Math.cos(angle), 0, Math.sin(angle)]; // Push normals gl_object.normals.push(...normal); gl_object.normals.push(...normal); } // Add new object to render array to be iterated through gl_objects.push(gl_object); } </script> <!-- scene.js --> <script type> let scene = 'menu'; function play() { let screen = document.querySelectorAll('.end-screen')[0]; screen.style.display = 'none'; scene = 'game'; game = new Game({}); gl_objects = []; gl_t_objects = []; blocks = []; level = 2; levels[level - 1].create(); refillBuffers(gl_t_objects, buffer_texture, true); refillBuffers(gl_objects, buffer_regular); var menu = document.getElementById("menu"); menu.style.display = "none"; } </script> <!-- game.js --> <script type> // simple no-operation function function noop() { console.log('Undefined function.'); } // 3D box collide // can be used to check for collisions between "bounding boxes" // and simple rectangular prisms function boxCollide(b1, b2) { return ( b1.pos.x + b1.size.x > b2.pos.x && b1.pos.x < b2.pos.x + b2.size.x && b1.pos.y + b1.size.y > b2.pos.y && b1.pos.y < b2.pos.y + b2.size.y && b1.pos.z + b1.size.z > b2.pos.z && b1.pos.z < b2.pos.z + b2.size.z ); } /* * Game Class / class Game { constructor (config) { this.levelData = config.levelData \|\| []; this.mapPalette = config.mapPalette \|\| {}; this.level = 1; this.viewCamera = null; this.player1 = null; this.airFriction = 0.1; this.g = 0.2; this.entities = []; // intro variables this.phase = 'intro'; this.iTime = 0; this.s = 0; this.o = 1; this.fSize = 150; // play variables this.gTime = 0; this.score = 0; this.cameraTrackSpeed = 25; this.blockSize = 18; this.startZ = 400; this.numBlocks = 100; this.endZ = 0; this.win = false; } intro() { this.iTime++; var iText = document.querySelectorAll('.countdown h1')[0]; iText.style.transform = `scale(${this.s})`; iText.style.display = 'block'; let speed = 8, interval = 35, delay = 85; if (this.iTime < delay) { this.s = 0; } else if (this.iTime < delay + interval) { iText.textContent = '3'; iText.style.opacity = '1'; this.s += (1 - this.s) / speed; } else if (this.iTime < delay + interval2) { this.s += (0 - this.s) / speed; } else if (this.iTime < delay + interval3) { iText.textContent = '2'; this.s += (1 - this.s) / speed; } else if (this.iTime < delay + interval4) { this.s += (0 - this.s) / speed; } else if (this.iTime < delay + interval5) { iText.textContent = '1'; this.s += (1 - this.s) / speed; } else if (this.iTime < delay + interval6) { this.s += (0 - this.s) / speed; } else if (this.iTime < delay + interval7) { iText.textContent = 'Start!'; this.s += (1 - this.s) / speed; } else if (this.iTime < delay + interval8) { this.o -= 0.05; this.fSize += 2; iText.style.opacity = `${this.o.toString()}`; iText.style.fontSize = `${this.fSize.toString()}px`; } else { this.startTimer(); this.cameraTrackSpeed = 2; this.phase = 'play'; this.iTime = 0; } } startTimer() { var gTimeElement = document.querySelectorAll('.game-time h1')[0]; gTimeElement.textContent = `Time: ${this.score}`; gTimeElement.style.display = 'block'; setInterval(() => { if (this.phase === 'play') { this.gTime += 1; this.score = this.gTime; // Update score with gTime value var gTimeElement = document.querySelectorAll('.game-time h1')[0]; if (gTimeElement) { gTimeElement.textContent = `Time: ${this.score}`; } } }, 1000); // 1000 milliseconds = 1 second } run() { if (this.phase === 'intro') { this.intro(); keys.freeze = true; } else if (this.phase === 'play') { keys.freeze = false; } else if (this.phase === 'win screen') { keys.freeze = true; camera.setPosition(0, 0, 1600, 25); this.iTime++; if (this.iTime > 25) { camera.setTarget(0, 0, 100); } var gTimeElement = document.querySelectorAll('.game-time h1')[0]; gTimeElement.style.display = "none"; let screen = document.querySelectorAll('.end-screen')[0]; screen.style.display = 'block'; var screenText = document.querySelectorAll('.end-screen h1')[0]; screenText.textContent = `You scored ${this.score}!`; } else if (this.phase === 'game over screen') { keys.freeze = true; camera.setPosition(0, 0, 1600, 25); this.iTime++; if (this.iTime > 25) { camera.setTarget(0, 0, 100); } var gTimeElement = document.querySelectorAll('.game-time h1')[0]; gTimeElement.style.display = "none"; let screen = document.querySelectorAll('.end-screen')[0]; screen.style.display = 'block'; var screenText = document.querySelectorAll('.end-screen h1')[0]; screenText.textContent = "You Lost!"; } // update blocks blocks.forEach(block => { block.update(); }); // update player player.update(); // render geometry using WebGL pipeline render(); } } let game = new Game({}); /* * Actor Class / class Actor { constructor(config) { // position and orientation this.pos = VL.new(config.x, config.y, config.z); this.size = VL.new(config.width \|\| config.size, config.height \|\| config.size, config.depth \|\| config.size); this.rot = VL.new(0, 0, 0); // transformation matrix for transforming the vertices of geometry in world space this.tMatrix = config.tMatrix \|\| m4.identity(); // movement this.vel = VL.new(0, 0, 0); this.acc = VL.new(0, 0, 0); this.rotVel = VL.new(0, 0, 0); this.rotAcc = VL.new(0, 0, 0); this.tVel = 8; // terminal (free falling) velocity this.maxSpeedZ = 3; // max speed of the player this.maxSpeedX = 5; // max speed of the player this.dragForce = game.airFriction; // tracking collisions with objects this.onObject = false; this.onTime = 0; } setTransformationMatrix() { // Convert rotation angles from degrees to radians var angleX = degToRad(this.rot.x); var angleY = degToRad(this.rot.y); var angleZ = degToRad(this.rot.z); // Create rotation matrices for each axis var rotationX = m4.xRotation(angleX); var rotationY = m4.yRotation(angleY); var rotationZ = m4.zRotation(angleZ); // Multiply rotation matrices together to get the combined rotation matrix var rotationMatrix = m4.multiply(rotationZ, m4.multiply(rotationY, rotationX)); // Create a translation matrix based on position var translationMatrix = m4.translation(this.pos.x + this.size.x/2, this.pos.y + this.size.y/2, this.pos.z + this.size.z/2); // Multiply rotation matrix by translation matrix to get the final transformation matrix var finalMatrix = m4.multiply(rotationMatrix, translationMatrix); this.tMatrix = finalMatrix; } applyGravity() { this.acc.y = (this.vel.y < this.tVel) ? -game.g : 0; } applyDrag() { this.onObject = (this.onTime++ > 5) ? false : this.onObject; this.dragForce = (this.onObject) ? this.dragForce : game.airFriction; } updateX(activateLeft, activateRight) { if (activateLeft && Math.abs(this.vel.x) < this.maxSpeedX) { this.acc.x = -0.2; this.acc.x -= (this.vel.x > 0) ? this.dragForce/2 : 0; } else if (activateRight && Math.abs(this.vel.x) < this.maxSpeedX) { this.acc.x = 0.2; this.acc.x += (this.vel.x < 0) ? this.dragForce/2 : 0; } else if (Math.abs(this.vel.x) > this.dragForce) { this.acc.x = (this.vel.x < 0) ? this.dragForce : -this.dragForce; } else { this.vel.x = 0; } this.pos.x += this.vel.x; this.vel.x += this.acc.x; } updateY(activateJump) { if (activateJump && Math.abs(this.vel.y) < 0.1 && Math.abs(this.acc.y) < 0.1) { this.vel.y = 5; } this.applyGravity(); this.pos.y += this.vel.y; this.vel.y += this.acc.y; } updateZ(activateUp, activateDown) { if (activateUp && Math.abs(this.vel.z) < this.maxSpeedZ) { this.acc.z = -0.1; this.acc.z -= (this.vel.z > 0) ? this.dragForce/2 : 0; } else if (activateDown && Math.abs(this.vel.z) < this.maxSpeedZ) { this.acc.z = 0.1; this.acc.z += (this.vel.z < 0) ? this.dragForce/2 : 0; } else if (Math.abs(this.vel.z) > this.dragForce) { this.acc.z = (this.vel.z < 0) ? this.dragForce : -this.dragForce; } else { this.vel.z = 0; } this.pos.z += this.vel.z; this.vel.z += this.acc.z; } } / * Player Class / class Player extends Actor { constructor(config) { super(config); this.renderType = config.renderType \|\| 'normal'; } createGeometry() { wipeTextures(); // setTexture(textures["F_texture"]); var colors = [ [55, 207, 25], // Front face color [55, 207, 25], // Back face color [55, 207, 25], // Top face color [55, 207, 25], // Bottom face color [55, 207, 25], // Right face color [55, 207, 25] // Left face color ]; rectangularPrism( -this.size.x/2, -this.size.y/2, -this.size.z/2, this.size.x, this.size.y, this.size.z, colors, this ); } update() { if (game.phase === 'intro' \|\| game.phase === 'play') { // camera target let x1 = this.pos.x, y1 = this.pos.y, z1 = this.pos.z; // camera position let x2 = this.pos.x + 100, y2 = this.pos.y + 100, z2 = this.pos.z + 25; let r1 = x1, r2 = x2; let theta1 = degToRad(z1), theta2 = degToRad(z2); // set camera target let camTX = Math.cos(theta1) r1; let camTZ = Math.sin(theta1) * r1; let camTY = y1 - theta1 * 100.0; camera.setTarget(camTX, camTY, camTZ); // set camera position let camX = Math.cos(theta2) * r2; let camZ = Math.sin(theta2) * r2; let camY = y2 - theta2 * 100.0; camera.setPosition(camX, camY, camZ, game.cameraTrackSpeed); } // move and collide y this.updateY(keys.pressed('space')); blocks.forEach(block => { block.collideY(this); }); // apply drag for x-z movement this.applyDrag(); // move and collide x this.updateX(keys.pressed('left'), keys.pressed('right')); blocks.forEach(block => { block.collideX(this); }); this.pos.x = Math.max(this.pos.x, 425); // move and collide z this.updateZ(keys.pressed('up'), keys.pressed('down')); blocks.forEach(block => { block.collideZ(this); }); if (this.pos.y < -175 && game.phase === 'play') { game.phase = 'game over screen'; } else if (this.pos.z < game.endZ + game.blockSize && game.phase === 'play') { game.phase = 'win screen'; } this.setTransformationMatrix(); } } var player; /* * Block Class / class Block extends Actor { constructor (config) { super(config); this.type = config.type \|\| 'stone'; this.renderType = config.renderType \|\| 'regular'; } createGeometry() { var colors = [ [], [], [], [], [], [] ]; switch (this.type) { case 'stone': wipeTextures(); colors = [ [200, 200, 200], // Front face color [200, 200, 200], // Back face color [200, 200, 200], // Top face color [200, 200, 200], // Bottom face color [200, 200, 200], // Right face color [200, 200, 200] // Left face color ]; break; case 'banner': colors = [ [255, 255, 255], // Front face color [255, 255, 255], // Back face color [255, 255, 255], // Top face color [255, 255, 255], // Bottom face color [255, 255, 255], // Right face color [255, 255, 255], // Left face color ]; setTexture([ null, null, textures["checkboard"], null, null, null ]); } rectangularPrism( -this.size.x/2, -this.size.y/2, -this.size.z/2, this.size.x, this.size.y, this.size.z, colors, this ); } collideX(obj) { if (boxCollide(this, obj)) { if (obj.pos.x > this.pos.x && obj.vel.x < 0) { obj.pos.x = this.pos.x + this.size.x; obj.vel.x = 0; } else if (obj.pos.x < this.pos.x && obj.vel.x > 0) { obj.pos.x = this.pos.x - obj.size.x; obj.vel.x = 0; } } } collideY(obj) { if (boxCollide(this, obj)) { if (obj.pos.y < this.pos.y && obj.vel.y > 0) { obj.pos.y = this.pos.y - this.size.y; obj.vel.y = -1; } else if (obj.pos.y > this.pos.y) { obj.pos.y = this.pos.y + this.size.y; obj.vel.y = 0; obj.acc.y = 0; obj.dragForce = 0.5; obj.onObject = true; obj.onTime = 0; } } } collideZ(obj) { if (boxCollide(this, obj)) { if (obj.pos.z > this.pos.z && obj.vel.z < 0) { obj.pos.z = this.pos.z + this.size.z; obj.vel.z = 0; } else if (obj.pos.z < this.pos.z && obj.vel.z > 0) { obj.pos.z = this.pos.z - obj.size.z; obj.vel.z = 0; } } } update() { this.setTransformationMatrix(); } } let blocks = []; /* * Levels / let levels = []; let level = 1; class Level { constructor (config) { this.design = config.design \|\| noop; this.createGeometry = config.createGeometry \|\| noop; this.name = config.name; } create() { this.design(); this.createGeometry(); } } / * Camera Class / class Camera { constructor(config) { this.position = config.position; this.target = [0, 0, 0]; this.rotation = [0, 0]; this.setTarget(...config.target); // in radians this.fieldOfView = degToRad(60); this.zNear = 1; this.zFar = 2000; } view(gl) { // 1. Model --> View --> Projection // 2. Matrix multiplication goes right from left // gl_Position = projection view * model * aPosition // Define the aspect ratio var aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; // Compute the projection matrix var projectionMatrix = m4.perspective(this.fieldOfView, aspect, this.zNear, this.zFar); // Compute the view matrix var up = [0, 1, 0]; var viewMatrix = m4.inverse(m4.lookAt(this.position, this.target, up)); // Compute the final matrix var viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix); return viewProjectionMatrix; } // updates target based on camera's position & angle updateTarget() { var yaw = Math.PI - this.rotation[0]; var pitch = this.rotation[1]; var direction = [ Math.cos(pitch) * Math.sin(yaw), Math.sin(pitch), Math.cos(pitch) * Math.cos(yaw) ]; // Normalize the direction vector direction = normalize(direction); // Update the target position this.target = [ this.position[0] + direction[0], this.position[1] + direction[1], this.position[2] + direction[2] ]; } // sets target manually setTarget(x, y, z) { this.target = [x, y, z]; // Calculate the direction vector from the position to the target var direction = subtractVectors(this.target, this.position); // Calculate the yaw and pitch angles var yaw = Math.atan2(direction[0], -direction[2]); var pitch = Math.atan2(direction[1], Math.sqrt(direction[0] * direction[0] + direction[2] * direction[2])); // Update the camera rotation this.rotation = [yaw, pitch]; } setPosition(x, y, z, t = 0) { if (t === 0) { this.position[0] = x; this.position[1] = y; this.position[2] = z; } else { this.position[0] += (x - this.position[0]) / t; this.position[1] += (y - this.position[1]) / t; this.position[2] += (z - this.position[2]) / t; } } updatePosition(speed) { // Calculate the direction vector from the position to the target var direction = subtractVectors(this.target, this.position); // Normalize the direction vector direction = normalize(direction); // Update the camera position by moving towards the target this.position[0] += speed * direction[0]; this.position[1] += speed * direction[1]; this.position[2] += speed * direction[2]; // Update the target based on the new position this.updateTarget(); } updateRotation(deltaX, deltaY) { this.rotation[0] += deltaX; this.rotation[1] += deltaY; this.updateTarget(); } } /* * Keymanager Class / class KeyManager { constructor() { this.keys = {}; this.keyCodeMap = {}; this.current = {}; this.recording = false; this.inputData = []; this.records = []; this.freeze = false; // playing back a record this.playRecord = []; this.pressedKeys = []; this.playing = false; this.paused = false; this.time = 0; this.startTime = 0; this.completeRecord = false; } register(key, name, keyCode) { this.keys[key] = { keyCode: keyCode, name: name }; this.keyCodeMap[keyCode] = key; } pressed(selector) { if(typeof selector === 'string') { if (this.keys[selector]) { selector = ( this.keys[selector] && this.keys[selector].keyCode ); } } if (!selector) { return false; } return !this.freeze && this.current[selector]; } keyPressed(keyCode) { if (!this.playing && !this.current[keyCode]) { this.current[keyCode] = true; if (this.recording) { var startTime = Date.now() - this.startTime; this.inputData.push({ keyCode: keyCode, startTime: startTime }); } } } keyReleased(keyCode) { //println('key released: ' + this.keyCodeMap[keyCode] + ", date: " + (Date.now() - this.startTime)); if (!this.playing && this.current[keyCode]) { delete this.current[keyCode]; if (this.recording) { // Iterate over all recorded inputs for (var i = this.inputData.length - 1; i >= 0; i--) { var input = this.inputData[i]; if (input.keyCode === keyCode && !input.endTime) { // Set the end time for the corresponding key press input.endTime = Date.now() - this.startTime; break; // Stop iterating after setting the end time } } } } } } </script> <!-- index.js --> <script type> // global variables var gl; var keys, camera; var render, refillBuffers, buffer_regular, buffer_texture; // lighting var ambientLight = [1.0, 1.0, 1.0, 0.5]; var directionalLight = m4.normalize([0.5, 0.7, 1]); var pointLight = [100, 330, 400]; // Adjust radius, height increment, and number of turns const spiralStaircase = { curvatureConstant: 1 }; function mapVertexToCurve(vertex) { const x = vertex[0]; const y = vertex[1]; const z = vertex[2]; // Calculate the radius const radius = x; // Calculate theta based on z const theta = z spiralStaircase.curvatureConstant; // Calculate the new x and z coordinates const newX = Math.cos(theta) * radius; const newZ = Math.sin(theta) * radius; // Calculate the new y coordinate const newY = y; // You can adjust this based on your requirements return [newX, newY, newZ]; } let textures = {}; function createTextureFromSrc(src) { // Create a texture. let texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); // Fill the texture with a 1x1 blue pixel. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 255, 255])); // Asynchronously load an image var image = new Image(); image.crossOrigin = "anonymous"; // enable CORS image.src = src; image.addEventListener('load', function() { // Now that the image has loaded make copy it to the texture. gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,gl.UNSIGNED_BYTE, image); gl.generateMipmap(gl.TEXTURE_2D); }); return texture; } function createCheckboardTexture(texSize) { // Initialize image1 as a 2D array of Float32Array var image1 = Array.from({ length: texSize }, () => Array.from({ length: texSize }, () => new Float32Array(4)) ); // Populate image1 with checkerboard pattern for (var i = 0; i < texSize; i++) { for (var j = 0; j < texSize; j++) { var c = (((i & 0x8) == 0) ^ ((j & 0x8) == 0)) ? 1 : 0; image1[i][j] = [c, c, c, 1]; } } // Convert floats to unsigned bytes for texture var image2 = new Uint8Array(4 * texSize * texSize); for (var i = 0; i < texSize; i++) { for (var j = 0; j < texSize; j++) { for (var k = 0; k < 4; k++) { image2[4 * texSize * i + 4 * j + k] = Math.floor(255 * image1[i][j][k]); } } } return image2; } function createTextureFromPattern(patternImage, texSize) { // Create a texture. let texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); // Asynchronously load the patternImage to the texture. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, texSize, texSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, patternImage); gl.generateMipmap(gl.TEXTURE_2D); return texture; } function setupTextures() { //textures["F_texture"] = createTextureFromSrc("https://webglfundamentals.org/webgl/resources/f-texture.png"); textures["checkboard"] = createTextureFromPattern(createCheckboardTexture(128), 128); } function setupWebGL() { // Get A WebGL context var canvas = document.querySelector("#canvas"); gl = canvas.getContext("webgl", {preserveDrawingBuffer: true}); if (!gl) { return; } // setup GLSL program var program = useWebGLProgram(gl, ["vertex-shader-3d", "fragment-shader-3d"]); var spiralProgram = useWebGLProgram(gl, ["spiral-vertex-shader", "fragment-shader-3d"]); // Store the shader programs var shaders = { normal: { program: program, attribLocations: { position: gl.getAttribLocation(program, "a_position"), color: gl.getAttribLocation(program, "a_color"), normal: gl.getAttribLocation(program, "a_normal"), texture: gl.getAttribLocation(program, "a_texcoord") }, uniformLocations: { viewMatrix: gl.getUniformLocation(program, "u_viewMatrix"), worldMatrix: gl.getUniformLocation(program, "u_world"), worldMatrixInverseTranspose: gl.getUniformLocation(program, "u_worldMatrixInverseTranspose"), lightWorldPosition: gl.getUniformLocation(program, "u_lightWorldPosition"), ambientLight: gl.getUniformLocation(program, "u_ambientLight"), reverseLightDirection: gl.getUniformLocation(program, "u_reverseLightDirection"), textureMap: gl.getUniformLocation(program, "u_texture"), useTexture: gl.getUniformLocation(program, "u_useTexture") } }, spiral: { program: spiralProgram, attribLocations: { position: gl.getAttribLocation(spiralProgram, "a_position"), color: gl.getAttribLocation(spiralProgram, "a_color"), normal: gl.getAttribLocation(spiralProgram, "a_normal"), texture: gl.getAttribLocation(program, "a_texcoord") }, uniformLocations: { viewMatrix: gl.getUniformLocation(spiralProgram, "u_viewMatrix"), worldMatrix: gl.getUniformLocation(spiralProgram, "u_world"), worldMatrixInverseTranspose: gl.getUniformLocation(spiralProgram, "u_worldMatrixInverseTranspose"), lightWorldPosition: gl.getUniformLocation(spiralProgram, "u_lightWorldPosition"), ambientLight: gl.getUniformLocation(spiralProgram, "u_ambientLight"), reverseLightDirection: gl.getUniformLocation(spiralProgram, "u_reverseLightDirection"), spiralRadius: gl.getUniformLocation(spiralProgram, "u_spiralRadius"), spiralHeight: gl.getUniformLocation(spiralProgram, "u_spiralHeight"), textureMap: gl.getUniformLocation(spiralProgram, "u_texture"), useTexture: gl.getUniformLocation(spiralProgram, "u_useTexture") } } }; // for gl_objects (non-textured) buffer_regular = { "positionBuffer" : gl.createBuffer(), "colorBuffer" : gl.createBuffer(), "normalBuffer" : gl.createBuffer(), "textureBuffer" : gl.createBuffer() }; buffer_texture = { "positionBuffer" : gl.createBuffer(), "colorBuffer" : gl.createBuffer(), "normalBuffer" : gl.createBuffer(), "textureBuffer" : gl.createBuffer() }; refillBuffers = function(arr, b, txt = false) { let combinedPositions = []; let combinedColors = []; let combinedNormals = []; let combinedTextures = []; arr.forEach(obj => { combinedPositions.push(...obj.positions); combinedColors.push(...obj.colors); combinedNormals.push(...obj.normals); combinedTextures.push(...obj.textures); }); // Refill buffers gl.bindBuffer(gl.ARRAY_BUFFER, b.positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(combinedPositions), gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, b.colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(combinedColors), gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, b.normalBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(combinedNormals), gl.STATIC_DRAW); if (txt) { gl.bindBuffer(gl.ARRAY_BUFFER, b.textureBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(combinedTextures), gl.STATIC_DRAW); } }; let renderObjects = function(arr, b, txt = false) { let startIndex = 0; arr.forEach(object => { var shader = (object.type === 'spiral') ? shaders.spiral : shaders.normal; gl.useProgram(shader.program); gl.enableVertexAttribArray(shader.attribLocations.position); gl.bindBuffer(gl.ARRAY_BUFFER, b.positionBuffer); gl.vertexAttribPointer(shader.attribLocations.position, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(shader.attribLocations.color); gl.bindBuffer(gl.ARRAY_BUFFER, b.colorBuffer); gl.vertexAttribPointer(shader.attribLocations.color, 3, gl.UNSIGNED_BYTE, true, 0, 0); gl.enableVertexAttribArray(shader.attribLocations.normal); gl.bindBuffer(gl.ARRAY_BUFFER, b.normalBuffer); gl.vertexAttribPointer(shader.attribLocations.normal, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(shader.attribLocations.texture); gl.bindBuffer(gl.ARRAY_BUFFER, b.textureBuffer); gl.vertexAttribPointer(shader.attribLocations.texture, 2, gl.FLOAT, false, 0, 0); var viewMatrix = camera.view(gl); gl.uniformMatrix4fv(shader.uniformLocations.viewMatrix, false, viewMatrix); gl.uniform4fv(shader.uniformLocations.ambientLight, ambientLight); gl.uniform3fv(shader.uniformLocations.reverseLightDirection, directionalLight); gl.uniform3fv(shader.uniformLocations.lightWorldPosition, pointLight); var worldMatrix = (object.targetObject === undefined) ? (m4.identity()) : (object.targetObject.tMatrix); gl.uniformMatrix4fv(shader.uniformLocations.worldMatrix, false, worldMatrix); var matrixInverse = m4.inverse(worldMatrix); var matrixInverseTranspose = m4.transpose(matrixInverse); gl.uniformMatrix4fv(shader.uniformLocations.worldMatrixInverseTranspose, false, matrixInverseTranspose); if (txt) { // rebind the texture if (Array.isArray(object.texture)) { console.error("Object's texture is an array of textures. Please specify a single texture for each individual object.") } gl.bindTexture(gl.TEXTURE_2D, object.textureMap); gl.uniform1i(shader.uniformLocations.textureMap, 0); gl.uniform1i(shader.uniformLocations.useTexture, true); } else { gl.uniform1i(shader.uniformLocations.useTexture, false); } var primitiveType = gl[object.primitiveType]; var offset = startIndex; var count = object.positions.length / 3; gl.drawArrays(primitiveType, offset, count); startIndex += count; }); } / Create Renderer / render = function() { webglUtils.resizeCanvasToDisplaySize(gl.canvas); gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT); gl.enable(gl.CULL_FACE); gl.enable(gl.DEPTH_TEST); renderObjects(gl_t_objects, buffer_texture, true); renderObjects(gl_objects, buffer_regular); } // initalize empty buffers refillBuffers(gl_t_objects, buffer_texture, true); refillBuffers(gl_objects, buffer_regular); } / Setup Key Manager / function setupKeyManager() { keys = new KeyManager(); keys.register('up', 'Move Forward', 'ArrowUp'); keys.register('down', 'Move Back', 'ArrowDown'); keys.register('right', 'Move right', 'ArrowRight'); keys.register('left', 'Move left', 'ArrowLeft'); keys.register('space', 'Jump', " "); document.addEventListener('keydown', (event) => { keys.keyPressed(event.key); }); document.addEventListener('keyup', (event) => { keys.keyReleased(event.key); }); } / Setup Levels / function setupLevels() { levels.push(new Level({ name: "Menu", design: function() { let blockSize = game.blockSize; let startZ = game.startZ + blockSize; let numBlocks = game.numBlocks; // add camera camera = new Camera({ position: [0, 0, 1600], target: [0, 0, 100] }); // add some blocks let j = 0; let offsetZ = 0; const lowerBound = 20; // set your lower bound here const upperBound = 50; // set your upper bound here // start block (banner) blocks.push(new Block({ x: 500, y: -100, z: startZ + offsetZ, width: 300, height: 25, depth: blockSize, renderType: "spiral", type: "banner" })); // generic platforms while (j < numBlocks - 2) { blocks.push(new Block({ x: 500, y: -100, z: startZ - (j + 1) * blockSize + offsetZ, width: 300, height: 25, depth: blockSize, renderType: "spiral" })); // Every 2 blocks, decide if we want to change offsetZ if ((j + 1) % 4 === 0) { // Random chance to increase offsetZ if (Math.random() < 0.5) { // 50% chance to increase offsetZ // Random amount to increase offsetZ by (adjust the range as needed) const randomIncrease = lowerBound + Math.random() * (upperBound - lowerBound); offsetZ -= randomIncrease; } } j++; } game.endZ = startZ - (numBlocks - 1) * blockSize + offsetZ; // end platform blocks.push(new Block({ x: 500, y: -100, z: game.endZ, width: 300, height: 25, depth: blockSize, renderType: "spiral", type: "banner" })); }, createGeometry: function() { // loop through each block and add its geometry blocks.forEach((b) => { b.createGeometry(); }); // add some extra cool graphics // Define the light brown color var lightBrown = [210, 180, 140]; var colorsArrayForEachFace = [lightBrown, lightBrown, lightBrown]; cylinder(0, -1400, 0, 500, 1000, colorsArrayForEachFace); cylinder(0, -900, 0, 450, 300, colorsArrayForEachFace); cylinder(0, -600, 0, 400, 300, colorsArrayForEachFace); cylinder(0, -300, 0, 350, 300, colorsArrayForEachFace); cylinder(0, 0, 0, 300, 300, colorsArrayForEachFace); cylinder(0, 300, 0, 250, 300, colorsArrayForEachFace); cylinder(0, 600, 0, 200, 300, colorsArrayForEachFace); cylinder(0, 900, 0, 150, 300, colorsArrayForEachFace); } })); levels.push(new Level({ name: "Game", design: function() { let blockSize = game.blockSize; let startZ = game.startZ + blockSize; let numBlocks = game.numBlocks; // add camera camera = new Camera({ position: [0, 0, 1600], target: [0, 0, 100] }); // add the players player = new Player({ x: 625, y: 0, z: startZ + 8, width: 50, height: 50, depth: 5, renderType: "spiral" }); // add some blocks let j = 0; let offsetZ = 0; const lowerBound = 20; // set your lower bound here const upperBound = 50; // set your upper bound here // start block (banner) blocks.push(new Block({ x: 500, y: -100, z: startZ + offsetZ, width: 300, height: 25, depth: blockSize, renderType: "spiral", type: "banner" })); // generic platforms while (j < numBlocks - 2) { blocks.push(new Block({ x: 500, y: -100, z: startZ - (j + 1) * blockSize + offsetZ, width: 300, height: 25, depth: blockSize, renderType: "spiral" })); // Every 2 blocks, decide if we want to change offsetZ if ((j + 1) % 4 === 0) { // Random chance to increase offsetZ if (Math.random() < 0.5) { // 50% chance to increase offsetZ // Random amount to increase offsetZ by (adjust the range as needed) const randomIncrease = lowerBound + Math.random() * (upperBound - lowerBound); offsetZ -= randomIncrease; } } j++; } game.endZ = startZ - (numBlocks - 1) * blockSize + offsetZ; // end platform blocks.push(new Block({ x: 500, y: -100, z: game.endZ, width: 300, height: 25, depth: blockSize, renderType: "spiral", type: "banner" })); }, createGeometry: function() { // loop through each block and add its geometry blocks.forEach((b) => { b.createGeometry(); }); // add the player's geometry player.createGeometry(); // add some extra cool graphics // Define the light brown color var lightBrown = [210, 180, 140]; var colorsArrayForEachFace = [lightBrown, lightBrown, lightBrown]; cylinder(0, -1400, 0, 500, 1000, colorsArrayForEachFace); cylinder(0, -900, 0, 450, 300, colorsArrayForEachFace); cylinder(0, -600, 0, 400, 300, colorsArrayForEachFace); cylinder(0, -300, 0, 350, 300, colorsArrayForEachFace); cylinder(0, 0, 0, 300, 300, colorsArrayForEachFace); cylinder(0, 300, 0, 250, 300, colorsArrayForEachFace); cylinder(0, 600, 0, 200, 300, colorsArrayForEachFace); cylinder(0, 900, 0, 150, 300, colorsArrayForEachFace); } })); } function main() { setupWebGL(); setupTextures(); setupKeyManager(); setupLevels(); levels[0].create(); refillBuffers(gl_t_objects, buffer_texture, true); refillBuffers(gl_objects, buffer_regular); } /** Game */ function runGame() { if (scene === 'menu') { blocks.forEach(block => { block.update(); }); render(); } else if (scene === 'game') { // Move Camera // const moveSpeed = 2; // const rotationSpeed = 0.01; // if (keys.pressed('w')) { // camera.updatePosition(moveSpeed); // } else if (keys.pressed('s')) { // camera.updatePosition(-moveSpeed); // } // if (keys.pressed('a')) { // camera.updateRotation(-rotationSpeed, 0); // } else if (keys.pressed('d')) { // camera.updateRotation(rotationSpeed, 0); // } game.run(); } } // initalize program main(); // animation loop function animate() { if (loop) { runGame(); requestAnimationFrame(animate); } } // Start the animation loop animate(); </script> <!-- Restart Button --> <script type> //add this for the ka restart button <script> </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJvwhoiCCQw
Votes	2
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	Iron Programming
Author Name	ncochran2
Author ID	kaid_1167371439589851086940548
Author Profile Access	COACH

Archive Data

Added	7 months ago, 1718300766252
Updated	7 months ago, 1718300766252
Source Deleted	unknown