JS / Canvas - 如何仅在按下键时更新 draw() 函数?

Question

edit ：自己解决了，很确定这不是理想的方法(:D(，但它现在:P

溶液：

document.addEventListener('keydown', e => {
switch (e.keyCode) {
case 37:
game.toggleTurn();
gameLoop();
break;
case 39:
game.toggleTurn();
gameLoop();
break;
case 40:
game.toggleTurn();
gameLoop();
break;
case 38:
game.toggleTurn();
gameLoop();
break;
}
});

我正在尝试制作一个"Roguelike"游戏用于画布练习，但我遇到了一些麻烦。

我想做什么：

我想在我的游戏循环中实现一个"回合"系统，以便它仅在回合事件发生时运行。

这里有一些代码，所以你可以看到我在说什么：

我的索引.js

let canvas = document.getElementById('gameScreen');
let ctx = canvas.getContext('2d');
const GAME_WIDTH = 1024;
const GAME_HEIGHT = 1024;
ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
let lastTime = 0;
let game = new Game(GAME_WIDTH, GAME_HEIGHT);
game.start();
function gameLoop() {
ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
game.draw(ctx);
requestAnimationFrame(gameLoop);
}
requestAnimationFrame(gameLoop);

我的游戏.js：

import Player from './player.js';
import InputHandler from './input.js';
import { buildLevel, map1 } from './levels.js';
export default class Game {
constructor(gameWidth, gameHeight) {
this.gameWidth = gameWidth;
this.gameHeight = gameHeight;
this.player = new Player(this);
this.gameObjects = [];
this.walls = [];
this.levels = [map1];
this.currentLevel = 0;
new InputHandler(this.player, this);
}
start() {
this.walls = buildLevel(this, this.levels[this.currentLevel]);
console.log('yes');
this.gameObjects = [this.player];
}
update(deltaTime) {
console.log('update');
}
draw(ctx) {
console.log('draw');
[...this.gameObjects, ...this.walls].forEach(object => object.draw(ctx));
}
}

所以现在，我可以开始游戏，生成地图，我有玩家，我可以移动他。 让我烦恼的是"draw(("函数一直在循环中运行。

只有在触发回合事件时，重新绘制游戏或玩家的正确方法是什么？

希望我没有混淆你，谢谢！

Answer 1

你可以使用类似的东西。您可以在轮次事件中更改isTurn布尔值的状态，并使用 gameLoop 中的if来检查其值并停止循环。

var isTurn = true;
function pauseGame() {
isTurn = !isTurn;
if (!isTurn) gameLoop();
}
function gameLoop() {
if (isTurn) return;
ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
game.draw(ctx);
requestAnimationFrame(gameLoop);
}