我如何讓我的角色不是 go 到 p5js 中的空格

Question

當我運行我的代碼時，當我在鍵盤上按 a 時由於某種原因跳轉時，我的字符（紫色矩形）進入空間這是代碼：

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

我希望我的玩家跳躍並向左移動，但出於某種原因 p5js 拒絕並且沒有解釋它進入太空的方式。 我嘗試添加更多代碼，但它仍然進入空格，但是當我在按下 a 后按下另一個鍵時，字符會下降

Answer 1

您的代碼中有幾處我會更改，但對於跳躍，這是我的建議：

在跳躍過程中改變速度。 當你在現實生活中跳躍時，重力會不斷降低你的（垂直）速度，直到你撞到地面。 在這種情況下，你想做同樣的事情：當你第一次跳躍時，將垂直速度設置為某個值。 直到你碰到一個表面，繼續減少速度的值（甚至到負數）。

Answer 2

基本上只是將@jstl 建議的內容翻譯成代碼，對播放器 position 應用垂直速度，如下所示：

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