Merge remote-tracking branch 'origin/master'

docs/assets/js/constants.js

@@ -12,6 +12,7 @@ var constants = {
                 bg_color: "#242424",
                 text_color: "#ffffff",
                 canvas_border: "rgb(63, 63, 63)",
+                canvas_bg: "darkslategray",
                 loading_animation_color: "#ff4136"
             },
 

docs/assets/js/index.js

@@ -3,7 +3,9 @@ var page_preloader = new Preloader();
 page_preloader.show(true);
 
 images = [
-    ""
+    "assets/images/",
+    "level.png",
+    "level_2.png"
 ];
 
 audio = [
@@ -18,13 +20,14 @@ var globalStates = {
     end: 4,
     building: 5
 };
-var globalState = globalStates.playing;
+var globalState = globalStates.titleScreen;
 
 function update() {
+        
     switch (globalState) {
         // title screen
         case globalStates.titleScreen:
-
+            handleTitleScreen();
             break;
         // level transition
         case globalStates.levelTransition:
@@ -60,7 +63,7 @@ function draw() {
     switch (globalState) {
         // title screen
         case globalStates.titleScreen:
-
+            drawTitleScreen();
             break;
         // level transition
         case globalStates.levelTransition:
@@ -68,8 +71,9 @@ function draw() {
             break;
         // playing
         case globalStates.playing:
-            camera.zoom = 2;
+            camera.zoom = 1;
             drawWorldBlocks();
+            imgIgnoreCutoff(sprites.level_2,0,0,0,4,4);
             player.draw();
             break;
         // paused
@@ -82,6 +86,7 @@ function draw() {
             break;
         //building - to be used only in development
         case globalStates.building:
+            
             buildDraw();
             break;
     }

docs/assets/js/player/lifeFunctions.js

@@ -69,4 +69,7 @@ function heartbeat() {
         pressure = 100;
     }
     heartBeat = true;
+
+    // Play the heartbeat sound
+    soundAssets.heartbeat.play();
 };

docs/assets/js/player/player.js

@@ -37,13 +37,17 @@ Player.prototype.update = function() {
     // select
     if (this.shouldMoveLeg) { 
         this.moveLeg();
-        if(mousePress[0]) {// if (collidingWithWorld({ x: curLeg.x2, y: curLeg.y2, w: 4, h: 4 })) {
+        if(mousePress[0] && collidingWithWorld({x: curLeg.x2, y: curLeg.y2, w:8, h:8})) {
+
             if (this.legSelected === "R") {
                 this.leftLeg.angle += pi;
             } else {
                 this.rightLeg.angle += pi;
             }
             this.shouldMoveLeg = false;
+
+            // Play the footstep sound
+            playRandomFootstep();
         }
     // deselect
     } else {
@@ -92,17 +96,19 @@ Player.prototype.moveLeg = function(){
     // move selected leg towards mouse
 
     // console.log(curLeg.angle.toPrecision(5),pointTo(curLeg,target).toPrecision(5));
-    curLeg.angle = turn(curLeg.angle, pointTo(curLeg, target), constants.player.leg_speed);
+    var angleDif = turn(curLeg.angle, pointTo(curLeg, target), constants.player.leg_speed) - curLeg.angle;
+    curLeg.angle += angleDif;
     // var angle = pointTo(curLeg,target);
     curLeg.x2 = curLeg.x + curLeg.len * Math.cos(curLeg.angle);
     curLeg.y2 = curLeg.y + curLeg.len * Math.sin(curLeg.angle);
 
 
     // Collision
-    if(collidingWithWorld({x:curLeg.x2,y:curLeg.y2,w:4,h:4})){
+    if(collidingWithWorld({x:curLeg.x2,y:curLeg.y2,w:2,h:2})){
         this.collided = true;
         curLeg.x2 = lastX;
         curLeg.y2 = lastY;
+        curLeg.angle -= angleDif;
         return 0;
        
     }
@@ -240,5 +246,5 @@ function distanceToLineSegment(lx1, ly1, lx2, ly2, px, py) {
 
 
 
-var player = new Player(500,100);
+var player = new Player(500,-70);
 

docs/assets/js/sounds/sounds.js

@@ -12,12 +12,41 @@
 // A mapping of asset names to their files
 // This exists to give nicer names to files
 let soundAssetMap = {
-    "debug-ding":"./assets/sounds/debug-ding.mp3"
+    "debug-ding": "./assets/sounds/debug-ding.mp3",
+    "footstep1":"./assets/sounds/footsteps/footstep1.mp3",
+    "footstep2":"./assets/sounds/footsteps/footstep2.mp3",
+    "footstep3":"./assets/sounds/footsteps/footstep3.mp3",
+    "footstep4":"./assets/sounds/footsteps/footstep4.mp3",
+    "footstep5":"./assets/sounds/footsteps/footstep5.mp3",
+    "footstep6":"./assets/sounds/footsteps/footstep6.mp3",
+    "heartbeat":"./assets/sounds/heartbeat.mp3"
 }
 
 // All available sounds
 let soundAssets = {
-    debug_ding: new SoundSnippet("debug-ding", audioAssetType.sfx)
+    debug_ding: new SoundSnippet("debug-ding", audioAssetType.sfx),
+    footstep1: new SoundSnippet("footstep1", audioAssetType.sfx),
+    footstep2: new SoundSnippet("footstep2", audioAssetType.sfx),
+    footstep3: new SoundSnippet("footstep3", audioAssetType.sfx),
+    footstep4: new SoundSnippet("footstep4", audioAssetType.sfx),
+    footstep5: new SoundSnippet("footstep5", audioAssetType.sfx),
+    footstep6: new SoundSnippet("footstep6", audioAssetType.sfx),
+    heartbeat: new SoundSnippet("heartbeat", audioAssetType.sfx)
+}
+
+/**
+ * Play a random footstep sound because ReAlIsM
+ */
+function playRandomFootstep() {
+
+    // Build a list of footsteps
+    let step_sounds = [soundAssets.footstep1, soundAssets.footstep2, soundAssets.footstep3, soundAssets.footstep4, soundAssets.footstep5, soundAssets.footstep6];
+
+    // Choose a random footstep
+    let footstep_id = Math.floor(Math.random() * step_sounds.length);
+
+    // Play the sound
+    step_sounds[footstep_id].play();
 }
 
 /**

docs/assets/js/titleScreen/titleScreen.js

@@ -0,0 +1,81 @@
+var titleScreenState = "main"
+var cursor = mousePos;
+var timer = 0;
+
+function handleTitleScreen(){
+    
+    switch(titleScreenState){
+        
+        case("main"):
+            handleMainScreen();
+            break;
+        case("credits"):
+            handleCredits();
+            break;
+
+
+
+    }
+    
+    
+}
+
+
+function handleMainScreen(){
+    if(timer > 20){
+        if(rectpoint({x:415, y:200, w: 300, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
+            globalState = globalStates.playing;
+            timer = 0;
+        }
+        if(rectpoint({x:415, y:550, w: 300, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
+            titleScreenState = "credits"
+            timer = 0;
+        }
+    }else{
+        timer++;
+    }
+}
+
+
+function handleCredits(){
+
+    if(timer > 20){
+        if(rectpoint({x:395, y:550, w: 140, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
+            titleScreenState = "main";
+            timer = 0;
+        }
+    }else{
+        timer++;
+    }
+    
+
+}
+
+
+
+function drawTitleScreen(){
+    
+    if(titleScreenState === "main"){
+        text("GAME TITLE HERE", 50, 50, "green", 8, 1000);
+        rect(415, 200, 300, 50, "green");
+        text("Play!", 355, 185, "white", 5, 150);
+
+        rect(415, 550, 300, 50, "green");
+        text("Credits", 325, 535, "white", 5, 150);
+    }
+
+    if(titleScreenState === "credits"){
+        text("CREDITS", 250, 50, "green", 8, 300);
+
+
+
+        rect(395, 550, 140, 50, "green");
+        text("Back", 345, 535, "white", 5, 150);
+
+    }
+
+
+
+
+
+}

docs/assets/js/world/level.js

@@ -12,7 +12,7 @@ class block {
 }
 
 // create blocks
-var blockData = [631,407,590,461,316,427,40,420,277,447,40,380,238,466,40,340,199,486,40,300,161,507,40,260,121,527,40,220,82,545,40,180,-407,561,1300,150,-1000,350,120,570,-281,483,120,70,-191,481,35,35,878,145,95,776,734,172,195,76];
+var blockData = [942,-184,94,507,942,191,94,507,372,411,1054,67,-316,369,1214,152,-38,270,86,107,-166,243,125,127,238,320,45,127,273,284,45,127,309,248,45,127,341,215,45,127,377,179,45,127,412,143,45,127,450,107,45,127,603,105,285,196,777,27,285,196,-989,23,175,959,154,-441,2555,51];
 for (let i = 0, l = blockData.length; i < l; i += 4) {
     collisionRects.push(new block(blockData[i], blockData[i + 1], blockData[i + 2], blockData[i + 3]));
 }

docs/index.html

@@ -2,7 +2,7 @@
 <html>
     <head>
         <!-- <link rel="icon" type="image/gif" href="icon.png"/> -->
-        <title>title</title>
+        <title>html.aspx</title>
         <style>
             html {
                 background-color: var(--theme-webpage-bg_color);
@@ -14,6 +14,7 @@
                 margin:auto;
                 border: 5px solid var(--theme-webpage-canvas_border);
                 border-radius: 10px;
+                background-color: var(--theme-webpage-canvas_bg);
             }
         </style>
         <link rel="stylesheet" href="assets/css/main.css">
@@ -36,7 +37,7 @@
         <script src="assets/js/utils.js"></script>
 
         <!-- Everything Else -->
-        <!-- <script src="assets/js/world/build.js"></script> -->
+        <script src="assets/js/world/build.js"></script>
         <script src="assets/js/world/level.js"></script>
 
         <script src="assets/js/player/leg.js"></script>
@@ -45,7 +46,7 @@
 
         <script src="assets/js/playing/playing.js"></script>
 
-        <!-- <script src="assets/js/titleScreen/titleScreen.js"></script> -->
+        <script src="assets/js/titleScreen/titleScreen.js"></script>
         <script src="assets/js/UI/ui.js"></script>
 
         <!-- Webpage -->