where should I put the gravity code to make my character jump?-CodePudding

I need help, on how to make my character jump I don't understand the code at all. this is what I've done so far. I'm using p5.js, im very new at this.

//Jumping facing forwards
stroke(100);
noFill();
rect(220, 60, 50, 80);
noStroke();
fill(0);
text("2. jumping facing forwards", 220, 160);

gameChar_x = 245;
gameChar_y = 137;
//Add your code here ...

fill(255,102,179)
rect(gameChar_x-10,gameChar_y-55, 20,20)
fill(153,77,0)
ellipse(gameChar_x,gameChar_y-62,20,20)
fill(255,255,255)
ellipse(gameChar_x- 5,gameChar_y-62, 5,5)
fill(64,25,255)
ellipse(gameChar_x,gameChar_y-62, 5,5)

CodePudding user response：

Ok, first I'm going to make your code look a little nicer. Here's my baseline:

let gameChar_x, gameChar_y;

function setup() {
  createCanvas(400, 400);

  gameChar_x = 245;
  gameChar_y = 137;
}

function draw() {
  clear();
  drawBox();

  drawGameChar(gameChar_x, gameChar_y);
}

function drawBox() {
  //Jumping facing forwards
  stroke(100);
  noFill();
  rect(220, 60, 50, 80);
  noStroke();
  fill(0);
  text("2. jumping facing forwards", 220, 160);
}

function drawGameChar(x, y) {
  fill(255, 102, 179);
  rect(x - 10, y - 55, 20, 20);
  fill(153, 77, 0);
  ellipse(x, y - 62, 20, 20);
  fill(255, 255, 255);
  ellipse(x - 5, y - 62, 5, 5);
  fill(64, 25, 255);
  ellipse(x, y - 62, 5, 5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Nothing too crazy, just putting stuff into functions.

Now, here's the gravity part: in the real world people accelerate as they fall, so we want to keep track of the character's velocity. In every frame, we will increase the velocity if the character is above the ground. If the character is on the ground, then velocity should be zero. I'll keep track of velocity in the variable gravity_vel.

In addition to increasing velocity, we also need to change the character's position by the velocity. In this case, we need to increase gameChar_x.

Here's the code I came up with:

let gameChar_x, gameChar_y;
let gravity_vel;

function setup() {
  createCanvas(400, 400);

  gameChar_x = 245;
  gameChar_y = 137;
  gravity_vel = 0;
}

function draw() {
  clear();
  drawBox();

  if (gameChar_y < height) gravity_vel  ;
  else gravity_vel = 0;
  gameChar_y  = gravity_vel;

  drawGameChar(gameChar_x, gameChar_y);
}

function drawBox() {
  //Jumping facing forwards
  stroke(100);
  noFill();
  rect(220, 60, 50, 80);
  noStroke();
  fill(0);
  text("2. jumping facing forwards", 220, 160);
}

function drawGameChar(x, y) {
  fill(255, 102, 179)
  rect(x - 10, y - 55, 20, 20)
  fill(153, 77, 0)
  ellipse(x, y - 62, 20, 20)
  fill(255, 255, 255)
  ellipse(x - 5, y - 62, 5, 5)
  fill(64, 25, 255)
  ellipse(x, y - 62, 5, 5)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Note: you may need to scroll down in the snippet to see the bottom of the page. If you copy-paste this code into the p5.js editor, it should work perfectly.