如何使用 p5.js 使我的 Stickfigure 跳躍？

Question

我剛剛在學校學習 JavaScript，我們需要為作業構建一個游戲。 我開始畫我的主角，讓他左右走動。 現在，我想讓我的主角每次按空格鍵時跳躍。 由於我很新，在網上找不到任何東西，我想我可以在這里拍攝。 這是我到目前為止所擁有的：

chX = 100;
chY = 250;

function setup() {
    createCanvas(800,400);
  }
  
  function draw() {
    background("#0c3c5e");
    noStroke();
    fill("#466D1D");
    rect(0,300,800,100);
    mainCharacter(chX,chY);
    if(keyDown('LEFT_ARROW')){
        chX = chX - 1;
    }
    if(keyDown('RIGHT_ARROW')){
        chX = chX + 1;
    }

    
  }

  function mainCharacter(chX, chY){

    fill(255);
    stroke(0);
    rectMode(CENTER);
    rect(chX, chY + 49, 20, 50); //lichaam
    circle(chX, chY, 50); //hoofd
    line(chX - 30, chY + 20, chX - 10, chY + 40); //arm links
    line(chX + 10, chY + 40, chX + 30, chY + 20); //arm rechts
    line(chX - 10, chY + 75, chX - 10, chY + 115); //been links
    line(chX - 10, chY + 75, chX - 10, chY + 115); //been rechts
    line(chX + 10, chY + 75, chX + 10, chY + 115); //been rechts
    strokeWeight(5);
    point(chX - 10, chY);
    point(chX + 10, chY);
  } 

有人可以解釋我如何讓'mainCharacter'跳轉嗎？ 或者參考一個有一些解釋的網站？ 先感謝您！

Answer 1

好吧，這可能是最簡單的方法：數字基本上是隨機的，這也是一個圓圈，因為它更容易一些

let x = 300, y = 200, groundY = 300
let yVel = 0, gravity = 5

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

function draw() {
  background(20);
  
  if(y + 10 <= 300){ // if player.y + player.height < ground (if player is in the air)
    y += gravity     //                      radius*
  }
  
  y += yVel // y velocity
  yVel /= 1.2
  
  
  strokeWeight(16); stroke('lime')
  point(x, y)                        // the player
  
  strokeWeight(4); stroke('gold')
  line(0, groundY, width, groundY)   // the ground
}


function keyPressed(){ // only once on press of space bar (space bar in ascii is 32)
  if(y + 10 >= 300)
    if(keyCode == 32) // you could use && here
      yVel = -25
}

跳躍基本上只是：

• 檢查是否按下了空格鍵

• 檢查玩家是否在空中

• 給玩家一些向上的速度*在這里“向下”*

• 如果玩家還在空中

• 繼續施加一些重力

• 不斷降低玩家的速度

您也可以進行加速以使一切更順暢，但是代碼要多一些，太棒了，應該只是：

position += velocity
velocity += acceleration