跳跃后物体没有停在原位 javascript

object doesn't stop on position after jump javascript

我的游戏角色有问题。它应该通过按空格键跳跃并掉到地上,如果越过峡谷则掉入峡谷。但如果它设法跳过峡谷,它应该降落在地面位置。不幸的是,我的游戏角色在跳过峡谷后发现自己在地下很多地方。我不明白为什么。

var gameChar_x;
var gameChar_y;
var floorPos_y;

var isLeft;
var isRight;
var isPlummeting;
var isFalling;
var collectable;
var canyon;

function setup() {
  createCanvas(1024, 576);
  floorPos_y = (height * 3) / 4;
  gameChar_x = width / 2;
  gameChar_y = floorPos_y;

  isLeft = false;
  isRight = false;
  isPlummeting = false;
  isFalling = false;
  collectable = {
    x_pos: 150,
    y_pos: 420,
    size: 1.1,
    isFound: false
  };
  canyon = {
    x_pos: 280,
    width: 100
  };
}

function draw() {
  ///////////DRAWING CODE//////////

  background(100, 155, 255); //fill the sky blue

  noStroke();
  fill(0, 155, 0);
  rect(0, floorPos_y, width, height - floorPos_y); //draw some green ground

  //draw the canyon
  if (
    gameChar_x > canyon.x_pos &&
    gameChar_x < canyon.x_pos + canyon.width &&
    gameChar_y >= floorPos_y
  ) {
    isPlummeting = true;
    gameChar_y += 10;
  } else {
    isPlummeting = false;
  }
  fill(99);
  rect(canyon.x_pos, floorPos_y, canyon.width, height);
  fill(70);
  rect(canyon.x_pos + 10, floorPos_y, canyon.width - 20, height);
  //water
  fill(19, 26, 130);
  rect(canyon.x_pos + 10, floorPos_y + 80, canyon.width - 20, height / 4);

  //VINYL
  if (dist(gameChar_x, gameChar_y, collectable.x_pos, collectable.y_pos) < 20) {
    collectable.isFound = true;
  }

  if (collectable.isFound == false) {
    fill(0);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      30 * collectable.size,
      30 * collectable.size
    );
    fill(112, 128, 144);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      26 * collectable.size,
      26 * collectable.size
    );
    fill(0);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      25 * collectable.size,
      25 * collectable.size
    );
    fill(0);
    fill(112, 128, 144);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      22 * collectable.size,
      22 * collectable.size
    );
    fill(0);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      21 * collectable.size,
      21 * collectable.size
    );
    fill(0);
    fill(112, 128, 144);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      19 * collectable.size,
      19 * collectable.size
    );
    fill(0);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      18 * collectable.size,
      18 * collectable.size
    );

    fill(148, 0, 148);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      15 * collectable.size,
      15 * collectable.size
    );
    fill(0);
  }

  //the game character
  if (isLeft && isFalling) {
    // add your jumping-left code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 20, 20, 20);
    //legs
    ellipse(gameChar_x - 6, gameChar_y - 7, 7, 7);
    ellipse(gameChar_x - 12, gameChar_y - 14, 7, 7);
    //upper body
    ellipse(gameChar_x - 5, gameChar_y - 31, 15, 15);
    //head
    ellipse(gameChar_x - 9, gameChar_y - 46, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x - 9, gameChar_y - 27, 3, 3);
    //eye
    ellipse(gameChar_x - 11, gameChar_y - 48, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x - 9, gameChar_y - 57, gameChar_x - 3, gameChar_y - 57);
    line(gameChar_x - 9, gameChar_y - 56, gameChar_x - 3, gameChar_y - 62);
    line(gameChar_x - 9, gameChar_y - 57, gameChar_x - 9, gameChar_y - 63);
    //arm
    line(gameChar_x - 6, gameChar_y - 30, gameChar_x - 20, gameChar_y - 35);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x - 13,
      gameChar_y - 47,
      gameChar_x - 23,
      gameChar_y - 40,
      gameChar_x - 13,
      gameChar_y - 43
    );
  } else if (isRight && isFalling) {
    // add your jumping-right code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 20, 20, 20);
    //legs
    ellipse(gameChar_x + 6, gameChar_y - 7, 7, 7);
    ellipse(gameChar_x + 12, gameChar_y - 14, 7, 7);
    //upper body
    ellipse(gameChar_x + 5, gameChar_y - 31, 15, 15);
    //head
    ellipse(gameChar_x + 9, gameChar_y - 46, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x + 9, gameChar_y - 27, 3, 3);
    //eye
    ellipse(gameChar_x + 11, gameChar_y - 48, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x + 9, gameChar_y - 57, gameChar_x + 3, gameChar_y - 57);
    line(gameChar_x + 9, gameChar_y - 56, gameChar_x + 3, gameChar_y - 62);
    line(gameChar_x + 9, gameChar_y - 57, gameChar_x + 9, gameChar_y - 63);
    //arm
    line(gameChar_x + 6, gameChar_y - 30, gameChar_x + 20, gameChar_y - 35);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x + 13,
      gameChar_y - 47,
      gameChar_x + 23,
      gameChar_y - 40,
      gameChar_x + 13,
      gameChar_y - 43
    );
  } else if (isLeft) {
    // add your walking left code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 13, 20, 20);
    //legs
    ellipse(gameChar_x, gameChar_y, 7, 7);
    ellipse(gameChar_x - 12, gameChar_y - 7, 7, 7);
    //upper body
    ellipse(gameChar_x, gameChar_y - 26, 15, 15);
    //head
    ellipse(gameChar_x, gameChar_y - 40, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x - 4, gameChar_y - 23, 3, 3);
    //eye
    ellipse(gameChar_x - 2, gameChar_y - 42, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x, gameChar_y - 51, gameChar_x - 5, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 49, gameChar_x, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 51, gameChar_x + 5, gameChar_y - 56);
    //arm
    line(gameChar_x, gameChar_y - 27, gameChar_x, gameChar_y - 15);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x - 6,
      gameChar_y - 39,
      gameChar_x - 17,
      gameChar_y - 33,
      gameChar_x - 6,
      gameChar_y - 36
    );
  } else if (isRight) {
    // add your walking right code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 13, 20, 20);
    //legs
    ellipse(gameChar_x, gameChar_y, 7, 7);
    ellipse(gameChar_x + 12, gameChar_y - 7, 7, 7);
    //upper body
    ellipse(gameChar_x, gameChar_y - 26, 15, 15);
    //head
    ellipse(gameChar_x, gameChar_y - 40, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x + 4, gameChar_y - 23, 3, 3);
    //eye
    ellipse(gameChar_x + 2, gameChar_y - 42, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x, gameChar_y - 51, gameChar_x - 5, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 49, gameChar_x, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 51, gameChar_x + 5, gameChar_y - 56);
    //arm
    line(gameChar_x, gameChar_y - 27, gameChar_x, gameChar_y - 15);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x + 6,
      gameChar_y - 39,
      gameChar_x + 17,
      gameChar_y - 33,
      gameChar_x + 6,
      gameChar_y - 36
    );
  } else if (isFalling || isPlummeting) {
    // add your jumping facing forwards code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 23, 20, 20);
    //legs
    ellipse(gameChar_x - 7, gameChar_y - 13, 7, 7);
    ellipse(gameChar_x + 7, gameChar_y - 13, 7, 7);
    //upper body
    ellipse(gameChar_x, gameChar_y - 36, 15, 15);
    //head
    ellipse(gameChar_x, gameChar_y - 50, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x, gameChar_y - 33, 3, 3);
    //eyes
    ellipse(gameChar_x - 2, gameChar_y - 52, 2, 2);
    ellipse(gameChar_x + 2, gameChar_y - 52, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x, gameChar_y - 61, gameChar_x - 5, gameChar_y - 66);
    line(gameChar_x, gameChar_y - 59, gameChar_x, gameChar_y - 66);
    line(gameChar_x, gameChar_y - 61, gameChar_x + 5, gameChar_y - 66);
    //arms
    line(gameChar_x - 7, gameChar_y - 37, gameChar_x - 15, gameChar_y - 57);
    line(gameChar_x + 7, gameChar_y - 37, gameChar_x + 15, gameChar_y - 57);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x - 2,
      gameChar_y - 49,
      gameChar_x - 10,
      gameChar_y - 43,
      gameChar_x + 2,
      gameChar_y - 49
    );
  } else {
    // add your standing front facing code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 13, 20, 20);
    //legs
    ellipse(gameChar_x - 5, gameChar_y, 7, 7);
    ellipse(gameChar_x + 5, gameChar_y, 7, 7);
    //upper body
    ellipse(gameChar_x, gameChar_y - 26, 15, 15);
    //head
    ellipse(gameChar_x, gameChar_y - 40, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x, gameChar_y - 23, 3, 3);
    //eyes
    ellipse(gameChar_x - 2, gameChar_y - 42, 2, 2);
    ellipse(gameChar_x + 2, gameChar_y - 42, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x, gameChar_y - 51, gameChar_x - 5, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 49, gameChar_x, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 51, gameChar_x + 5, gameChar_y - 56);
    //arms
    line(gameChar_x - 7, gameChar_y - 27, gameChar_x - 15, gameChar_y - 17);
    line(gameChar_x + 7, gameChar_y - 27, gameChar_x + 15, gameChar_y - 17);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x - 2,
      gameChar_y - 39,
      gameChar_x - 10,
      gameChar_y - 33,
      gameChar_x + 2,
      gameChar_y - 39
    );
  }

  ///////////INTERACTION CODE//////////
  //Put conditional statements to move the game character below here
  if (isLeft == true) {
    gameChar_x -= 4;
  }
  if (isRight == true) {
    gameChar_x += 4;
  }
  //jumping
  if (gameChar_y < floorPos_y) {
    gameChar_y += 4;
    isFalling = true;
  } else isFalling = false;
}

