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

Posted 2023-03-10

【中文标题】JS / Canvas - 如何仅在按下键时更新 draw() 函数？

【英文标题】：JS / Canvas - How do I update the draw() function only when key is pressed?

【发布时间】：2019-11-29 09:14:25

【问题描述】：

编辑：我自己解决了，很确定这不是理想的方法（：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”游戏以在画布上进行练习，但遇到了一些麻烦。

我想做什么：

我想在我的游戏循环中实现一个“转向”系统，以便它只在转向事件发生时运行。

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

我的 index.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);

我的game.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()”函数一直在循环运行。

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

希望我没有把你弄糊涂，谢谢！

【问题讨论】：

也许添加一个变量来跟踪状态并将你的平局包装在if

【参考方案1】：

你可以使用类似的东西。您可以在回合事件中更改 isTurn 布尔值的状态，并在游戏循环中使用 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);

【讨论】：

感谢您的回复！我已经试过了，问题是一旦循环执行，它就会一直运行下去。

还是一样的结果，console.log("draw") 不停的在控制台打印