Canvas开发Roguelike游戏：仅在按键触发回合时更新draw()函数

嘿，你的临时方案确实能让游戏跑起来，但持续的requestAnimationFrame循环完全没必要——毕竟回合制游戏只需要在玩家操作、敌人行动这类回合事件发生后才重绘画面就行。咱们来一步步调整代码，实现更高效的按需重绘：

问题根源 #

你当前的gameLoop通过递归调用requestAnimationFrame，一直在不断执行draw()，这就是画面持续刷新的核心原因。我们需要把这个持续循环改成仅在需要时触发单次重绘。

具体修改步骤 #

1. 重构index.js：停止持续循环，按需触发重绘

把原来的递归gameLoop改成单次执行的重绘函数，并且只在回合事件触发时调用它：

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 game = new Game(GAME_WIDTH, GAME_HEIGHT); 
game.start(); 

// 修改为单次重绘函数，不再递归调用requestAnimationFrame
function renderFrame() { 
  ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT); 
  game.draw(ctx); 
}

// 初始绘制游戏画面（不然启动后可能看不到初始地图和角色）
renderFrame();

// 按键事件：处理回合逻辑 + 触发重绘
document.addEventListener('keydown', e => { 
  switch (e.keyCode) { 
    case 37: // 左
    case 39: // 右
    case 40: // 下
    case 38: // 上
      // 切换回合状态
      game.toggleTurn();
      // 必须加上update：回合制中每次操作后需要更新游戏状态（比如角色移动）
      game.update(); 
      // 触发一次重绘，展示更新后的状态
      renderFrame(); 
      break; 
  } 
});

2. 完善game.js：补全回合制的状态更新逻辑

你的update()方法目前是空的，回合制游戏里每次操作后需要更新游戏对象的状态（比如玩家移动、敌人行动），可以这样完善：

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; 
    this.isPlayerTurn = true; // 新增：标记当前回合归属
    new InputHandler(this.player, this); 
  } 

  start() { 
    this.walls = buildLevel(this, this.levels[this.currentLevel]); 
    this.gameObjects = [this.player]; 
  } 

  // 完善update方法：处理游戏状态更新
  update() { 
    // 更新所有游戏对象的状态（比如玩家位置）
    this.gameObjects.forEach(obj => {
      if (obj.update) obj.update();
    });

    // 如果切换到敌人回合，可以在这里处理敌人的AI行动
    if (!this.isPlayerTurn) {
      // 示例：敌人移动逻辑（根据你的需求扩展）
      // this.enemies.forEach(enemy => enemy.move());
      // 敌人行动完成后切回玩家回合
      this.isPlayerTurn = true;
      // 敌人行动后也要触发一次重绘，展示敌人移动后的状态
      // renderFrame(); // 注意：需要把renderFrame暴露到全局，或者通过回调传递
    }
  } 

  // 完善toggleTurn方法：明确回合切换逻辑
  toggleTurn() {
    this.isPlayerTurn = !this.isPlayerTurn;
  }

  draw(ctx) { 
    [...this.gameObjects, ...this.walls].forEach(object => object.draw(ctx)); 
  } 
}

为什么这是更优的方案？ #

• 性能更高效：不再持续占用GPU资源刷新画面，只有当游戏状态变化时才重绘
• 逻辑更清晰：回合事件（输入、AI行动）和重绘逻辑解耦，代码更容易维护和扩展
• 扩展性更强：后续添加敌人回合、技能动画等功能时，只需要在对应事件后触发renderFrame()即可

额外注意点 #

如果你的游戏需要过渡动画（比如角色移动的平滑动画），那可以在动画期间临时启动requestAnimationFrame循环，动画结束后再回到等待输入的状态——但纯回合制无动画的场景下，单次重绘就完全足够。

内容的提问来源于stack exchange，提问作者user12146567