我贴在墙上，但只在右边

Question

我目前正在调试我在 p5.js 中制作的游戏，发现我会粘在播放器右侧的墙上，而不是左侧的墙上。我已经尝试调高它检查的像素数，但它看起来不太好，只能使用 5。这是代码：

move(){
  let wallcheckL = get(this.x - 1, this.y);
  let wallcheckR = get(this.x + (this.scale + 1), this.y);
  let wallcheckLB = get(this.x - 1, this.y + this.scale - 5);
  let wallcheckRB = get(this.x + (this.scale + 1), this.y + this.scale - 5);
  
  if(wallcheckL[0] == 0 && wallcheckL[1] == 0 && wallcheckL[2] == 255 ||
     this.x == 0 ||
     wallcheckLB[0] == 0 && wallcheckLB[1] == 0 && wallcheckLB[2] == 255 ||
     wallcheckL[0] == 0 && wallcheckL[1] == 128 && wallcheckL[2] == 0) {
    
    this.wallL = true;
  }
  else{
    this.wallL = false;
  }
  
  if(wallcheckR[0] == 0 && wallcheckR[1] == 0 && wallcheckR[2] == 255 ||
     this.x == 400 - this.scale ||
     wallcheckRB[0] == 0 && wallcheckRB[1] == 0 && wallcheckRB[2] == 255 ||
     wallcheckR[0] == 0 && wallcheckR[1] == 128 && wallcheckR[2] == 0) {

    this.wallR = true;
  }
  else{
    this.wallR = false;
  }
  
  if(this.moveR == true && this.wallR == false){
    this.x += this.speed;
  }
  else if(this.moveL == true && this.wallL == false){
    this.x -= this.speed;
  }
}

这里还有重力：

gravity(){
  let gc = get(this.x, this.y + 21);
  let gc2 = get(this.x + this.scale, this.y + 21);
  if(gc[0] == 0 && gc[1] == 0 && gc[2] == 255 && gc[3] == 255 ||
     this.y >= 400 - this.scale ||
     gc2[0] == 0 && gc2[1] == 0 && gc2[2] == 255 && gc2[3] == 255 ||
     gc[0] == 255 && gc[1] == 255 && gc[2] == 0 && gc[3] == 255 ||
     gc2[0] == 255 && gc2[1] == 255 && gc2[2] == 0 && gc2[3] == 255){

    this.gravSpeed = this.dgrav;
    this.isOnGround = true;
    return;
  }
  else{
    this.y += this.gravSpeed;
    if(this.gravSpeed < this.tv){ 
      this.gravSpeed += this.ac;
    }
    else{
      this.gravSpeed = this.tv;
    }

    this.isOnGround = false;
  }
}

Answer 1

你的主要问题出在重力法上，尤其是这段代码：

if(gc[0] == 0 && gc[1] == 0 && gc[2] == 255 && gc[3] == 255 ||
     this.y >= 400 - this.scale ||
     gc2[0] == 0 && gc2[1] == 0 && gc2[2] == 255 && gc2[3] == 255 ||
     gc[0] == 255 && gc[1] == 255 && gc[2] == 0 && gc[3] == 255 ||
     gc2[0] == 255 && gc2[1] == 255 && gc2[2] == 0 && gc2[3] == 255){

    this.gravSpeed = this.dgrav;
    this.isOnGround = true;
    return;
  }

无论玩家是否真的在地面上，这都会进行评估，这会导致玩家卡在右侧方块上的问题。

解决它的一个潜在方法是实际使用您已经隐藏在该条件下的代码：

if (this.y >= height - this.scale) {
    this.y = height - this.scale; // ensure the player's height is properly constrained
    this.gravSpeed = this.dgrav;
    this.isOnGround = true;
}

这可以防止卡住，因为它不会设置播放器变量 isOnGround = true。

这是一个工作示例：