function keyPressed() {
  // if statements to control the animation of the character when
  // keys are pressed.
  if (keyCode == 37) {
    isLeft = true;
  }

  if (keyCode == 39) {
    isRight = true;
  }
  if (keyCode == 32 && gameChar_y == floorPos_y) {
    gameChar_y -= 100;
  }
}

function keyReleased() {
  // if statements to control the animation of the character when
  // keys are released.
  if (keyCode == 37) {
    isLeft = false;
  }
  if (keyCode == 39) {
    isRight = false;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

问题似乎是你的角色被允许穿过峡谷的两侧。在添加或减去它的 x 位置之前,您没有检查墙壁碰撞。

我已经在您的交互代码中添加了 wall-checks:

var gameChar_x;
var gameChar_y;
var floorPos_y;

var isLeft;
var isRight;
var isPlummeting;
var isFalling;
var collectable;
var canyon;

function setup() {
  createCanvas(1024, 576);
  floorPos_y = (height * 3) / 4;
  gameChar_x = width / 2;
  gameChar_y = floorPos_y;

  isLeft = false;
  isRight = false;
  isPlummeting = false;
  isFalling = false;
  collectable = {
    x_pos: 150,
    y_pos: 420,
    size: 1.1,
    isFound: false
  };
  canyon = {
    x_pos: 280,
    width: 100
  };
}

function draw() {
  ///////////DRAWING CODE//////////

  background(100, 155, 255); //fill the sky blue

  noStroke();
  fill(0, 155, 0);
  rect(0, floorPos_y, width, height - floorPos_y); //draw some green ground

  //draw the canyon
  if (
    gameChar_x > canyon.x_pos &&
    gameChar_x < canyon.x_pos + canyon.width &&
    gameChar_y >= floorPos_y
  ) {
    isPlummeting = true;
    gameChar_y += 10;
  } else {
    isPlummeting = false;
  }
  fill(99);
  rect(canyon.x_pos, floorPos_y, canyon.width, height);
  fill(70);
  rect(canyon.x_pos + 10, floorPos_y, canyon.width - 20, height);
  //water
  fill(19, 26, 130);
  rect(canyon.x_pos + 10, floorPos_y + 80, canyon.width - 20, height / 4);

  //VINYL
  if (dist(gameChar_x, gameChar_y, collectable.x_pos, collectable.y_pos) < 20) {
    collectable.isFound = true;
  }

  if (collectable.isFound == false) {
    fill(0);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      30 * collectable.size,
      30 * collectable.size
    );
    fill(112, 128, 144);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      26 * collectable.size,
      26 * collectable.size
    );
    fill(0);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      25 * collectable.size,
      25 * collectable.size
    );
    fill(0);
    fill(112, 128, 144);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      22 * collectable.size,
      22 * collectable.size
    );
    fill(0);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      21 * collectable.size,
      21 * collectable.size
    );
    fill(0);
    fill(112, 128, 144);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      19 * collectable.size,
      19 * collectable.size
    );
    fill(0);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      18 * collectable.size,
      18 * collectable.size
    );

    fill(148, 0, 148);
    ellipse(
      collectable.x_pos,
      collectable.y_pos,
      15 * collectable.size,
      15 * collectable.size
    );
    fill(0);
  }

  //the game character
  if (isLeft && isFalling) {
    // add your jumping-left code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 20, 20, 20);
    //legs
    ellipse(gameChar_x - 6, gameChar_y - 7, 7, 7);
    ellipse(gameChar_x - 12, gameChar_y - 14, 7, 7);
    //upper body
    ellipse(gameChar_x - 5, gameChar_y - 31, 15, 15);
    //head
    ellipse(gameChar_x - 9, gameChar_y - 46, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x - 9, gameChar_y - 27, 3, 3);
    //eye
    ellipse(gameChar_x - 11, gameChar_y - 48, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x - 9, gameChar_y - 57, gameChar_x - 3, gameChar_y - 57);
    line(gameChar_x - 9, gameChar_y - 56, gameChar_x - 3, gameChar_y - 62);
    line(gameChar_x - 9, gameChar_y - 57, gameChar_x - 9, gameChar_y - 63);
    //arm
    line(gameChar_x - 6, gameChar_y - 30, gameChar_x - 20, gameChar_y - 35);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x - 13,
      gameChar_y - 47,
      gameChar_x - 23,
      gameChar_y - 40,
      gameChar_x - 13,
      gameChar_y - 43
    );
  } else if (isRight && isFalling) {
    // add your jumping-right code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 20, 20, 20);
    //legs
    ellipse(gameChar_x + 6, gameChar_y - 7, 7, 7);
    ellipse(gameChar_x + 12, gameChar_y - 14, 7, 7);
    //upper body
    ellipse(gameChar_x + 5, gameChar_y - 31, 15, 15);
    //head
    ellipse(gameChar_x + 9, gameChar_y - 46, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x + 9, gameChar_y - 27, 3, 3);
    //eye
    ellipse(gameChar_x + 11, gameChar_y - 48, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x + 9, gameChar_y - 57, gameChar_x + 3, gameChar_y - 57);
    line(gameChar_x + 9, gameChar_y - 56, gameChar_x + 3, gameChar_y - 62);
    line(gameChar_x + 9, gameChar_y - 57, gameChar_x + 9, gameChar_y - 63);
    //arm
    line(gameChar_x + 6, gameChar_y - 30, gameChar_x + 20, gameChar_y - 35);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x + 13,
      gameChar_y - 47,
      gameChar_x + 23,
      gameChar_y - 40,
      gameChar_x + 13,
      gameChar_y - 43
    );
  } else if (isLeft) {
    // add your walking left code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 13, 20, 20);
    //legs
    ellipse(gameChar_x, gameChar_y, 7, 7);
    ellipse(gameChar_x - 12, gameChar_y - 7, 7, 7);
    //upper body
    ellipse(gameChar_x, gameChar_y - 26, 15, 15);
    //head
    ellipse(gameChar_x, gameChar_y - 40, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x - 4, gameChar_y - 23, 3, 3);
    //eye
    ellipse(gameChar_x - 2, gameChar_y - 42, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x, gameChar_y - 51, gameChar_x - 5, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 49, gameChar_x, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 51, gameChar_x + 5, gameChar_y - 56);
    //arm
    line(gameChar_x, gameChar_y - 27, gameChar_x, gameChar_y - 15);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x - 6,
      gameChar_y - 39,
      gameChar_x - 17,
      gameChar_y - 33,
      gameChar_x - 6,
      gameChar_y - 36
    );
  } else if (isRight) {
    // add your walking right code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 13, 20, 20);
    //legs
    ellipse(gameChar_x, gameChar_y, 7, 7);
    ellipse(gameChar_x + 12, gameChar_y - 7, 7, 7);
    //upper body
    ellipse(gameChar_x, gameChar_y - 26, 15, 15);
    //head
    ellipse(gameChar_x, gameChar_y - 40, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x + 4, gameChar_y - 23, 3, 3);
    //eye
    ellipse(gameChar_x + 2, gameChar_y - 42, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x, gameChar_y - 51, gameChar_x - 5, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 49, gameChar_x, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 51, gameChar_x + 5, gameChar_y - 56);
    //arm
    line(gameChar_x, gameChar_y - 27, gameChar_x, gameChar_y - 15);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x + 6,
      gameChar_y - 39,
      gameChar_x + 17,
      gameChar_y - 33,
      gameChar_x + 6,
      gameChar_y - 36
    );
  } else if (isFalling || isPlummeting) {
    // add your jumping facing forwards code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 23, 20, 20);
    //legs
    ellipse(gameChar_x - 7, gameChar_y - 13, 7, 7);
    ellipse(gameChar_x + 7, gameChar_y - 13, 7, 7);
    //upper body
    ellipse(gameChar_x, gameChar_y - 36, 15, 15);
    //head
    ellipse(gameChar_x, gameChar_y - 50, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x, gameChar_y - 33, 3, 3);
    //eyes
    ellipse(gameChar_x - 2, gameChar_y - 52, 2, 2);
    ellipse(gameChar_x + 2, gameChar_y - 52, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x, gameChar_y - 61, gameChar_x - 5, gameChar_y - 66);
    line(gameChar_x, gameChar_y - 59, gameChar_x, gameChar_y - 66);
    line(gameChar_x, gameChar_y - 61, gameChar_x + 5, gameChar_y - 66);
    //arms
    line(gameChar_x - 7, gameChar_y - 37, gameChar_x - 15, gameChar_y - 57);
    line(gameChar_x + 7, gameChar_y - 37, gameChar_x + 15, gameChar_y - 57);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x - 2,
      gameChar_y - 49,
      gameChar_x - 10,
      gameChar_y - 43,
      gameChar_x + 2,
      gameChar_y - 49
    );
  } else {
    // add your standing front facing code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 13, 20, 20);
    //legs
    ellipse(gameChar_x - 5, gameChar_y, 7, 7);
    ellipse(gameChar_x + 5, gameChar_y, 7, 7);
    //upper body
    ellipse(gameChar_x, gameChar_y - 26, 15, 15);
    //head
    ellipse(gameChar_x, gameChar_y - 40, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x, gameChar_y - 23, 3, 3);
    //eyes
    ellipse(gameChar_x - 2, gameChar_y - 42, 2, 2);
    ellipse(gameChar_x + 2, gameChar_y - 42, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x, gameChar_y - 51, gameChar_x - 5, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 49, gameChar_x, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 51, gameChar_x + 5, gameChar_y - 56);
    //arms
    line(gameChar_x - 7, gameChar_y - 27, gameChar_x - 15, gameChar_y - 17);
    line(gameChar_x + 7, gameChar_y - 27, gameChar_x + 15, gameChar_y - 17);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x - 2,
      gameChar_y - 39,
      gameChar_x - 10,
      gameChar_y - 33,
      gameChar_x + 2,
      gameChar_y - 39
    );
  }

  ///////////INTERACTION CODE//////////
  //Put conditional statements to move the game character below here
  if (isLeft == true) {
    var spaceLeft = gameChar_x - (canyon.x_pos + 20)
    var deltaX = gameChar_y <= floorPos_y ? 4 : Math.min(4, spaceLeft)
    gameChar_x -= deltaX;
  }
  if (isRight == true) {
    var spaceRight = (canyon.x_pos + canyon.width - 20) - gameChar_x
    var deltaX = gameChar_y <= floorPos_y ? 4 : Math.min(4, spaceRight)
    gameChar_x += deltaX;
  }
  //jumping
  if (gameChar_y < floorPos_y) {
    gameChar_y += 4;
    isFalling = true;
  } else isFalling = false;
}

function keyPressed() {
  // if statements to control the animation of the character when
  // keys are pressed.
  if (keyCode == 37) {
    isLeft = true;
  }

  if (keyCode == 39) {
    isRight = true;
  }
  if (keyCode == 32 && gameChar_y == floorPos_y) {
    gameChar_y -= 100;
  }
}

function keyReleased() {
  // if statements to control the animation of the character when
  // keys are released.
  if (keyCode == 37) {
    isLeft = false;
  }
  if (keyCode == 39) {
    isRight = false;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>