CODEWITHSUNDEEP
javascript2dp5.js
Cameron Butcher
Cameron Butcher

Reputation: 17

How do i make my character not go to space in p5js

When I run my code I when I jump for some reason when I press a on the keyboard my character(the purple rectangle) goes into space Here is the code:

//Global

//Game control

var stage = 0; // keeps track of which function to run

//Player

var p1X = 400; // p1 for player one
var p1Y = 375;
var pWidth = 30;
var pHeight = 70;

//Boxes (Platforms)
var b1X = 200; // b1 for box one
var b1Y = 300;
var bWidth = 200;
var bHeight = 40;

//Gravity
var jump = false; //are we jumping?
var direction = 1;
var velocity = 2;
var jumpPower = 10;
var fallingSpeed = 2;
var minHeight = 375;


//Setup
function setup() {
  createCanvas(800, 500);
  rectMode(CENTER);
  textAlign(CENTER);
}
//Close setup

//Draw
function draw() {
  //Call functions
  if (stage == 0) {
    game();
  } //Close = 0
  keyPressed();
  gravity();
}
//Close draw


//////////Game
function game() {
  //apperence of game
  background(150, 230, 240); //Sky blue
  //grass
  noStroke();
  fill(100, 200, 75); //green
  rect(width / 2, 450, width, 100);
  //window frame
  noFill();
  stroke(0);
  strokeWeight(15);
  rect(width / 2, height / 2, width, height);

  //Draw box
  stroke(0);
  strokeWeight(5);
  fill(255, 120, 0); //Orange
  rect(b1X, b1Y, bWidth, bHeight);

  //Draw Character
  stroke(0);
  fill(150, 0, 170); //Purple
  rect(p1X, p1Y, pWidth, pHeight);

} //Close game

function gravity() {
  if (p1Y >= minHeight && jump == false) {
    p1Y = p1Y;
  } else {
    p1Y = p1Y + (direction * velocity);
  }

  if (jump == true) {
    velocity = -jumpPower;
  } else {
    velocity = fallingSpeed;

  }
}

function keyPressed() {
  if (keyIsDown(LEFT_ARROW)) {
    p1X = p1X - 5; //Move Left
  } //Close Left

  if (keyIsDown(RIGHT_ARROW)) {
    p1X = p1X + 5; //Move Right
    if (keyIsDown(UP_ARROW)) {
      jump = true;
    }
  } //close keypressed
}

function keyTyped() {
  if (keyIsDown(65)) {
    jump = true;
  } else {
    jump = false;
  }
}
canvas {
  /* make the canvas fit in the tiny StackOverflow snippet iframe */
  transform-origin: top left;
  transform: scale(0.35);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>

I want my player to jump and move left that's all but for some reason p5js says no and doesn't explain way it goes to space. I tried to add some more code but it still went to space but when I press another key after pressing a the character comes down

Upvotes: 1

Views: 175

Answers (2)

Paul Wheeler
Paul Wheeler

Reputation: 20150

Basically just translating what @jstl suggested into code, apply vertical velocity to the player position for each frame like so:

function gravity() {
  let newTime = millis();
  let timeDeltaSeconds = (newTime - time) / 1000;
  time = newTime;
  p1Y += velocity * timeDeltaSeconds * pixelsPerMeter;
  
  // ...
}

And update velocity based on acceleration due to gravity like so:

function gravity() {
  // ...

  if (p1Y >= minHeight) {
    // Impact with the ground, zero out velocity.
    velocity = 0;
    p1Y = minHeight;
  }
  
  if (p1Y < minHeight) {
    velocity -= gravityAccel * timeDeltaSeconds;
  }
}

With this in place "jumping" is just applying a sudden impulsive increase to velocity:

function keyTyped() {
  if (keyIsDown(65) && p1Y == minHeight) {
    // only "jump" when we're actually touching the ground.
    velocity = jumpPower;
  }
}

Here's a runnable example:

//Global

//Game control

let stage = 0; // keeps track of which function to run

//Player

let p1X = 400; // p1 for player one
let p1Y = 375;
let pWidth = 30;
let pHeight = 70;

//Boxes (Platforms)
const b1X = 200; // b1 for box one
const b1Y = 300;
const bWidth = 200;
const bHeight = 40;

//Gravity
// vertical velocity
let velocity = 0;
const jumpPower = 17;
// I'm not sure why but the real value for acceleration due to gravity (9.8)
// just doesn't look right.
const gravityAccel = 28;

// Player will be impacting the ground
const minHeight = 375;

// Number of pixels to move for every meter. Note that this is negative
// since the Y axis goes from 0 at the top to height at the bottom, so
// when we have a positive vertical velocity we want to decrease the y
// value.
const pixelsPerMeter = -30;

let time;

//Setup
function setup() {
  createCanvas(800, 500);
  rectMode(CENTER);
  textAlign(CENTER);
  time = millis();
}
//Close setup

//Draw
function draw() {
  //Call functions
  if (stage == 0) {
    game();
  } //Close = 0
  movement();
  gravity();
}
//Close draw


//////////Game
function game() {
  //apperence of game
  background(150, 230, 240); //Sky blue
  //grass
  noStroke();
  fill(100, 200, 75); //green
  rect(width / 2, 450, width, 100);
  //window frame
  noFill();
  stroke(0);
  strokeWeight(15);
  rect(width / 2, height / 2, width, height);

  //Draw box
  stroke(0);
  strokeWeight(5);
  fill(255, 120, 0); //Orange
  rect(b1X, b1Y, bWidth, bHeight);

  //Draw Character
  stroke(0);
  fill(150, 0, 170); //Purple
  rect(p1X, p1Y, pWidth, pHeight);

} //Close game

function gravity() {
  let newTime = millis();
  let timeDeltaSeconds = (newTime - time) / 1000;
  time = newTime;
  p1Y += velocity * timeDeltaSeconds * pixelsPerMeter;
  if (p1Y >= minHeight) {
    // Impact with the ground.
    velocity = 0;
    p1Y = minHeight;
  }
  
  if (p1Y < minHeight) {
    velocity -= gravityAccel * timeDeltaSeconds;
  }
}

function movement() {
  if (keyIsDown(LEFT_ARROW)) {
    p1X = p1X - 5; //Move Left
  } //Close Left

  if (keyIsDown(RIGHT_ARROW)) {
    p1X = p1X + 5; //Move Right
  } //close keypressed
}

function keyTyped() {
  if (keyIsDown(65) && p1Y == minHeight) {
    // only "jump" when we're actually touching the ground.
    velocity = jumpPower;
  }
}
canvas {
  /* make the canvas fit in the tiny StackOverflow snippet iframe */
  transform-origin: top left;
  transform: scale(0.35);
}
body {
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>

Upvotes: 2

Jacob Stuligross
Jacob Stuligross

Reputation: 1479

There are a few things in your code that I would change, but for jumping, here's my suggestion:

Change the velocity during the jump. When you jump in real life, gravity will constantly reduce your (vertical) velocity until you hit the ground. In this situation, you want to do the same thing: when you first jump, set the vertical velocity to a certain value. Until you hit a surface, continue to reduce the value of velocity (even to negative numbers).

Upvotes: 2

Related Questions