objectives and temp player

docs/assets/js/constants.js

@@ -56,7 +56,7 @@ var constants = {
         select_range: 10,
         leg_length: 75,
         hip: {
-            offset_x: 20,
+            offset_x: 16,
             offset_y: 35
         },
         defaultX: 600,

docs/assets/js/index.js

@@ -16,7 +16,15 @@ images = [
     "tutArrow.png",
     "tutKeyZ.png",
     "tutKeyX.png",
-    "tutKeyC.png"
+    "tutKeyC.png",
+    "cereal.png",
+    "post.png",
+    "box.png",
+    "boxNoOutline.png",
+    "playerBody.png",
+    "playerLeg.png",
+    "playerArm.png",
+    "playerHead.png"
 ];
 
 audio = [

docs/assets/js/player/arm.js

@@ -0,0 +1,22 @@
+// a Class for legs
+class Arm {
+
+    constructor(x, y, len, angle) {
+
+        this.x = x;
+        this.y = y;
+
+
+        this.len = len;
+        this.len2 = this.len * this.len;
+        this.angle = angle;
+
+        this.x2 = this.x + len * Math.cos(angle);
+        this.y2 = this.y + len * Math.sin(angle);
+    }
+
+};
+
+Arm.prototype.draw = function () {
+    img(sprites.playerArm,(this.x+this.x2)/2,(this.y+this.y2)/2,this.angle-pi/2,4,4);
+};

docs/assets/js/player/player.js

@@ -8,12 +8,17 @@ class Player {
         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, 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.leftArm = new Arm(this.hipLeft.x + 8, this.y - constants.player.hip.offset_y, 64, Math.PI/2);
+        this.rightArm = new Arm(this.hipRight.x - 8, this.y - constants.player.hip.offset_y, 64, Math.PI/2);
+        this.head = {x:this.x,y:this.y-this.h/2,angle:Math.PI*1.5};
         this.legSelected = "R";
         this.shouldMoveLeg = false;
         this.collided = false;
         this.lastBodyX = x;
         this.lastBodyY = y;
         this.hover = { active: false, leg: "R" };
+        this.holdingBox = false;
+        this.armVel = 1;
     }
 }
 
@@ -76,6 +81,12 @@ Player.prototype.update = function() {
         }  
     }
 
+    // place box
+    if(this.holdingBox && this.x > -275 && this.y < 100) {
+        this.holdingBox = false;
+        boxOnTable = true;
+    }
+
     // god mode
     // if(keyDown[k.w]) {
     //     this.y-=5;
