Merge pull request #16 from rsninja722/blinking

Blinking

docs/assets/js/UI/ui.js

@@ -13,6 +13,9 @@ function drawPlayingUI() {
 
     //Respiration Monitor
     respiratoryUI(cw/8*5,ch/8*7-8, cw/16, ch/8);
+
+    //Blink eye and overlay
+    blinkUI();
 }
 
 //UI for pause screen
@@ -75,7 +78,16 @@ function heartBeatUI(x, y, width, height){
     }
 
     //Backdrop
-    rect(x+width/2,y+height/2,width,height,"black");
+    var BackdropColor;
+    if(pressure > 42 && pressure < 60) {
+        BackdropColor = "#0c2605";
+    } 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);
 
     //Pressure Meter
     rect(x+width-8,y+height/2,16,height,"red");
@@ -90,6 +102,9 @@ function heartBeatUI(x, y, width, height){
         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);
 }
 
 //Determine next value to be added to the graph
@@ -126,3 +141,21 @@ function pushNextBeatValue(){
 
     heartBeatHistory.push(nextBeatValue);
 }
+
+
+function blinkUI() {
+    // eye
+    img(sprites.eye,cw-350,ch-40,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);
+
+    // dry overlay
+    if(eyeDryness > constants.lifeFuncs.blink.dryTime) {
+        alpha = (eyeDryness - constants.lifeFuncs.blink.dryTime) / 350;
+        curCtx.globalAlpha = alpha;
+        img(sprites.blinkOverlay,cw/2,ch/2);
+    }
+
+    curCtx.globalAlpha = 1;
+}

docs/assets/js/constants.js