class player {
  constructor(x, y, scale, grav, ac, speed) {
    this.x = x;
    this.y = y;
    this.dtime = 20;
    this.jumpTimer = 20;
    this.jumpLimit = 12;
    this.jumpedHeight = 0;
    this.jumping = false;
    this.wallR = false;
    this.wallL = false;
    this.moveR = false;
    this.moveL = false;
    this.tv = 10;
    this.dgrav = grav;
    this.ac = ac;
    this.speed = speed;
    this.gravSpeed = grav;
    this.canGravity = true;
    this.isOnGround = false;
    this.scale = scale;
  }

  draw() {
    fill("red");
    rect(this.x, this.y, this.scale, this.scale);
  }

  gravity() {
    let gc = get(this.x, this.y + 21);
    let gc2 = get(this.x + this.scale, this.y + 21);
    if (this.y >= height - this.scale) {
      this.y = height - this.scale;
      this.gravSpeed = this.dgrav;
      this.isOnGround = true;
    } else {
      this.y += this.gravSpeed;
      if (this.gravSpeed < this.tv) {
        this.gravSpeed += this.ac;
      } else {
        this.gravSpeed = this.tv;
      }
      this.isOnGround = false;
    }
  }

  move() {
    let wallcheckL = get(this.x - 1, this.y);
    let wallcheckR = get(this.x + this.scale + 2, this.y);
    let wallcheckLB = get(this.x - 1, this.y + this.scale - 5);
    let wallcheckRB = get(this.x + this.scale + 2, this.y + this.scale - 5);

    if (
      (wallcheckL[0] == 0 && wallcheckL[1] == 0 && wallcheckL[2] == 255) ||
      this.x == 0 ||
      (wallcheckLB[0] == 0 && wallcheckLB[1] == 0 && wallcheckLB[2] == 255) ||
      (wallcheckL[0] == 0 && wallcheckL[1] == 128 && wallcheckL[2] == 0)
    ) {
      this.wallL = true;
    } else {
      this.wallL = false;
    }

    if (
      (wallcheckR[0] == 0 && wallcheckR[1] == 0 && wallcheckR[2] == 255) ||
      this.x >= 400 - this.scale ||
      (wallcheckRB[0] == 0 && wallcheckRB[1] == 0 && wallcheckRB[2] == 255) ||
      (wallcheckR[0] == 0 && wallcheckR[1] == 128 && wallcheckR[2] == 0)
    ) {
      this.wallR = true;
    } else {
      this.wallR = false;
    }

    if (this.moveR == true && this.wallR == false) {
      this.x += this.speed;
    } else if (this.moveL == true && this.wallL == false) {
      this.x -= this.speed;
    }
  }

  jump() {
    let uc = get(this.x, this.y - 2);
    let ucr = get(this.x + this.scale, this.y - 2);
    if (
      uc[0] == 255 &&
      uc[1] == 255 &&
      uc[2] == 0 &&
      ucr[0] == 255 &&
      ucr[1] == 255 &&
      ucr[2] == 0
    ) {
      this.y -= 5;
      this.jumpedHeight += 1;
    } else {
      if (
        (this.jumpedHeight < this.jumpLimit &&
          this.isOnGround == true &&
          uc[0] == 255 &&
          uc[1] == 255 &&
          uc[2] == 255 &&
          ucr[0] == 255 &&
          ucr[1] == 255 &&
          ucr[2] == 255) ||
        (this.jumpedHeight < this.jumpLimit &&
          this.isOnGround == true &&
          uc[0] == 255 &&
          uc[1] == 255 &&
          uc[2] == 0 &&
          ucr[0] == 255 &&
          ucr[1] == 255 &&
          ucr[2] == 0) ||
        (this.jumpedHeight < this.jumpLimit &&
          this.isOnGround == true &&
          uc[0] == 255 &&
          uc[1] == 255 &&
          uc[2] == 0 &&
          ucr[0] == 255 &&
          ucr[1] == 255 &&
          ucr[2] == 255)
      ) {
        this.y -= 5;
        this.jumpedHeight += 1;
      } else {
        this.gravSpeed = this.dgrav;
        this.jumping = false;
      }
    }
  }
}

