碰撞删除了 P5.js 中的跳跃功能

问题描述 投票:0回答:1

我制作了一个平台游戏并尝试添加碰撞,但我的代码由于某种原因无法工作,我无法再跳跃我尝试重做代码:这里是 PS我是P5新手

//game control ***(not used rn)***
let level = 0;
//gravity
let minHeight = 375
let direction = 1;
let vel = 2;
let jumpPower = 10;
let fallingSpeed = 1;

//player setup and whatnot
let playerX = 400;
let playerY = 370

let playerWidth = 30;
let playerHeight = 70;

//platform
let platX = 200;
let platY = 300;
let platWidth = 200;
let platHeight = 40;

function setup() {
  createCanvas(800, 500);
  rectMode(CENTER);
  textAlign(CENTER);
}
function gravityControl(){
if (keyIsDown(32)){
  jump = true
}else{
  jump = false
}
}
function draw() {
  background(220);
  movement();
  gravityControl()
  gravity()

  if (level == 0) {
    game();
  }
}

function game() {
  background(150, 230, 240);

  //floor
  noStroke();
  fill("green");
  rect(width / 2, 450, width, 100);

  //platform
  stroke(0);
  strokeWeight(4);
  fill("rgb(218,218,138)");
  rect(platX, platY, platWidth, platHeight);

  //player
  noStroke();
  fill("red");
  rect(playerX, playerY, playerWidth, playerHeight);
  
  
  
  //collisions
  if (playerX >= platX -platWidth/2 && playerX <= playerX+platWidth/2 && playerY >= platY-platHeight/2 &&playerY<=platY+platHeight/2)
    playerY = playerY
    vel = 0
}

function movement() {
  if (keyIsDown(LEFT_ARROW)) {
    playerX -= 3;
  }
  if(keyIsDown(RIGHT_ARROW) )
    playerX += 3
}
function mousePressed() {
  fullscreen(true);
}

function gravity(){
  if (playerY >= minHeight && jump == false){
    if(playerY >= minHeight){
      playerY = minHeight
    }else{
      vel = fallingSpeed
    }
    playerY = playerY +0
    
  }
  else{
    playerY = playerY + (direction * vel)
  }
  if (jump == true){
    vel = -jumpPower
  }else{
    vel = fallingSpeed
  }
  
}
function gravityControl(){
if (keyIsDown(32)){
  jump = true
}
  else{
  jump = false
  }
}

我尝试删除导致冲突发生的代码,并且成功了。我将不胜感激任何帮助。我正在关注 Youtube 上的教程,我们有相同的代码。我预计它会在实现碰撞后跳跃,但事实并非如此 YT链接:https://www.youtube.com/watch?v=StoBCNiQakM&list=PLBDInqUM5B26FjwMMZqGDxqQr1kX5V9Ul&index=3

javascript p5.js
1个回答
0
投票

这是代码的一个版本,经过一些细微的更改,修复了跳转功能。我假设您希望能够在平台顶部着陆/行走,所以我的版本允许您这样做。有关具体更改的详细信息,请参阅代码中的注释。

特别注意,在你的碰撞情况下,有必要分别测试两种可能性(从上面和从下面与平台碰撞)。

同样相关:P5.js

constrain
函数,可以在此处找到其文档:https://p5js.org/reference/#/p5/constrain


我在 P5.js 编辑器中测试了新代码:https://editor.p5js.org,它似乎达到了你的预期。

新(工作)代码:

//game control ***(not used rn)***
let level = 0;
//gravity
let minHeight = 375;
let direction = 1;
let vel = 2;
let jumpPower = 10;
let fallingSpeed = 1;
let onPlatform = false; // NEW: check for whether the player is standing on a platform

//player setup and whatnot
let playerX = 400;
let playerY = 370;

let playerWidth = 30;
let playerHeight = 70;

//platform
let platX = 200;
let platY = 300;
let platWidth = 200;
let platHeight = 40;

        
function setup() {
    createCanvas(800, 500);
    rectMode(CENTER);
    textAlign(CENTER);
}
        
function gravityControl() {
    if (keyIsDown(32)) { // keycode 32 = spacebar
        jump = true;
    } else {
        jump = false;
    }
}
function draw() {
    background(220);
    movement();
    gravityControl();
    gravity();

    if (level == 0) {
        game();
    }
}

function game() {
    background(150, 230, 240);

    //floor
    noStroke();
    fill(0, 255, 0);
    rect(width / 2, 450, width, 100);

    //platform
    stroke(0);
    strokeWeight(4);
    fill(218,218,138);
    rect(platX, platY, platWidth, platHeight);

    //player
    noStroke();
    fill(255, 0, 0);
    rect(playerX, playerY, playerWidth, playerHeight);
  
    onPlatform = false; // This new boolean defaults to false unless the correct condition (see below) evaluates to true
          
    //collisions (Added parentheses around each separate condition, and around mathematical expressions within each condition, for more readability)
    // (Player y coordinate - half of player's height) = player's head: check for collisions with BOTTOM of platform
    // (Player y coordinate + half of player's height) = player's feet: check for collisions with TOP of platform
    if ((playerX >= (platX - platWidth/2)) && (playerX <= (platX + platWidth/2))) {
        /* It looks like you're attempting to keep the player's y coordinate from changing once you hit the platform. However, just assigning the variable to itself won't accomplish this. */
        //playerY = playerY; // This line does nothing: removed it
        
        // Instead, you'll need the constrain() function: https://p5js.org/reference/#/p5/constrain
      
        // If the player rectangle is BELOW the platform, constrain it not to rise any higher
        if (((playerY - playerHeight/2) >= (platY - platHeight/2))) {
            playerY = constrain(playerY, platY + platHeight/2 + playerHeight/2, height);
        }
      
        // If the player rectangle is ABOVE the platform, constrain it not to drop any lower
        else if (((playerY + playerHeight/2) <= (platY + platHeight/2))) {
            playerY = constrain(playerY, 0, platY - platHeight/2 - playerHeight/2);
            if (playerY + playerHeight/2 >= platY - platHeight/2) {
                onPlatform = true; // Don't drop through the platform; stand on it like a solid surface
            }
        }
    }
}

function movement() {
    if (keyIsDown(LEFT_ARROW)) {
        playerX -= 3;
    }
    if(keyIsDown(RIGHT_ARROW)) {
        playerX += 3;
    }
}

/*
function mousePressed() {
    fullscreen(true);
}
*/

function gravity() {
    if (playerY >= minHeight && jump == false) {
        if (playerY > minHeight) {
            playerY = minHeight;
        } //else { // This condition is unnecessary: inside the outer "if" statement, since you've already checked whether playerY is >= minHeight, it can't possibly be less than minHeight
            //vel = fallingSpeed;
        //}
        //playerY = playerY + 0; This doesn't do anything: adding 0 to a number doesn't change it
    }
    else {
        playerY = playerY + (direction * vel);
    }
    if (jump == true){
        vel = -jumpPower;
    } else if (!onPlatform) {
        vel = fallingSpeed;
    } else {
        vel = 0;
    }
}
        
function gravityControl() {
    if (keyIsDown(32)) {
        jump = true;
    }
    else {
        jump = false;
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.