如何使用p5.js使我的粘贴图跳转？

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