evan/ludum-dare-46
Archived
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #9 from rsninja722/leg-movement-2

Browse Source 
Leg movement 2
This commit is contained in:
rsninja722 2020-04-18 16:18:45 -04:00 committed by GitHub
commit 88a8021dd4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 239 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/js/UI/ui.js
View File

@ -9,7 +9,7 @@ function drawLevelTransitionUI() {
// UI for playing
function drawPlayingUI() {
cartesianRect(0,ch/3*2, cw, ch/3, "#333333")
// 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);

13
docs/assets/js/constants.js
View File

@ -42,9 +42,16 @@ var constants = {
optimalPressure: 50
}
},
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
}
}

3
docs/assets/js/index.js
View File

@ -33,6 +33,7 @@ function update() {
// playing
case globalStates.playing:
handlePlaying();
player.update();
break;
// paused
case globalStates.paused:
@ -67,7 +68,9 @@ function draw() {
break;
// playing
case globalStates.playing:
camera.zoom = 2;
drawWorldBlocks();
player.draw();
break;
// paused
case globalStates.paused:

55
docs/assets/js/player/leg.js
View File

@ -1,56 +1,25 @@
// a Class for legs
class Leg{
Leg(thighX, thighY, kneeX, kneeY, footX, footY){
constructor(x, y, len, angle) {
// Thigh X,Y
this.thighX = thighX;
this.thighY = thighY;
this.x = x;
this.y = y;
// Knee X,Y
this.kneeX = kneeX;
this.kneeY = kneeY;
// Foot X,Y
this.footX = footX;
this.footY = footY
this.len = len;
this.len2 = this.len * this.len;
this.angle = angle;
// Calculates distances
this.thighToKnee = abs(math.hypot(thighX - kneeX, thighY - kneeY));
this.kneeToFoot = abs(math.hypot(kneeX - footX, kneeY - footX));
}
setThigh(newX, newY){
this.thighX = newX;
this.thighY = newY;
// Recalculates distances
this.thighToKnee = abs(math.hypot(newX - this.kneeX, newY - this.kneeY));
}
setKnee(newX, newY){
this.kneeX = newX;
this.kneeY = newY;
// Recalculates distances
this.thighToKnee = abs(math.hypot(this.thighX - newX, this.thighY - newY));
this.kneeToFoot = abs(math.hypot(newX - this.footX, newY - this.footY));
}
setFoot(newX, newY){
this.footX = newX;
this.footY = newY;
// Recalculates distances
this.kneeToFoot = abs(math.hypot(this.kneeX - newX, this.kneeY - newY));
this.x2 = this.x + len * Math.cos(angle);
this.y2 = this.y + len * Math.sin(angle);
}
};
Leg.prototype.draw = function() {
line(this.x,this.y,this.x2,this.y2,"green");
};

307
docs/assets/js/player/player.js
View File

@ -1,133 +1,244 @@
class Player {
constructor(x, y){
constructor(x, y) {
this.x = x;
this.y = y;
this.hipL = {x:x-5,y:y};
this.hipR = {x:x+5,y:y};
this.footL = {x:x-5,y:y+10};
this.footR = {x:x+5,y:y+10};
this.kneeL= {x:x-5,y:y+5};
this.kneeR = {x:x+5,y:y+5};
this.legSelected = "l";
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 = false;
this.collided = false;
this.lastBodyX = x;
this.lastBodyY = y;
this.hover = { active: false, leg: "R" };
}
getLeg(){
if(this.legSelected === "l"){
return [this.footL, this.kneeL, this.thighL];
}
return [this.footR, this.kneeR, this.thighR];
}
}
Player.prototype.getActiveLeg = function(){
if (this.legSelected === "L") {
return this.leftLeg;
}
return this.rightLeg;
}
Player.prototype.getLockedLeg = function(){
if (this.legSelected === "R") {
return this.leftLeg;
}
return this.rightLeg;
}
Player.prototype.update = function() {
var curLeg = this.getActiveLeg();
// select
if (this.shouldMoveLeg) {
this.moveLeg();
if(mousePress[0]) {// if (collidingWithWorld({ x: curLeg.x2, y: curLeg.y2, w: 4, h: 4 })) {
if (this.legSelected === "R") {
this.leftLeg.angle += pi;
} else {
this.rightLeg.angle += pi;
}
this.shouldMoveLeg = false;
}
// deselect
} else {
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) {
this.hover.active = true;
this.hover.leg = "R";
if(mousePress[0]) {
this.shouldMoveLeg = true;
this.legSelected = "R";
this.hover.active = false;
}
}
}
centerCameraOn(this.x,this.y);
}
// leg has been selected, move leg towards mouse
Player.prototype.moveLeg = function(){
var targetPos = mousePosition();
// gets active leg & target
var curLeg = this.getActiveLeg();
var target = targetPos;
// Last leg position
var lastX = curLeg.x2;
var lastY = curLeg.y2;
if(!this.shouldMoveLeg){
return
// 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 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})){
this.collided = true;
curLeg.x2 = lastX;
curLeg.y2 = lastY;
return 0;
}
var target = mousePosition();
//TODO set a proper constant
if(Math.hypot(this.x - target.x, this.y - target.y) < constants.legs.size.maximumMovement){
// Points to move towards
var ix = target.x;
var iy = target.y;
var leg = this.getLeg()
// Check collision psuedo code need to figure out actual collison
if(ix.collide()){
ix = leg[0].x;
}
// Check collision psuedo code need to figure out actual collison
if(iy.collide()){
iy = leg[0].y;
}
// total distances as a square
var targetSqrDistance = ix * ix + iy * iy;
// gets lengths may need to be tweaked
var thighKneeLength = abs(Math.hypot(leg[2].x - leg[1].x, leg[2].y - leg[1].y) * 2)
var kneeFootLength = abs(Math.hypot(leg[1].x - leg[0].x, leg[1].y - leg[0].y) * 2)
var thighKneeAngle = Math.max(-1, Math.min(1, (targetSqrDistance + thighKneeLength - kneeFootLength)
/ (2 * (thighKneeLength / 2) * Math.sqrt(targetSqrDistance)
)));
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) {
// move towards mouse
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) / constants.player.movement_divider, 1, constants.player.max_movement_speed);
this.updateHips();
}
// if leg is right update it accordingly
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);
// snap body to a position where the hip is attached to the leg
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;
// if leg is left update it accordingly
} else {
// set angle to the locked foot to the locked hip
oppLeg = this.getLockedLeg();
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)) + constants.player.hip.offset_x;
this.y = (oppLeg.y2 + oppLeg.len * Math.sin(oppLeg.angle)) - constants.player.hip.offset_y;
if target within range of leg
ik towards target in x
if colliding undo move
ik towards target in y
if colliding undo move
if out of target
ik towards target in x
if colliding undo move
ik towards target in y
if colliding undo move
slowly move torso towards mouse
planted leg ik towards torso
if torso outside the planted leg range
move torso back
*/
this.updateHips();
// make sure each leg ends at the hips
oppLeg.x = this.hipLeft.x;
oppLeg.y = this.hipLeft.y;
// Finds the distance between the old hip position and the future one
requiredLegDistance = Math.hypot(currentHip.x - futureFoot.x, currentHip.y - futureFoot.y);
newFootX = futureFoot.x;
newFootY = futureFoot.y;
// TODO implement collision checking
curLeg.x = this.hipRight.x;
curLeg.y = this.hipRight.y;
}
newHipX = currentHip.x + futureFoot.x - currentFoot.x;
newHipY = currentHip.y + futureFoot.y - currentFoot.y;
// newKneeX =
// returns new leg positions
return [{x:newHipX, y:newHipY}, {x:newKneeX, y:newKneeY}, {x:newFootX, y:newFootY}];
this.lastBodyX = this.x;
this.lastBodyY = this.y;
}
Player.prototype.updateHips = function() {
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");
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 {
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() {
}
// 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(500,100);

4
docs/assets/js/world/level.js
View File

@ -24,9 +24,9 @@ function drawWorldBlocks() {
}
function collidingWithWorld(objectWithXYWH) {
for (let i = 0, l = collisionRects.length; i < l; i++) {
for (var i = 0; i < collisionRects.length; i++) {
if (rectrect(collisionRects[i], objectWithXYWH)) {
return i;
return true;
}
}
return false;

4
docs/index.html
View File

@ -39,8 +39,8 @@
<!-- <script src="assets/js/world/build.js"></script> -->
<script src="assets/js/world/level.js"></script>
<!-- <script src="assets/js/player/player.js"></script>
<script src="assets/js/player/leg.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>