javascript - 游戏没有迭代，不知道为什么

Question

我正在尝试使用纯 JavaScript 制作浏览器游戏。一开始我使用 codesandbox.io 来编写它，但我决定今天已经完成了，需要检查它是否可以在浏览器中运行。瞧，事实并非如此。我真的不知道为什么它不起作用。

所有的代码都应该做的，就是做一个方 block 跳。它确实这样做了，但是就在您放开向上键时，页面挂起，甚至不会刷新。虽然不会使浏览器崩溃。无论如何，这是我的代码。

class player {
  constructor(gameW, gameH) {
    this.gameH = gameH;

    this.width = 50;
    this.heigth = 50;

    this.maxUpV = 5;
    this.currV = 0;
    this.gravConst = 50;

    this.position = {
      x: 50,
      y: 150
    };
  }

  jumpUp() {
    this.currV = -this.maxUpV;
  }
  fall(falling) {
    while (this.position.y < 150) {
      this.currV = this.maxUpV;
    }
    return (falling = false);
  }

  draw(ctx) {
    ctx.fillStyle = "#F00";
    ctx.fillRect(this.position.x, this.position.y, this.width, this.heigth);
  }

  update(deltaTime) {
    if (!deltaTime) {
      return;
    }

    this.position.y += this.currV;

    if (this.position.y + this.heigth > 200) {
      this.position.y = 150;
    }
  }
}

class input {
  constructor(Player) {
    this.falling = false;

    document.addEventListener("keydown", event => {
      if (event.keyCode === 38) {
        if (!Player.fall(this.falling)) {
          Player.jumpUp();
        }
      }
    });

    document.addEventListener("keyup", event => {
      if (event.keyCode === 38) {
        this.falling = true;
        Player.fall(this.falling);
      }
    });
  }
}



const GAME_WIDTH = 800;
const GAME_HEIGHT = 300;

var canvas = document.getElementById("gameScreen");
var ctx = canvas.getContext("2d");

var Player = new player(GAME_WIDTH, GAME_HEIGHT);

ctx.clearRect(0, 0, 800, 300);

ctx.fillRect(0, 200, 800, 200);
ctx.fillRect(400, 100, 50, 1);

Player.draw(ctx);

new input(Player);

var lastTime = 0;

function gameLoop(timeStamp) {
  var deltaTime = timeStamp - lastTime;

  lastTime = timeStamp;

  ctx.clearRect(0, 0, 800, 200);

  Player.update(deltaTime);
  Player.draw(ctx);

  requestAnimationFrame(gameLoop);
}

gameLoop();

哦，还有，当我在 codesandbox.io 中编写它时，这些类是我导入到主 .js 文件中的单独文件。这让我在浏览器中出错，所以我只是将所有内容都放在一个文件中。我尝试了 Vivaldi 和 Firefox，但无济于事。

Answer 1

我最初误读了这个问题。您的代码锁定在您的 fall 函数中。一旦达到最大高度，您就会陷入等待坠落的循环，但永远不会将控制权返回到可能导致坠落的任何地方。我在理解您的最大高度验证时遇到了一些困难。

fall 函数将始终返回 false。

 fall(falling) {
   while (this.position.y < 150) {
     this.currV = this.maxUpV;
   }
   return (falling = false);
 }

赋值的返回值就是赋值，所以在这种情况下你的返回值永远是false

我还必须修改结束按钮按下的逻辑

if (!Player.fall(this.falling)) {
  Player.jumpUp();
}

条件基本上总是返回 true 并且可以简化。

希望对您有所帮助!

class player {
  constructor(gameW, gameH) {
    this.gameH = gameH;

    this.width = 50;
    this.height = 50;

    this.maxUpV = 5;
    this.currV = 0;
    this.gravConst = 50;

    this.position = {
      x: 50,
      y: 150
    };
  }

  jumpUp() {
    this.currV = -this.maxUpV;
  }
  fall(falling) {
    if (this.position.y <150) {
       this.currV = this.maxUpV;
      return true
    }
    return false;
  }

  draw(ctx) {
    ctx.fillStyle = "#F00";
    ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
  }

  update(deltaTime) {
    if (!deltaTime) {
      return;
    }

    this.position.y += this.currV;

    if (this.position.y + this.height > 200) {
      this.position.y = 150;
    }
  }
}

class input {
  constructor(Player) {
    this.falling = false;

    document.addEventListener("keydown", event => {
      if (event.keyCode === 38) {
        if (!this.falling) {
          Player.jumpUp();
        }
      }
    });

    document.addEventListener("keyup", event => {
      if (event.keyCode === 38) {
        this.falling = true;
        this.falling = Player.fall();
      }
    });
  }
}



const GAME_WIDTH = 800;
const GAME_HEIGHT = 300;

var canvas = document.getElementById("gameScreen");
var ctx = canvas.getContext("2d");

var Player = new player(GAME_WIDTH, GAME_HEIGHT);

ctx.clearRect(0, 0, 800, 300);

ctx.fillRect(0, 200, 800, 200);
ctx.fillRect(400, 100, 50, 1);

Player.draw(ctx);

new input(Player);

var lastTime = 0;

function gameLoop(timeStamp) {
  var deltaTime = timeStamp - lastTime;

  lastTime = timeStamp;

  ctx.clearRect(0, 0, 800, 200);

  Player.update(deltaTime);
  Player.draw(ctx);

  requestAnimationFrame(gameLoop);
}

gameLoop();

<canvas id="gameScreen" width=400 height=400></canvas>