объект не останавливается на месте после прыжка javascript

#javascript #p5.js

Вопрос:

У меня проблема с моим игровым персонажем. Он предполагает прыжок и падение на землю, нажав пробел, и падение в каньон, если над ним. Но если ему удастся перепрыгнуть через каньон, он должен приземлиться на землю. К сожалению, мой игровой персонаж оказывается глубоко под землей после прыжка над каньоном. Я не могу понять, почему.

 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 gt; canyon.x_pos amp;amp;  gameChar_x lt; canyon.x_pos   canyon.width amp;amp;  gameChar_y gt;= 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) lt; 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 amp;amp; 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 amp;amp; 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 lt; 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 amp;amp; 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;  } } 
 lt;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"gt;lt;/scriptgt; 

Ответ №1:

Проблема, похоже, в том, что вашему персонажу разрешено перемещаться по сторонам вашего каньона. Вы не проверяете наличие столкновения со стеной перед добавлением или вычитанием ее положения x.

Я добавил проверку стен в ваш код взаимодействия:

 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 gt; canyon.x_pos amp;amp;  gameChar_x lt; canyon.x_pos   canyon.width amp;amp;  gameChar_y gt;= 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) lt; 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 amp;amp; 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 amp;amp; 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 lt;= 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 lt;= floorPos_y ? 4 : Math.min(4, spaceRight)  gameChar_x  = deltaX;  }  //jumping  if (gameChar_y lt; 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 amp;amp; 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;  } } 
 lt;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"gt;lt;/scriptgt;