diff --git a/example1/example1.html b/example1/example1.html index 7ad5c62e2c2f996677f59451caea62787f98cb90..8f28a4d5bd774504b6c843a34f6799a49fa6576f 100644 --- a/example1/example1.html +++ b/example1/example1.html @@ -1,5 +1,6 @@ <!DOCTYPE html> <html> + <head> <title>Subway Surfer</title> <script src="../common/webgl-utils.js"></script> @@ -17,6 +18,7 @@ } </style> </head> + <body> <canvas id="gl-canvas" width="512" height="512"></canvas> <button id="restart-button" onclick="startGame()">Restart</button> @@ -41,4 +43,5 @@ } </script> </body> + </html> \ No newline at end of file diff --git a/example1/subwaySurfer.js b/example1/subwaySurfer.js index 7be8f8943e9275a2987968c7c45e8967c0335c7d..8fe5ae542252e52f4732e98fa8c1d15ca6ae7831 100644 --- a/example1/subwaySurfer.js +++ b/example1/subwaySurfer.js @@ -26,7 +26,7 @@ var gameOver = false; var score = 0; var torsoId = 0; -var headId = 1; +var headId = 1; var head1Id = 1; var head2Id = 10; var leftUpperArmId = 2; @@ -38,18 +38,18 @@ var leftLowerLegId = 7; var rightUpperLegId = 8; var rightLowerLegId = 9; -var scaleFactor = 0.5; // ��ü ũ�⸦ ���̱� ���� ������ ���� +var scaleFactor = 0.5; // ��ü ũ�⸦ ���̱� ���� ������ ���� -var torsoHeight = 2.0 * scaleFactor; -var torsoWidth = 1.5 * scaleFactor; -var upperArmHeight = 1.0 * scaleFactor; -var lowerArmHeight = 1.0 * scaleFactor; -var upperArmWidth = 0.5 * scaleFactor; -var lowerArmWidth = 0.5 * scaleFactor; -var upperLegWidth = 0.5 * scaleFactor; -var lowerLegWidth = 0.5 * scaleFactor; +var torsoHeight = 1.4 * scaleFactor; +var torsoWidth = 1.2 * scaleFactor; +var upperArmHeight = 0.8 * scaleFactor; +var lowerArmHeight = 0.7 * scaleFactor; +var upperArmWidth = 0.5 * scaleFactor; +var lowerArmWidth = 0.4 * scaleFactor; +var upperLegWidth = 0.5 * scaleFactor; +var lowerLegWidth = 0.4 * scaleFactor; var lowerLegHeight = 1.0 * scaleFactor; -var upperLegHeight = 1.0 * scaleFactor; +var upperLegHeight = 0.8 * scaleFactor; var headHeight = 0.75 * scaleFactor; var headWidth = 0.75 * scaleFactor; @@ -59,12 +59,13 @@ var numNodes = 10; var numAngles = 11; var angle = 0; -var theta = [0, 0, 0, 0, 0, 0, 180, 0, 180, 0, 0]; +var theta = [0, 0, 180, 110, 180, 110, 180, 0, 180, 0, 0]; +var moveTorso = [0, 0, 0]; var stack = []; var figure = []; -for( var i=0; i<numNodes; i++) figure[i] = createNode(null, null, null, null); +for (var i = 0; i < numNodes; i++) figure[i] = createNode(null, null, null, null); var instanceMatrix; var playerBuffer; @@ -113,7 +114,7 @@ var hurdleVertices = [ var playerPointsArray = []; var hurdlePointsArray = []; -function createNode(transform, render, sibling, child){ +function createNode(transform, render, sibling, child) { var node = { transform: transform, render: render, @@ -132,154 +133,155 @@ function scale4(a, b, c) { } function initNodes(Id) { - var m = mat4(); - - switch(Id) { - case torsoId: - m = translate(0.0, 0.5 * torsoHeight, 0.0); - m = mult(m, rotate(theta[torsoId], 0, 1, 0 )); - figure[torsoId] = createNode( m, torso, null, headId ); - break; - - case headId: - case head1Id: - case head2Id: - m = translate(0.0, torsoHeight + 0.5 * headHeight, 0.0); - m = mult(m, rotate(theta[head1Id], 1, 0, 0)); - m = mult(m, rotate(theta[head2Id], 0, 1, 0)); - figure[headId] = createNode( m, head, leftUpperArmId, null); - break; - - case leftUpperArmId: - m = translate(-0.5 * (torsoWidth + upperArmWidth), 0.9 * torsoHeight, 0.0); // ���� ���뿡 �� ������ ���� - m = mult(m, rotate(theta[leftUpperArmId], 1, 0, 0)); - figure[leftUpperArmId] = createNode( m, leftUpperArm, rightUpperArmId, leftLowerArmId ); - break; - - case rightUpperArmId: - m = translate(0.5 * (torsoWidth + upperArmWidth), 0.9 * torsoHeight, 0.0); // ���� ���뿡 �� ������ ���� - m = mult(m, rotate(theta[rightUpperArmId], 1, 0, 0)); - figure[rightUpperArmId] = createNode( m, rightUpperArm, leftUpperLegId, rightLowerArmId ); - break; - - case leftUpperLegId: - m = translate(-0.5 * upperLegWidth, 0.1 * upperLegHeight, 0.0); - m = mult(m , rotate(theta[leftUpperLegId], 1, 0, 0)); - figure[leftUpperLegId] = createNode( m, leftUpperLeg, rightUpperLegId, leftLowerLegId ); - break; - - case rightUpperLegId: - m = translate(0.5 * upperLegWidth, 0.1 * upperLegHeight, 0.0); - m = mult(m, rotate(theta[rightUpperLegId], 1, 0, 0)); - figure[rightUpperLegId] = createNode( m, rightUpperLeg, null, rightLowerLegId ); - break; - - case leftLowerArmId: - m = translate(0.0, upperArmHeight, 0.0); - m = mult(m, rotate(theta[leftLowerArmId], 1, 0, 0)); - figure[leftLowerArmId] = createNode( m, leftLowerArm, null, null ); - break; - - case rightLowerArmId: - m = translate(0.0, upperArmHeight, 0.0); - m = mult(m, rotate(theta[rightLowerArmId], 1, 0, 0)); - figure[rightLowerArmId] = createNode( m, rightLowerArm, null, null ); - break; - - case leftLowerLegId: - m = translate(0.0, upperLegHeight, 0.0); - m = mult(m, rotate(theta[leftLowerLegId], 1, 0, 0)); - figure[leftLowerLegId] = createNode( m, leftLowerLeg, null, null ); - break; - - case rightLowerLegId: - m = translate(0.0, upperLegHeight, 0.0); - m = mult(m, rotate(theta[rightLowerLegId], 1, 0, 0)); - figure[rightLowerLegId] = createNode( m, rightLowerLeg, null, null ); - break; - } + var m = mat4(); + + switch (Id) { + case torsoId: + m = translate(0.0, 0.5 * torsoHeight, 0.0); + m = mult(m, rotate(theta[torsoId], 0, 1, 0)); + m = mult(m, translate(moveTorso[0], moveTorso[1], moveTorso[2])); + figure[torsoId] = createNode(m, torso, null, headId); + break; + + case headId: + case head1Id: + case head2Id: + m = translate(0.0, torsoHeight + 0.36 * headHeight, 0.0); + m = mult(m, rotate(theta[head1Id], 1, 0, 0)); + m = mult(m, rotate(theta[head2Id], 0, 1, 0)); + figure[headId] = createNode(m, head, leftUpperArmId, null); + break; + + case leftUpperArmId: + m = translate(-0.5 * (torsoWidth + upperArmWidth), 1.03 * torsoHeight, 0.0); // ���� ���뿡 �� ������ ���� + m = mult(m, rotate(theta[leftUpperArmId], 1, 0, 0)); + figure[leftUpperArmId] = createNode(m, leftUpperArm, rightUpperArmId, leftLowerArmId); + break; + + case rightUpperArmId: + m = translate(0.5 * (torsoWidth + upperArmWidth), 1.03 * torsoHeight, 0.0); // ���� ���뿡 �� ������ ���� + m = mult(m, rotate(theta[rightUpperArmId], 1, 0, 0)); + figure[rightUpperArmId] = createNode(m, rightUpperArm, leftUpperLegId, rightLowerArmId); + break; + + case leftUpperLegId: + m = translate(-0.5 * upperLegWidth, 0.1 * upperLegHeight, 0.0); + m = mult(m, rotate(theta[leftUpperLegId], 1, 0, 0)); + figure[leftUpperLegId] = createNode(m, leftUpperLeg, rightUpperLegId, leftLowerLegId); + break; + + case rightUpperLegId: + m = translate(0.5 * upperLegWidth, 0.1 * upperLegHeight, 0.0); + m = mult(m, rotate(theta[rightUpperLegId], 1, 0, 0)); + figure[rightUpperLegId] = createNode(m, rightUpperLeg, null, rightLowerLegId); + break; + + case leftLowerArmId: + m = translate(0.0, upperArmHeight, 0.0); + m = mult(m, rotate(theta[leftLowerArmId], 1, 0, 0)); + figure[leftLowerArmId] = createNode(m, leftLowerArm, null, null); + break; + + case rightLowerArmId: + m = translate(0.0, upperArmHeight, 0.0); + m = mult(m, rotate(theta[rightLowerArmId], 1, 0, 0)); + figure[rightLowerArmId] = createNode(m, rightLowerArm, null, null); + break; + + case leftLowerLegId: + m = translate(0.0, upperLegHeight, 0.0); + m = mult(m, rotate(theta[leftLowerLegId], 1, 0, 0)); + figure[leftLowerLegId] = createNode(m, leftLowerLeg, null, null); + break; + + case rightLowerLegId: + m = translate(0.0, upperLegHeight, 0.0); + m = mult(m, rotate(theta[rightLowerLegId], 1, 0, 0)); + figure[rightLowerLegId] = createNode(m, rightLowerLeg, null, null); + break; + } } function traverse(Id) { - if(Id == null) return; + if (Id == null) return; stack.push(modelViewMatrix); modelViewMatrix = mult(modelViewMatrix, figure[Id].transform); figure[Id].render(); - if(figure[Id].child != null) traverse(figure[Id].child); + if (figure[Id].child != null) traverse(figure[Id].child); modelViewMatrix = stack.pop(); - if(figure[Id].sibling != null) traverse(figure[Id].sibling); + if (figure[Id].sibling != null) traverse(figure[Id].sibling); } function torso() { - instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * torsoHeight, 0.0) ); - instanceMatrix = mult(instanceMatrix, scale4(torsoWidth, torsoHeight, torsoWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); - drawCube(); + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * torsoHeight, 0.0)); + instanceMatrix = mult(instanceMatrix, scale4(torsoWidth, torsoHeight, torsoWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); } function head() { - instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * headHeight, 0.0 )); - instanceMatrix = mult(instanceMatrix, scale4(headWidth, headHeight, headWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); - drawCube(); + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * headHeight, 0.0)); + instanceMatrix = mult(instanceMatrix, scale4(headWidth, headHeight, headWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); } function leftUpperArm() { - instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperArmHeight, 0.0) ); - instanceMatrix = mult(instanceMatrix, scale4(upperArmWidth, upperArmHeight, upperArmWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); - drawCube(); + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperArmHeight, 0.0)); + instanceMatrix = mult(instanceMatrix, scale4(upperArmWidth, upperArmHeight, upperArmWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); } function leftLowerArm() { - instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerArmHeight, 0.0) ); - instanceMatrix = mult(instanceMatrix, scale4(lowerArmWidth, lowerArmHeight, lowerArmWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); - drawCube(); + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerArmHeight, 0.0)); + instanceMatrix = mult(instanceMatrix, scale4(lowerArmWidth, lowerArmHeight, lowerArmWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); } function rightUpperArm() { - instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperArmHeight, 0.0) ); - instanceMatrix = mult(instanceMatrix, scale4(upperArmWidth, upperArmHeight, upperArmWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); - drawCube(); + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperArmHeight, 0.0)); + instanceMatrix = mult(instanceMatrix, scale4(upperArmWidth, upperArmHeight, upperArmWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); } function rightLowerArm() { - instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerArmHeight, 0.0) ); - instanceMatrix = mult(instanceMatrix, scale4(lowerArmWidth, lowerArmHeight, lowerArmWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); - drawCube(); + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerArmHeight, 0.0)); + instanceMatrix = mult(instanceMatrix, scale4(lowerArmWidth, lowerArmHeight, lowerArmWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); } function leftUpperLeg() { - instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperLegHeight, 0.0) ); - instanceMatrix = mult(instanceMatrix, scale4(upperLegWidth, upperLegHeight, upperLegWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); - drawCube(); + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperLegHeight, 0.0)); + instanceMatrix = mult(instanceMatrix, scale4(upperLegWidth, upperLegHeight, upperLegWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); } function leftLowerLeg() { - instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerLegHeight, 0.0) ); - instanceMatrix = mult(instanceMatrix, scale4(lowerLegWidth, lowerLegHeight, lowerLegWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); - drawCube(); + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerLegHeight, 0.0)); + instanceMatrix = mult(instanceMatrix, scale4(lowerLegWidth, lowerLegHeight, lowerLegWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); } function rightUpperLeg() { - instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperLegHeight, 0.0) ); - instanceMatrix = mult(instanceMatrix, scale4(upperLegWidth, upperLegHeight, upperLegWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); - drawCube(); + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperLegHeight, 0.0)); + instanceMatrix = mult(instanceMatrix, scale4(upperLegWidth, upperLegHeight, upperLegWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); } function rightLowerLeg() { - instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerLegHeight, 0.0) ); - instanceMatrix = mult(instanceMatrix, scale4(lowerLegWidth, lowerLegHeight, lowerLegWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); - drawCube(); + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerLegHeight, 0.0)); + instanceMatrix = mult(instanceMatrix, scale4(lowerLegWidth, lowerLegHeight, lowerLegWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); } @@ -306,7 +308,7 @@ function hurdle() { quad(2, 3, 7, 6, hurdlePointsArray, hurdleVertices); quad(0, 3, 7, 4, hurdlePointsArray, hurdleVertices); quad(1, 2, 6, 5, hurdlePointsArray, hurdleVertices); - + quad(8, 9, 10, 11, hurdlePointsArray, hurdleVertices); quad(12, 13, 14, 15, hurdlePointsArray, hurdleVertices); quad(8, 9, 13, 12, hurdlePointsArray, hurdleVertices); @@ -341,7 +343,7 @@ window.onload = function init() { projectionMatrixLoc = gl.getUniformLocation(program, "projectionMatrix"); gl.uniformMatrix4fv(projectionMatrixLoc, false, flatten(projectionMatrix)); - viewMatrix = lookAt(vec3(0, 2, 6), vec3(0, 0, -30), vec3(0, 1, 0)); // Adjusted for better perspective + viewMatrix = lookAt(vec3(0, 2, 6), vec3(0, 0, -30), vec3(0, 1, 0)); // Adjusted for better perspective // origin:0,2,6 viewMatrixLoc = gl.getUniformLocation(program, "viewMatrix"); gl.uniformMatrix4fv(viewMatrixLoc, false, flatten(viewMatrix)); @@ -378,7 +380,7 @@ function startGame() { score = 0; obstacles = []; currentLane = 1; - player.position = vec3(lanes[currentLane], 0, 0); + player.position = vec3(moveTorso[0], moveTorso[1], moveTorso[2]); document.getElementById("restart-button").style.display = "none"; render(); @@ -393,12 +395,13 @@ function handleKeyDown(event) { if (currentLane < 2) currentLane++; break; } - player.position[0] = lanes[currentLane]; + moveTorso[0] = lanes[currentLane]; + player.position[0] = moveTorso[0]; } function createPlayer() { return { - position: vec3(lanes[currentLane], 0, 0), // Y-coordinate fixed at 0 + position: vec3(moveTorso[0], moveTorso[1], moveTorso[2]) // Y-coordinate fixed at 0 }; }