我如何让我的角色在 p5js 中不去 space

Question

当我运行我的代码时，当我在键盘上按 a 时出于某种原因跳转，我的角色（紫色矩形）进入 space 这是代码：

//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 Whosebug 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>

我希望我的播放器跳跃并向左移动，仅此而已，但出于某种原因，p5js 说不，也没有解释它到达 space 的方式。我尝试添加更多代码，但它仍然转到 space 但是当我在按下 a 后按下另一个键时，字符下降

Answer 1

我会更改您的代码中的一些内容，但对于跳转，这是我的建议：

改变跳跃时的速度。当你在现实生活中跳跃时，重力会不断降低你的（垂直）速度，直到你撞到地面。在这种情况下，您想做同样的事情：当您第一次跳跃时，将垂直速度设置为某个值。直到你撞到一个表面，继续降低速度值（甚至是负数）。

Answer 2

基本上只是将@jstl 建议的内容翻译成代码，将垂直速度应用于每一帧的玩家位置，如下所示：

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

并根据重力加速度更新速度，如下所示：

function gravity() {
  // ...

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

有了这个，“跳跃”只是对velocity施加突然的冲动增加：

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

这是一个可运行的例子：

//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 Whosebug 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>

我如何让我的角色在 p5js 中不去 space

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

javascript

2d

p5.js