@@ -41,6 +41,9 @@ var constants = {
         },
         cardio:{
             optimalPressure: 50
+        },
+        blink: {
+            dryTime: 600
         }
     },
     player:{

docs/assets/js/index.js

@@ -5,7 +5,12 @@ page_preloader.show(true);
 images = [
     "assets/images/",
     "level.png",
-    "level_2.png"
+    "level_2.png",
+    "heartCover.png",
+    "heartBack.png",
+    "blinkOverlay.png",
+    "eye.png",
+    "eyeDry.png"
 ];
 
 audio = [
@@ -72,10 +77,17 @@ function draw() {
             break;
         // playing
         case globalStates.playing:
-            camera.zoom = 1;
-            drawWorldBlocks();
-            imgIgnoreCutoff(sprites.level_2,0,0,0,4,4);
-            player.draw();
+            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;
+            }
             break;
         // paused
         case globalStates.paused:

docs/assets/js/player/lifeFunctions.js

@@ -13,18 +13,19 @@ var breathMode = {
 
 let currentBreathMode = breathMode.exhale;
 
-
+let eyeDryness = 0;
+let justBlinked = false;
 
 function updateLife() {
     
-    if(keyDown[k.z]) {
+    if(keyDown[k.x]) {
         if(breath === 0) currentBreathMode = breathMode.inhale;
         else if(breath === constants.lifeFuncs.breath.fullBreath) currentBreathMode = breathMode.exhale;
     }
 
     breathe();
 
-    if(keyPress[k.x]) {
+    if(keyPress[k.c]) {
         heartbeat();
     }
 
@@ -32,6 +33,12 @@ function updateLife() {
     if(pressure<=0){
         pressure = 0;
     }
+
+    eyeDryness++;
+
+    if(keyPress[k.z]) {
+        blink();
+    }
 };
 
 function breathe() {
@@ -72,4 +79,9 @@ function heartbeat() {
 
     // Play the heartbeat sound
     soundAssets.heartbeat.play();
-};
+};
+
+function blink() {
+    eyeDryness = 0;
+    justBlinked = true;
+}

docs/assets/js/player/player.js

@@ -4,10 +4,10 @@ class Player {
         this.y = y;
         this.w = constants.player.width;
         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 / 4);
-        this.rightLeg = new Leg(this.hipRight.x, this.hipRight.y, 50, Math.PI / 2);
+        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.legSelected = "R";
         this.shouldMoveLeg = false;
         this.collided = false;
@@ -55,17 +55,8 @@ Player.prototype.update = function() {
         var targetPos = mousePosition();
         var curLeg = this.getActiveLeg();
         this.hover.active = false;
-        //left
-        if (distanceToLineSegment(this.leftLeg.x, this.leftLeg.y, this.leftLeg.x2, this.leftLeg.y2, targetPos.x, targetPos.y) < constants.player.select_range) {
-            this.hover.active = true;
-            this.hover.leg = "L";
-            if(mousePress[0]) {
-                this.shouldMoveLeg = true;
-                this.legSelected = "L";
-                this.hover.active = false;
-            }
         // right
-        } else if (distanceToLineSegment(this.rightLeg.x, this.rightLeg.y, this.rightLeg.x2, this.rightLeg.y2, targetPos.x, targetPos.y) < constants.player.select_range) {
+        if (distanceToLineSegment(this.rightLeg.x, this.rightLeg.y, this.rightLeg.x2, this.rightLeg.y2, targetPos.x, targetPos.y) < constants.player.select_range) {
             this.hover.active = true;
             this.hover.leg = "R";
             if(mousePress[0]) {
@@ -73,7 +64,16 @@ Player.prototype.update = function() {
                 this.legSelected = "R";
                 this.hover.active = false;
             }
-        }
+            //left
+        } else if (distanceToLineSegment(this.leftLeg.x, this.leftLeg.y, this.leftLeg.x2, this.leftLeg.y2, targetPos.x, targetPos.y) < constants.player.select_range) {
+            this.hover.active = true;
+            this.hover.leg = "L";
+            if(mousePress[0]) {
+                this.shouldMoveLeg = true;
+                this.legSelected = "L";
+                this.hover.active = false;
+            }
+        }  
     }
     
     centerCameraOn(this.x,this.y);
@@ -98,7 +98,6 @@ Player.prototype.moveLeg = function(){
     // console.log(curLeg.angle.toPrecision(5),pointTo(curLeg,target).toPrecision(5));
     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);
 
@@ -109,15 +108,26 @@ Player.prototype.moveLeg = function(){
         curLeg.x2 = lastX;
         curLeg.y2 = lastY;
         curLeg.angle -= angleDif;
+
+        // finer movement
+        angleDif = turn(curLeg.angle, pointTo(curLeg, target), constants.player.leg_speed/8) - curLeg.angle;
+        curLeg.angle += angleDif;
+        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:2,h:2})){
+            this.collided = true;
+            curLeg.x2 = lastX;
+            curLeg.y2 = lastY;
+            curLeg.angle -= angleDif;
+        }
         return 0;
-       
     }
     
     
-    if(collidingWithWorld({x:this.x, y:this.y, w:this.w, h:this.h})){
-        this.x = this.lastBodyX;
-        this.y = this.lastBodyY;
-    }
+    
 
 
     if (dist(curLeg, target) > curLeg.len) {
@@ -169,7 +179,10 @@ Player.prototype.moveLeg = function(){
     }
 
     
-
+    if(collidingWithWorld({x:this.x, y:this.y, w:this.w, h:this.h})){
+        this.x = this.lastBodyX;
+        this.y = this.lastBodyY;
+    }
 
 
     this.lastBodyX = this.x;
@@ -248,3 +261,7 @@ function distanceToLineSegment(lx1, ly1, lx2, ly2, px, py) {
 
 var player = new Player(constants.player.defaultX, constants.player.defaultY);
 
+// why does this stop the legs from glitching on the first step???
+player.rightLeg.angle = -pointTo({ x: player.rightLeg.x2, y: player.rightLeg.y2 }, player.hipRight);
+player.leftLeg.angle = pointTo({ x: player.leftLeg.x2, y: player.leftLeg.y2 }, player.hipLeft);
+player.moveLeg();

docs/index.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <!-- <link rel="icon" type="image/gif" href="icon.png"/> -->
-        <title>html.aspx</title>
+        <link rel="icon" type="image/gif" href="assets/images/tempIcon.png"/>
+        <title>error: title is undefined</title>
         <style>
             html {
                 background-color: var(--theme-webpage-bg_color);
@@ -13,7 +13,6 @@
                 top:0;bottom:0;right:0;left:0;
                 margin:auto;
                 border: 5px solid var(--theme-webpage-canvas_border);
-                border-radius: 10px;
                 background-color: var(--theme-webpage-canvas_bg);
             }
         </style>
@@ -21,6 +20,11 @@
     </head>
     <body>
         <canvas width="800" height="600" id="game"></canvas>
+        <pre style="position: absolute;left: 0;bottom: 0;"> TODO REMOVE ME 
+z: blink
+x: breath
+c: beat heart
+        </pre>
 
         <!-- Graphics Library -->
         <script src="assets/js/game.js"></script>