时间戳

首页 > 解决方案 > JS / Canvas - 如何仅在按下键时更新 draw() 函数？

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

问题描述

编辑：我自己解决了，很确定这不是理想的方法（：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);

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

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

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

标签： javascriptloopscanvasgame-loop

解决方案

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

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);
}

推荐阅读