@@ -89,6 +100,43 @@ Player.prototype.update = function() {
     // if(keyDown[k.d]) {
     //     this.x+=5;
     // }
+
+    var halfPI = pi/2;
+    if(this.leftArm.angle > halfPI) {
+        this.leftArm.angle -= 0.05 * this.armVel;
+    }
+    if(this.leftArm.angle < halfPI) {
+        this.leftArm.angle += 0.05 * this.armVel;
+    }
+    if(this.rightArm.angle > halfPI) {
+        this.rightArm.angle -= 0.05 * this.armVel;
+    }
+    if(this.rightArm.angle < halfPI) {
+        this.rightArm.angle += 0.05 * this.armVel;
+    }
+    this.armVel += 0.05;
+
+    if(this.head.angle > halfPI + pi) {
+        this.head.angle -= 0.05;
+    }
+    if(this.head.angle < halfPI + pi) {
+        this.head.angle += 0.05;
+    }
+
+    var arm = this.leftArm;
+    arm.x = this.x + constants.player.hip.offset_x + 8;
+    arm.y = this.y - constants.player.hip.offset_y;
+    arm.x2 = arm.x + arm.len * Math.cos(arm.angle);
+    arm.y2 = arm.y + arm.len * Math.sin(arm.angle);
+
+    var arm = this.rightArm;
+    arm.x = this.x - constants.player.hip.offset_x - 8;
+    arm.y = this.y - constants.player.hip.offset_y;
+    arm.x2 = arm.x + arm.len * Math.cos(arm.angle);
+    arm.y2 = arm.y + arm.len * Math.sin(arm.angle);
+
+    this.head.x = this.x;
+    this.head.y = this.y-this.h/2;
     
     centerCameraOn(this.x,this.y);
     // camera limits
@@ -211,9 +259,24 @@ Player.prototype.moveLeg = function(){
         this.y = this.lastBodyY;
     }
 
+    // arm and head flailing
+    var bodyDifY = this.lastBodyY - this.y;
+    if(!isNaN(bodyDifY)) {
+        if(bodyDifY < 0) {
+            this.leftArm.angle -= Math.abs(bodyDifY)/10;
+            this.rightArm.angle += Math.abs(bodyDifY)/10;
+        }
+    }
+    var bodyDifX = this.lastBodyX - this.x;
+    if(!isNaN(bodyDifX)) {
+        this.leftArm.angle -= bodyDifX/20;
+        this.rightArm.angle -= bodyDifX/20;
+        this.head.angle += bodyDifX/30;
+    }
 
     this.lastBodyX = this.x;
     this.lastBodyY = this.y;
+    this.armVel = 1;
 }
 
 Player.prototype.updateHips = function() {
@@ -223,7 +286,16 @@ Player.prototype.updateHips = function() {
 
 
 Player.prototype.draw = function() {
-    rect(this.x, this.y, this.w, this.h, "green");
+    // rect(this.x, this.y, this.w, this.h, "green");
+    img(sprites.playerBody,this.x,this.y,0,4,4);
+
+    this.leftArm.draw();
+    this.rightArm.draw();
+
+    if(this.holdingBox) {
+        img(sprites.boxNoOutline,this.leftArm.x2 - Math.cos(this.leftArm.angle)*15,this.leftArm.y2- Math.sin(this.leftArm.angle)*15,this.leftArm.angle,4,4);
+    }
+    // boxNoOutline
     if(this.hover.active) {
         if(this.hover.leg === "R") {
             curCtx.shadowBlur = 10;
@@ -248,6 +320,14 @@ Player.prototype.draw = function() {
         this.leftLeg.draw();
         this.rightLeg.draw();
     }
+
+    img(sprites.playerHead,this.head.x + Math.cos(this.head.angle) * 20,this.head.y + Math.sin(this.head.angle) * 20,this.head.angle,4,4);
+
+    img(sprites.playerLeg,(this.leftLeg.x+this.leftLeg.x2)/2,(this.leftLeg.y+this.leftLeg.y2)/2,this.leftLeg.angle+pi/2,4,4);
+    img(sprites.playerLeg,(this.rightLeg.x+this.rightLeg.x2)/2,(this.rightLeg.y+this.rightLeg.y2)/2,this.rightLeg.angle+pi/2,4,4);
+
+    
+    
 }
 
 // https://github.com/scottglz/distance-to-line-segment/blob/master/index.js

docs/assets/js/playing/objective.js

@@ -0,0 +1,41 @@
+class Objective {
+    constructor(x,y,w,h,imgName,callback) {
+        this.x = x;
+        this.y = y;
+        this.w = w;
+        this.h = h;
+        this.imgName = imgName;
+        this.callback = callback;
+    }
+}
+
+Objective.prototype.draw = function() {
+    imgIgnoreCutoff(sprites[this.imgName],this.x,this.y,0,4,4);
+}
+
+Objective.prototype.update = function() {
+    if(rectrect(this,player)) {
+        this.callback();
+        return true;
+    }
+    return false;
+}
+
+var Objectives = [];
+function updateObjectives() {
+    for(var i=0;i<Objectives.length;i++) {
+        if(Objectives[i].update()) {
+            Objectives.splice(i,1);
+            i--;
+        }
+    }
+}
+
+function drawObjectives() {
+    for(var i=0;i<Objectives.length;i++) {
+        Objectives[i].draw();
+    }
+}
+
+Objectives.push(new Objective(-140,108,60,300,"cereal",function(){console.log("%c cereal obtained 😎","font-size:200%;");}));
+Objectives.push(new Objective(-740,156,50,50,"box",function(){console.log("%c the entire mailbox obtained 😎","font-size:200%;");player.holdingBox = true;}));

docs/assets/js/playing/playing.js

@@ -19,6 +19,8 @@ var keyPromptTime;
 
 var frameCount = 0;
 
+var boxOnTable = false;
+
 function handlePlaying() {
     // enter build mode
     if(keyPress[k.BACKSLASH]) {
@@ -71,6 +73,7 @@ function handlePlaying() {
     }
 
     updateLife();
+    updateObjectives();
 }
 
 function drawPlaying() {
@@ -78,6 +81,11 @@ function drawPlaying() {
     if(!justBlinked) {
 
         imgIgnoreCutoff(sprites.epic,0,0);
+        imgIgnoreCutoff(sprites.post,-740,156,0,4,4);
+
+        if(boxOnTable) {
+            imgIgnoreCutoff(sprites.boxNoOutline,-140,116,0,4,4);
+        }
         // drawWorldBlocks();
         player.draw();
 
@@ -118,6 +126,8 @@ function drawPlaying() {
     
                 break;
         }
+
+        drawObjectives();
     } else {
         rect(-camera.x - difx + cw/2,-camera.y - dify + ch/2,cw,ch,"black");
         justBlinked = false;

docs/assets/js/transition/transition.js

@@ -6,7 +6,7 @@ function handleTransition(){
 
     // Calculates alpha until its zero
     if(currentAlpha > 0){
-        currentAlpha -= .005;
+        currentAlpha -= .5;
     }
 
 

docs/assets/js/world/level.js

@@ -12,7 +12,7 @@ class block {
 }
 
 // create blocks
-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];
+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,-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]));
 }

docs/index.html

@@ -3,6 +3,7 @@
     <head>
         <link rel="icon" type="image/gif" href="assets/images/tempIcon.png"/>
         <title>error: title is undefined</title>
+        <meta charset="utf-8" />
         <style>
             html {
                 background-color: var(--theme-webpage-bg_color);
@@ -43,12 +44,14 @@ c: beat heart
         <!-- Everything Else -->
         <script src="assets/js/world/build.js"></script>
         <script src="assets/js/world/level.js"></script>
-
+        
+        <script src="assets/js/player/arm.js"></script>
         <script src="assets/js/player/leg.js"></script>
         <script src="assets/js/player/player.js"></script>
         <script src="assets/js/player/lifeFunctions.js"></script>
 
         <script src="assets/js/playing/playing.js"></script>
+        <script src="assets/js/playing/objective.js"></script>
 
         <script src="assets/js/titleScreen/titleScreen.js"></script>
         <script src="assets/js/UI/ui.js"></script>