From 70de5fca979a26168402c37c12200dc4477bff6a Mon Sep 17 00:00:00 2001 From: rsninja722 Date: Sat, 18 Apr 2020 15:56:53 -0400 Subject: [PATCH] stuff --- docs/assets/js/constants.js | 13 ++- docs/assets/js/index.js | 3 +- docs/assets/js/player/player.js | 176 +++++++++++++++++++++++--------- 3 files changed, 137 insertions(+), 55 deletions(-) diff --git a/docs/assets/js/constants.js b/docs/assets/js/constants.js index 4570ac8..ab3930d 100644 --- a/docs/assets/js/constants.js +++ b/docs/assets/js/constants.js @@ -33,9 +33,16 @@ var constants = { complex_width: 0.65 } }, - legs:{ - size:{ - maximumMovement: 30 + player:{ + leg_speed: 0.1, + movement_divider: 50, + max_movement_speed: 3, + width: 30, + height: 50, + select_range: 10, + hip: { + offset_x: 15, + offset_y: 25 } } diff --git a/docs/assets/js/index.js b/docs/assets/js/index.js index 51d3657..ae09bbc 100644 --- a/docs/assets/js/index.js +++ b/docs/assets/js/index.js @@ -62,7 +62,9 @@ function draw() { break; // playing case globalStates.playing: + camera.zoom = 2; drawWorldBlocks(); + player.draw(); break; // paused case globalStates.paused: @@ -92,7 +94,6 @@ function absoluteDraw() { // playing case globalStates.playing: drawPlayingUI(); - player.draw(); break; // paused case globalStates.paused: diff --git a/docs/assets/js/player/player.js b/docs/assets/js/player/player.js index f953331..9566cb3 100644 --- a/docs/assets/js/player/player.js +++ b/docs/assets/js/player/player.js @@ -1,31 +1,28 @@ class Player { - - constructor(x, y){ + constructor(x, y) { this.x = x; this.y = y; - this.w = 10; - this.h = 20; - this.hipLeft = {x:this.x-5,y:this.y+10}; - this.hipRight = {x:this.x+5,y:this.y+10}; - 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.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.legSelected = "R"; - this.shouldMoveLeg = true; + this.hover = { active: false, leg: "R" }; + this.shouldMoveLeg = false; } - - - } Player.prototype.getActiveLeg = function(){ - if(this.legSelected === "L"){ + if (this.legSelected === "L") { return this.leftLeg; } return this.rightLeg; } Player.prototype.getLockedLeg = function(){ - if(this.legSelected === "R"){ + if (this.legSelected === "R") { return this.leftLeg; } return this.rightLeg; @@ -33,62 +30,80 @@ Player.prototype.getLockedLeg = function(){ // leg has been selected, move leg towards mouse Player.prototype.moveLeg = function(){ + var targetPos = mousePosition(); // Stops if we shouldn't move leg - if(!this.shouldMoveLeg){ + if (!this.shouldMoveLeg) { + var curLeg = this.getActiveLeg(); + this.hover.active = false; + 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; + } + } else 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]) { + this.shouldMoveLeg = true; + this.legSelected = "R"; + this.hover.active = false; + } + } return 0; } - + // gets active leg & target var curLeg = this.getActiveLeg(); - var target = mousePos; + var target = targetPos; // move selected leg towards mouse - + // console.log(curLeg.angle.toPrecision(5),pointTo(curLeg,target).toPrecision(5)); - curLeg.angle = turn( curLeg.angle,pointTo(curLeg,target),0.1); + curLeg.angle = turn(curLeg.angle, pointTo(curLeg, target), constants.player.leg_speed); // 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); // curLeg.angle = pointTo(curLeg,{x:curLeg.x2,y:curLeg.y2}); - if(dist(curLeg,target) > curLeg.len) { + if (dist(curLeg, target) > curLeg.len) { // move towards mouse - this.x += Math.cos(pointTo(curLeg,target)) * clamp(dist(curLeg,target)/50,1,3); + this.x += Math.cos(pointTo(curLeg, target)) * clamp(dist(curLeg, target) / constants.player.movement_divider, 1, constants.player.max_movement_speed); - this.y += Math.sin(pointTo(curLeg,target)) * clamp(dist(curLeg,target)/50,1,3); + this.y += Math.sin(pointTo(curLeg, target)) * clamp(dist(curLeg, target) / constants.player.movement_divider, 1, constants.player.max_movement_speed); this.updateHips(); } // if leg is right update it accordingly - if(this.legSelected === "R") { + if (this.legSelected === "R") { // set angle to the locked foot to the locked hip oppLeg = this.getLockedLeg(); - oppLeg.angle = pointTo({x:oppLeg.x2,y:oppLeg.y2},this.hipRight); + oppLeg.angle = pointTo({ x: oppLeg.x2, y: oppLeg.y2 }, this.hipRight); // snap body to a position where the hip is attached to the leg - this.x = (oppLeg.x2 + oppLeg.len * Math.cos(oppLeg.angle)) - 5; - this.y = (oppLeg.y2 + oppLeg.len * Math.sin(oppLeg.angle)) - 10; + this.x = (oppLeg.x2 + oppLeg.len * Math.cos(oppLeg.angle)) - constants.player.hip.offset_x; + this.y = (oppLeg.y2 + oppLeg.len * Math.sin(oppLeg.angle)) - constants.player.hip.offset_y; this.updateHips(); - + // make sure each leg ends at the hips oppLeg.x = this.hipRight.x; oppLeg.y = this.hipRight.y; curLeg.x = this.hipLeft.x; curLeg.y = this.hipLeft.y; - console.log(oppLeg.angle) - // if leg is left update it accordingly + // if leg is left update it accordingly } else { - console.log(curLeg.angle) - // set angle to the locked foot to the locked hip + // set angle to the locked foot to the locked hip oppLeg = this.getLockedLeg(); - oppLeg.angle = pointTo({x:oppLeg.x2,y:oppLeg.y2},this.hipLeft); + oppLeg.angle = pointTo({ x: oppLeg.x2, y: oppLeg.y2 }, this.hipLeft); // snap body to a position where the hip is attached to the leg - this.x = (oppLeg.x2 + oppLeg.len * Math.cos(oppLeg.angle)) + 5; - this.y = (oppLeg.y2 + oppLeg.len * Math.sin(oppLeg.angle)) - 10; + this.x = (oppLeg.x2 + oppLeg.len * Math.cos(oppLeg.angle)) + constants.player.hip.offset_x; + this.y = (oppLeg.y2 + oppLeg.len * Math.sin(oppLeg.angle)) - constants.player.hip.offset_y; this.updateHips(); @@ -99,34 +114,93 @@ Player.prototype.moveLeg = function(){ curLeg.x = this.hipRight.x; curLeg.y = this.hipRight.y; } + + } Player.prototype.updateHips = function() { - this.hipLeft = {x:this.x-5,y:this.y+10}; - this.hipRight = {x:this.x+5,y:this.y+10}; + 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 }; } Player.prototype.draw = function() { - rect(this.x, this.y, this.w, this.h,"green"); - this.leftLeg.draw(); - this.rightLeg.draw(); -} - -Player.prototype.update = function() { - this.moveLeg(); - var curLeg = this.getActiveLeg(); - if(collidingWithWorld({x:curLeg.x2,y:curLeg.y2,w:4,h:4})||mousePress[0]){ - if(this.legSelected === "R"){ - this.legSelected = "L"; - this.leftLeg.angle += pi; + rect(this.x, this.y, this.w, this.h, "green"); + if(this.hover.active) { + if(this.hover.leg === "R") { + curCtx.shadowBlur = 10; + curCtx.shadowColor = "yellow"; + curCtx.lineWidth = 3; + this.rightLeg.draw(); + curCtx.lineWidth = 1; + curCtx.shadowBlur = 0; + curCtx.shadowColor = "black"; + this.leftLeg.draw(); } else { - this.legSelected = "R"; - this.rightLeg.angle += pi; + curCtx.shadowBlur = 10; + curCtx.shadowColor = "yellow"; + curCtx.lineWidth = 3; + this.leftLeg.draw(); + curCtx.lineWidth = 1; + curCtx.shadowBlur = 0; + curCtx.shadowColor = "black"; + this.rightLeg.draw(); } + } else { + this.leftLeg.draw(); + this.rightLeg.draw(); } } +Player.prototype.update = function() { + var curLeg = this.getActiveLeg(); + if(mousePress[0]) {// if (collidingWithWorld({ x: curLeg.x2, y: curLeg.y2, w: 4, h: 4 })) { + // if (this.legSelected === "R") { + // this.legSelected = "L"; + // this.leftLeg.angle += pi; + // } else { + // this.legSelected = "R"; + // this.rightLeg.angle += pi; + // } + this.shouldMoveLeg = false; + } + this.moveLeg(); + centerCameraOn(this.x,this.y); +} + +// https://github.com/scottglz/distance-to-line-segment/blob/master/index.js +function distanceSquaredToLineSegment2(lx1, ly1, ldx, ldy, lineLengthSquared, px, py) { + var t; // t===0 at line pt 1 and t ===1 at line pt 2 + if (!lineLengthSquared) { + // 0-length line segment. Any t will return same result + t = 0; + } + else { + t = ((px - lx1) * ldx + (py - ly1) * ldy) / lineLengthSquared; + + if (t < 0) + t = 0; + else if (t > 1) + t = 1; + } + + var lx = lx1 + t * ldx, + ly = ly1 + t * ldy, + dx = px - lx, + dy = py - ly; + return dx * dx + dy * dy; +} +function distanceSquaredToLineSegment(lx1, ly1, lx2, ly2, px, py) { + var ldx = lx2 - lx1, + ldy = ly2 - ly1, + lineLengthSquared = ldx * ldx + ldy * ldy; + return distanceSquaredToLineSegment2(lx1, ly1, ldx, ldy, lineLengthSquared, px, py); +} + +function distanceToLineSegment(lx1, ly1, lx2, ly2, px, py) { + return Math.sqrt(distanceSquaredToLineSegment(lx1, ly1, lx2, ly2, px, py)); +} -var player = new Player(250,200); \ No newline at end of file + +var player = new Player(250, 150); \ No newline at end of file