Merge branch 'tutorial'

docs/assets/js/UI/ui.js

@@ -3,16 +3,22 @@ function drawTitleScreenUI() {
 }
 
 
+var playingUIOffsets = {
+    heart: 100,
+    breath: 100,
+    blink: 100
+};
+
 // UI for playing
 function drawPlayingUI() {
 
     // cartesianRect(0,ch/3*2, cw, ch/3, "#333333")
 
     //Heart Rate Monitor
-    heartBeatUI(cw/4*3-8,ch/8*7-8,cw/4,ch/8);
+    heartBeatUI(cw / 4 * 3 - 8, ch / 8 * 7 - 8 + playingUIOffsets.heart, cw / 4, ch / 8);
 
     //Respiration Monitor
-    respiratoryUI(cw/8*5,ch/8*7-8, cw/16, ch/8);
+    respiratoryUI(cw / 8 * 5, ch / 8 * 7 - 8 + playingUIOffsets.breath, cw / 16, ch / 8);
 
     //Blink eye and overlay
     blinkUI();
@@ -33,9 +39,9 @@ function drawEndUI() {
  *
  */
 
-function respiratoryUI(x, y, width, height){
-    cartesianRect(x,y,width,height, "rgb("+noBreathTimer/180*255+","+0+","+0+")");
-    cartesianRect(x,y+(height-breath/constants.lifeFuncs.breath.fullBreath*height), width, breath/constants.lifeFuncs.breath.fullBreath*height, "rgb("+255+","+(255-fullBreathTimer/180*255)+","+(255-fullBreathTimer/180*255)+")");
+function respiratoryUI(x, y, width, height) {
+    cartesianRect(x, y, width, height, "rgb(" + noBreathTimer / 180 * 255 + "," + 0 + "," + 0 + ")");
+    cartesianRect(x, y + (height - breath / constants.lifeFuncs.breath.fullBreath * height), width, breath / constants.lifeFuncs.breath.fullBreath * height, "rgb(" + 255 + "," + (255 - fullBreathTimer / 180 * 255) + "," + (255 - fullBreathTimer / 180 * 255) + ")");
 }
 
 /***
@@ -46,8 +52,8 @@ function respiratoryUI(x, y, width, height){
 
 //Heart rate monitor history 
 let heartBeatHistory = [];
-    heartBeatHistory.length = constants.ui.heartRate.history_length;
-    heartBeatHistory.fill(0);
+heartBeatHistory.length = constants.ui.heartRate.history_length;
+heartBeatHistory.fill(0);
 
 //Shift accumulation
 let shiftAccum = 0;
@@ -56,12 +62,12 @@ let shiftAccum = 0;
 let beatTimeElapsed = Infinity;
 
 // Draw heartbeat UI
-function heartBeatUI(x, y, width, height){
+function heartBeatUI(x, y, width, height) {
 
     //Shift monitor over once a full scrolling unit is accumulated
     shiftAccum += constants.ui.heartRate.scroll_speed;
-    if(shiftAccum>=1){
-        shiftAccum%=1;
+    if (shiftAccum >= 1) {
+        shiftAccum %= 1;
         beatTimeElapsed += 0.04;
 
         //Remove oldest value
@@ -72,70 +78,70 @@ function heartBeatUI(x, y, width, height){
     }
 
     //If heart is beaten, reset beat timer.
-    if(heartBeat){
+    if (heartBeat) {
         beatTimeElapsed = 0;
         heartBeat = false;
     }
 
     //Backdrop
     var BackdropColor;
-    if(pressure > 42 && pressure < 60) {
+    if (pressure > 42 && pressure < 60) {
         BackdropColor = "#0c2605";
-    } else if(pressure > 28 && pressure < 75) {
+    } else if (pressure > 28 && pressure < 75) {
         BackdropColor = "#2b2b06";
     } else {
         BackdropColor = "#260505";
     }
-    rect(x+width/2,y+height/2,width,height,BackdropColor);
-    img(sprites.heartBack,cw-107,ch-46);
+    rect(x + width / 2, y + height / 2, width, height, BackdropColor);
+    img(sprites.heartBack, cw - 107, ch - 46 + playingUIOffsets.heart);
 
     //Pressure Meter
-    rect(x+width-8,y+height/2,16,height,"red");
-    rect(x+width-8,y+height/2,16,height/2,"yellow");
-    rect(x+width-8,y+height/2,16,height/6,"green");
-    let pressureHeight = Math.max(Math.min(y+height-(pressure/constants.lifeFuncs.cardio.optimalPressure*height/2),y+height),y);
-    line(x+width-16, pressureHeight,x+width,pressureHeight, 2,"black")
+    rect(x + width - 8, y + height / 2, 16, height, "red");
+    rect(x + width - 8, y + height / 2, 16, height / 2, "yellow");
+    rect(x + width - 8, y + height / 2, 16, height / 6, "green");
+    let pressureHeight = Math.max(Math.min(y + height - (pressure / constants.lifeFuncs.cardio.optimalPressure * height / 2), y + height), y);
+    line(x + width - 16, pressureHeight, x + width, pressureHeight, 2, "black")
 
     //Graph
     for (let index = 0; index < heartBeatHistory.length; index++) {
         const qrsValueAtPosition = heartBeatHistory[index];
-        const qrsValueAtNextPosition = heartBeatHistory[index+1];
-        line(x+(index*(width-16)/heartBeatHistory.length), y+(2*height/3)+(qrsValueAtPosition*(width-16)/heartBeatHistory.length), x+((index+1)*(width-16)/heartBeatHistory.length), y+(2*height/3)+(qrsValueAtNextPosition*(width-16)/heartBeatHistory.length),Math.min(3,Math.max(3/beatTimeElapsed,1)), "red");
+        const qrsValueAtNextPosition = heartBeatHistory[index + 1];
+        line(x + (index * (width - 16) / heartBeatHistory.length), y + (2 * height / 3) + (qrsValueAtPosition * (width - 16) / heartBeatHistory.length), x + ((index + 1) * (width - 16) / heartBeatHistory.length), y + (2 * height / 3) + (qrsValueAtNextPosition * (width - 16) / heartBeatHistory.length), Math.min(3, Math.max(3 / beatTimeElapsed, 1)), "red");
     }
 
     // cover
-    img(sprites.heartCover,cw-107,ch-46);
+    img(sprites.heartCover, cw - 107, ch - 46 + playingUIOffsets.heart);
 }
 
 //Determine next value to be added to the graph
-function pushNextBeatValue(){
+function pushNextBeatValue() {
     let nextBeatValue = 0;
 
     //Timespan of one "square" on the EKG
     const squareSize = constants.ui.heartRate.square_size;
     //Length of full complex
-    const complexTime = constants.ui.heartRate.complex_width*squareSize;
+    const complexTime = constants.ui.heartRate.complex_width * squareSize;
     //Length of PR segment of complex
-    const prTime = constants.ui.heartRate.pr_width*squareSize;
+    const prTime = constants.ui.heartRate.pr_width * squareSize;
     //Length of QRS component of complex
-    const qrsTime = constants.ui.heartRate.qrs_width*squareSize;
+    const qrsTime = constants.ui.heartRate.qrs_width * squareSize;
     //Length of QT component of complex
-    const qtTime = constants.ui.heartRate.qt_width*squareSize;
+    const qtTime = constants.ui.heartRate.qt_width * squareSize;
 
-    if(beatTimeElapsed<=complexTime) {
+    if (beatTimeElapsed <= complexTime) {
         //PR Segment
         if (beatTimeElapsed <= prTime) {
-            nextBeatValue = 0.5*(Math.pow((beatTimeElapsed/squareSize - (prTime/2/squareSize)), 2)) - 2;
+            nextBeatValue = 0.5 * (Math.pow((beatTimeElapsed / squareSize - (prTime / 2 / squareSize)), 2)) - 2;
         } else if (beatTimeElapsed > prTime + squareSize && beatTimeElapsed <= prTime + squareSize + (qrsTime / 4)) { //QRS Segment pt. 1
-            nextBeatValue = -4 + beatTimeElapsed/squareSize;
+            nextBeatValue = -4 + beatTimeElapsed / squareSize;
         } else if (beatTimeElapsed > prTime + squareSize + qrsTime / 4 && beatTimeElapsed <= prTime + squareSize + qrsTime / 2) { //QRS Segment pt. 2
-            nextBeatValue = -14 * (beatTimeElapsed/squareSize - 4.5) - 0.5;
-        } else if (beatTimeElapsed > prTime + squareSize + qrsTime / 2 && beatTimeElapsed <= prTime + squareSize + (3*qrsTime / 4)) { //QRS Segment pt. 3
-            nextBeatValue = 7 * (beatTimeElapsed/squareSize - 5) - 6.5;
-        } else if (beatTimeElapsed > prTime + squareSize + (3*qrsTime / 4) && beatTimeElapsed <= prTime + squareSize + qrsTime) { //QRS Segment pt. 4
-            nextBeatValue = 2 * (beatTimeElapsed/squareSize - 6);
-        } else if (beatTimeElapsed > prTime + squareSize*2 + qrsTime && beatTimeElapsed <= prTime + squareSize*2 + qrsTime + qtTime) { //PT Segment
-            nextBeatValue = 0.5 * Math.pow((beatTimeElapsed/squareSize - (prTime + squareSize*2 + qrsTime + qtTime/2)/squareSize),2) - 3;
+            nextBeatValue = -14 * (beatTimeElapsed / squareSize - 4.5) - 0.5;
+        } else if (beatTimeElapsed > prTime + squareSize + qrsTime / 2 && beatTimeElapsed <= prTime + squareSize + (3 * qrsTime / 4)) { //QRS Segment pt. 3
+            nextBeatValue = 7 * (beatTimeElapsed / squareSize - 5) - 6.5;
+        } else if (beatTimeElapsed > prTime + squareSize + (3 * qrsTime / 4) && beatTimeElapsed <= prTime + squareSize + qrsTime) { //QRS Segment pt. 4
+            nextBeatValue = 2 * (beatTimeElapsed / squareSize - 6);
+        } else if (beatTimeElapsed > prTime + squareSize * 2 + qrsTime && beatTimeElapsed <= prTime + squareSize * 2 + qrsTime + qtTime) { //PT Segment
+            nextBeatValue = 0.5 * Math.pow((beatTimeElapsed / squareSize - (prTime + squareSize * 2 + qrsTime + qtTime / 2) / squareSize), 2) - 3;
         }
     }
 
@@ -145,16 +151,16 @@ function pushNextBeatValue(){
 
 function blinkUI() {
     // eye
-    img(sprites.eye,cw-350,ch-40,0,2,2);
-    var alpha = clamp(eyeDryness / constants.lifeFuncs.blink.dryTime,0,1);
+    img(sprites.eye, cw - 350, ch - 40 + playingUIOffsets.blink, 0, 2, 2);
+    var alpha = clamp(eyeDryness / constants.lifeFuncs.blink.dryTime, 0, 1);
     curCtx.globalAlpha = alpha;
-    img(sprites.eyeDry,cw-350,ch-40,0,2,2);
+    img(sprites.eyeDry, cw - 350, ch - 40 + playingUIOffsets.blink, 0, 2, 2);
 
     // dry overlay
-    if(eyeDryness > constants.lifeFuncs.blink.dryTime) {
+    if (eyeDryness > constants.lifeFuncs.blink.dryTime) {
         alpha = (eyeDryness - constants.lifeFuncs.blink.dryTime) / 350;
         curCtx.globalAlpha = alpha;
-        img(sprites.blinkOverlay,cw/2,ch/2);
+        img(sprites.blinkOverlay, cw / 2, ch / 2);
     }
 
     curCtx.globalAlpha = 1;

docs/assets/js/constants.js

@@ -51,15 +51,16 @@ var constants = {
         leg_speed: 0.1,
         movement_divider: 50,
         max_movement_speed: 3,
-        width: 30,
-        height: 50,
+        width: 40,
+        height: 75,
         select_range: 10,
+        leg_length: 75,
         hip: {
-            offset_x: 15,
-            offset_y: 25
+            offset_x: 20,
+            offset_y: 35
         },
-        defaultX: 500,
-        defaultY: -70
+        defaultX: 600,
+        defaultY: -170
     }
 
 };

docs/assets/js/index.js

@@ -5,12 +5,18 @@ page_preloader.show(true);
 images = [
     "assets/images/",
     "level.png",
-    "level_2.png",
+    "epic.png",
     "heartCover.png",
     "heartBack.png",
     "blinkOverlay.png",
     "eye.png",
-    "eyeDry.png"
+    "eyeDry.png",
+    "tutSelect0.png",
+    "tutSelect1.png",
+    "tutArrow.png",
+    "tutKeyZ.png",
+    "tutKeyX.png",
+    "tutKeyC.png"
 ];
 
 audio = [
@@ -77,17 +83,7 @@ function draw() {
             break;
         // playing
         case globalStates.playing:
-            if(!justBlinked) {
-
-                camera.zoom = 1;
-                drawWorldBlocks();
-                imgIgnoreCutoff(sprites.level_2,0,0,0,4,4);
-                player.draw();
-
-            } else {
-                rect(-camera.x - difx + cw/2,-camera.y - dify + ch/2,cw,ch,"black");
-                justBlinked = false;
-            }
+            drawPlaying();
             break;
         // paused
         case globalStates.paused:
@@ -99,7 +95,7 @@ function draw() {
             break;
         //building - to be used only in development
         case globalStates.building:
-            
+            imgIgnoreCutoff(sprites.epic,0,0);
             buildDraw();
             break;
     }

docs/assets/js/player/lifeFunctions.js

@@ -1,8 +1,8 @@
 
-let breath = 180;
+let breath = 200;
 let fullBreathTimer = 0;
 let noBreathTimer = 0;
-let pressure = 50;
+let pressure = 55;
 
 let heartBeat = false;
 
@@ -11,39 +11,60 @@ var breathMode = {
     exhale: 1
 };
 
-let currentBreathMode = breathMode.exhale;
+let currentBreathMode = breathMode.inhale;
 
 let eyeDryness = 0;
 let justBlinked = false;
 
 function updateLife() {
-    
-    if(keyDown[k.x]) {
-        if (breath === 0) {
-            soundAssets.inhale.play();
-            currentBreathMode = breathMode.inhale;
+
+    if (playingUIOffsets.breath === 0) {
+        if (keyDown[k.x]) {
+            if (breath === 0)  {
+                currentBreathMode = breathMode.inhale;
+                soundAssets.inhale.play();
+            }
+            else if (breath === constants.lifeFuncs.breath.fullBreath) {
+                currentBreathMode = breathMode.exhale;
+                soundAssets.exhale.play();
+            }
+            if(Date.now() - keyPromptTime > 3000) {
+                --keyPrompts.breath;
+                if(keyPrompts.breath > 0) {
+                    keyPromptTime = Date.now();
+                }
+            }
         }
-        else if (breath === constants.lifeFuncs.breath.fullBreath) {
-            soundAssets.exhale.play();
-            currentBreathMode = breathMode.exhale;
+
+        breathe();
+    }
+
+    if (playingUIOffsets.heart === 0) {
+        if (keyPress[k.c]) {
+            heartbeat();
+            if(Date.now() - keyPromptTime > 1250) {
+                --keyPrompts.beat;
+                if(keyPrompts.beat > 0) {
+                    keyPromptTime = Date.now();
+                }
+            }
+        }
+
+        pressure -= 0.1;
+        if (pressure <= 0) {
+            pressure = 0;
         }
     }
 
-    breathe();
+    if(playingUIOffsets.blink === 0) {
+        eyeDryness++;
 
-    if(keyPress[k.c]) {
-        heartbeat();
-    }
-
-    pressure-=0.1;
-    if(pressure<=0){
-        pressure = 0;
-    }
-
-    eyeDryness++;
-
-    if(keyPress[k.z]) {
-        blink();
+        if (keyPress[k.z]) {
+            blink();
+            if(Date.now() - keyPromptTime > 1250) {
+                --keyPrompts.blink;
+            }
+        }
     }
 };
 
@@ -51,10 +72,10 @@ function breathe() {
     switch (currentBreathMode) {
         case breathMode.inhale:
             breath += 1;
-            if(breath >= constants.lifeFuncs.breath.fullBreath) {
+            if (breath >= constants.lifeFuncs.breath.fullBreath) {
                 breath = constants.lifeFuncs.breath.fullBreath;
                 fullBreathTimer++;
-                if(fullBreathTimer >= 600) {
+                if (fullBreathTimer >= 600) {
                     //cough and lose breath or something
                     handleCough();
                 }
@@ -64,10 +85,10 @@ function breathe() {
             break;
         case breathMode.exhale:
             breath -= 2;
-            if(breath <= 0) {
+            if (breath <= 0) {
                 breath = 0;
                 noBreathTimer++;
-                if(noBreathTimer >= 300) {
+                if (noBreathTimer >= 300) {
                     //cough and lose breath or something
                     handleCough();
                 }
@@ -100,8 +121,8 @@ function handleCough() {
 }
 
 function heartbeat() {
-    pressure+=10;
-    if(pressure>=100){
+    pressure += 10;
+    if (pressure >= 100) {
         pressure = 100;
     }
     heartBeat = true;

docs/assets/js/player/player.js

@@ -6,8 +6,8 @@ class Player {
         this.h = constants.player.height;
         this.hipLeft = { x: this.x + constants.player.hip.offset_x, y: this.y + constants.player.hip.offset_y };
         this.hipRight = { x: this.x - constants.player.hip.offset_x, y: this.y + constants.player.hip.offset_y };
-        this.leftLeg = new Leg(this.hipLeft.x, this.hipLeft.y, 50, Math.PI*2.5);
-        this.rightLeg = new Leg(this.hipRight.x, this.hipRight.y, 50, Math.PI*2.5);
+        this.leftLeg = new Leg(this.hipLeft.x, this.hipLeft.y, constants.player.leg_length, Math.PI*2.5);
+        this.rightLeg = new Leg(this.hipRight.x, this.hipRight.y, constants.player.leg_length, Math.PI*2.5);
         this.legSelected = "R";
         this.shouldMoveLeg = false;
         this.collided = false;
@@ -75,8 +75,35 @@ Player.prototype.update = function() {
             }
         }  
     }
+
+    // god mode
+    // if(keyDown[k.w]) {
+    //     this.y-=5;
+    // }
+    // if(keyDown[k.s]) {
+    //     this.y+=5;
+    // }
+    // if(keyDown[k.a]) {
+    //     this.x-=5;
+    // }
+    // if(keyDown[k.d]) {
+    //     this.x+=5;
+    // }
     
     centerCameraOn(this.x,this.y);
+    // camera limits
+    if(camera.x > 898) {
+        camera.x = 898;
+    }
+    if(camera.x < -98) {
+        camera.x = -98;
+    }
+    if(camera.y < 245) {
+        camera.y = 245;
+    }
+    if(camera.y > 350) {
+        camera.y = 350;
+    }
 }
 
 

docs/assets/js/playing/playing.js

@@ -1,8 +1,126 @@
+var tutorialStates = {
+    selectLeg:0,
+    placeOnGround:1,
+    goDownStairs:2,
+    getCereal: 3,
+    getMail: 4
+};
+
+var tutState = tutorialStates.selectLeg;
+
+// how many times 
+var keyPrompts = {
+    beat: 2,
+    breath: 2,
+    blink: 1
+};
+
+var keyPromptTime;
+
+var frameCount = 0;
+
 function handlePlaying() {
     // enter build mode
     if(keyPress[k.BACKSLASH]) {
         globalState = globalStates.building;
     }
 
+    switch(tutState) {
+        case tutorialStates.selectLeg:
+            if(player.shouldMoveLeg) {
+                tutState = tutorialStates.placeOnGround;
+            }
+            break;
+        case tutorialStates.placeOnGround:
+            if(!player.shouldMoveLeg) {
+                tutState = tutorialStates.goDownStairs;
+            }
+            break;
+        case tutorialStates.goDownStairs:
+            if(player.y > -55) {
+                tutState = tutorialStates.getCereal;
+                keyPromptTime = Date.now();
+            }
+            break;
+        case tutorialStates.getCereal:
+            break;
+        case tutorialStates.getMail:
+
+            break;
+    }
+
+    // rise heart ui
+    if(player.y > -55) {
+        if(playingUIOffsets.heart > 0) {
+            --playingUIOffsets.heart;
+        }
+    }
+
+    // rise breath ui
+    if(player.y > 135) {
+        if(playingUIOffsets.breath > 0) {
+            --playingUIOffsets.breath;
+        }
+    }
+
+    // rise blink ui
+    if(player.x < -290) {
+        if(playingUIOffsets.blink > 0) {
+            --playingUIOffsets.blink;
+        }
+    }
+
     updateLife();
+}
+
+function drawPlaying() {
+    frameCount++;
+    if(!justBlinked) {
+
+        imgIgnoreCutoff(sprites.epic,0,0);
+        // drawWorldBlocks();
+        player.draw();
+
+        // beat key
+        if(keyPrompts.beat > 0 && playingUIOffsets.heart === 0) {
+            if(Date.now() - keyPromptTime > 1250) {
+                img(sprites.tutKeyC,player.x + 70, player.y + (~~(frameCount/10)%2) * 2,0,2,2);
+            }
+        }
+
+        // breath key
+        if(keyPrompts.breath > 0 && playingUIOffsets.breath === 0) {
+            if(Date.now() - keyPromptTime > 3000) {
+                img(sprites.tutKeyX,player.x + 70, player.y + (~~(frameCount/10)%2) * 2,0,2,2);
+            }
+        }
+
+        // blink key
+        if(keyPrompts.blink > 0 && playingUIOffsets.blink === 0) {
+            if(Date.now() - keyPromptTime > 4000) {
+                img(sprites.tutKeyZ,player.x + 70, player.y + (~~(frameCount/10)%2) * 2,0,2,2);
+            }
+        }
+        switch(tutState) {
+            case tutorialStates.selectLeg:
+                img(sprites["tutSelect"+~~(frameCount/10)%2],(player.leftLeg.x+player.leftLeg.x2)/2,(player.leftLeg.y+player.leftLeg.y2)/2,0,2,2);
+                break;
+            case tutorialStates.placeOnGround:
+                img(sprites["tutSelect"+~~(frameCount/10)%2],500,-40,2,2);
+                break;
+            case tutorialStates.goDownStairs:
+                img(sprites.tutArrow,360+~~(frameCount/10)%2,-30-~~(frameCount/10)%2,0,2,2);
+                break;
+            case tutorialStates.getCereal:
+    
+                break;
+            case tutorialStates.getMail:
+    
+                break;
+        }
+    } else {
+        rect(-camera.x - difx + cw/2,-camera.y - dify + ch/2,cw,ch,"black");
+        justBlinked = false;
+    }
+    
 }

docs/assets/js/transition/transition.js

@@ -24,7 +24,7 @@ function drawLevelTransitionUI() {
 
     // draws background sprites
     drawWorldBlocks();
-    imgIgnoreCutoff(sprites.level_2,0,0,0,4,4);
+    imgIgnoreCutoff(sprites.epic,0,0);
     player.draw();
 
     // sets alpha to calculated alpha for black

docs/assets/js/world/level.js

@@ -12,7 +12,7 @@ class block {
 }
 
 // create blocks
-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];
+var blockData = [705,-8,491,64,460,27,74,64,425,64,74,64,389,99,74,64,352,135,74,64,321,167,74,64,285,203,74,64,249,239,74,64,-18,299,3314,111,-43,205,59,90,-44,207,80,63,-168,199,128,108,-168,144,158,25,-978,-101,158,984,14,-398,1958,85,928,-192,58,345,664,-101,25,133,867,-102,25,133,765,-97,185,67];
 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]));
 }