class ground{
  constructor(x, y, color){
    this.x = x;
    this.color = color;
    this.y = y;
  }
  
  draw(){
    fill(this.color);
    rect(this.x, this.y, 40, 40);
  }
}

var groundArray = [];
groundArray[0] = [0];
groundArray[1] = [0];
groundArray[2] = [0];
groundArray[3] = [0];
groundArray[4] = [0];
groundArray[5] = [0];
groundArray[6] = [1,0,0,0,0,0,0,1];
groundArray[7] = [1,0,0,0,0,0,0,1];
groundArray[8] = [1,0,0,0,0,0,0,1];
groundArray[9] = [1,0,0,0,0,0,0,1];

function setup() {
  noStroke();
  createCanvas(400, 400);
  for(let y = 0; y < groundArray.length; y++){
    for(let x = 0; x < groundArray[y].length; x++){
        if(groundArray[y][x] == 1){
          groundArray[y][x] = new ground(x * 40, y * 40, "blue");
        }
      else if(groundArray[y][x] == 2){
          groundArray[y][x] = new ground(x * 40, y * 40, "yellow");
      }
      else if(groundArray[y][x] == 3){
          groundArray[y][x] = new ground(x * 40, y * 40, "green");
      }
    }
  }
}

var play = new player(200, 0, 20, 3, 0.06, 4);

function draw() {
  background(255);
  for(let y = 0; y < groundArray.length; y++){
    for(let x = 0; x < groundArray[y].length; x++){
        if(groundArray[y][x] != 0){
          groundArray[y][x].draw();
        }
    }
  }
  play.move();
  if(play.jumping == true){
    play.jump();
  }
  else{
    play.gravity();
  }
  play.draw();
}

function keyPressed(){
  if(keyCode == RIGHT_ARROW){
    play.moveL = false;
    play.moveR = true;
  }
  else if(keyCode == LEFT_ARROW){
    play.moveR = false;
    play.moveL = true;
  }
  
  if(keyCode == UP_ARROW){
    play.jumping = true;
  }
}

function keyReleased(){
  if(keyCode == RIGHT_ARROW){
    play.moveR = false;
  }
  if(keyCode == LEFT_ARROW){
    play.moveL = false;
  }
  if(keyCode == UP_ARROW){
    play.jumping = false;
    play.gravSpeed = play.dgrav;
    play.jumpedHeight = 0;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

Answer 2

我已经解决了我的问题。我发现在我的重力脚本中，它检查得太靠右了，它会撞到墙上，所以我把它改成了这个，现在它可以工作了

gravity(){
      let gc = get(this.x, this.y + 21);
  let gc2 = get(this.x + this.scale - 2, this.y + 21);
  if(gc[0] == 0 && gc[1] == 0 && gc[2] == 255 && gc[3] == 255 ||
     this.y >= 400 - this.scale ||
     gc2[0] == 0 && gc2[1] == 0 && gc2[2] == 255 && gc2[3] == 255 ||
     gc[0] == 255 && gc[1] == 255 && gc[2] == 0 && gc[3] == 255 ||
     gc2[0] == 255 && gc2[1] == 255 && gc2[2] == 0 && gc2[3] == 255){

    this.gravSpeed = this.dgrav;
    this.isOnGround = true;
    return;
  }
  else{
    this.y += this.gravSpeed;
    if(this.gravSpeed < this.tv){ 
      this.gravSpeed += this.ac;
    }
    else{
      this.gravSpeed = this.tv;
    }

    this.isOnGround = false;
  }
  }

我贴在墙上，但只在右边

I am sticking to the walls but only on the right

javascript

p5.js