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

Question

edit: solved it myself, pretty sure it's not the ideal way to do it (:D ) but it works for now:P

solution:

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

I'm trying to make a "roguelike" game for practice in canvas and I have ran into some trouble.

What I would like to do:

I would like to implement a "turn" system to my game loop, so that it only runs when the turn event happens.

Here is some code so you can see what I'm talking about:

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

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

So right now, I can start the game, generate the map, I have the player and I can move him. The thing that bugs me, is that the "draw()" function is running in a loop, all the time.

What would be the correct way to re-draw the game, or player, only when the turn event is triggered?

Hope I didn't confuse you, thanks !

Answer 1

You could use something similar to this. You can change the state of the isTurn boolean in your turn event and use an if within the gameLoop to check its value and stop the loop.

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