JS / Canvas - How do I update the draw() function only when key is pressed?

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 !

Maybe add a variable to track the state and wrap your draw in an `if` — Brett Gregson, Nov 29 '19 at 09:22

Floppy52 · Answer 1 · 2019-11-29T09:53:52.363

0

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

edited Nov 29 '19 at 09:53

answered Nov 29 '19 at 09:33

Floppy52

184
9

Thank you for the reply ! I have already tried this, the problem is once the loop is executed, it just keeps running forever. – Nov 29 '19 at 09:40
Still the same result, console.log("draw") keeps printing in the console non-stop – Nov 29 '19 at 10:20

JS / Canvas - How do I update the draw() function only when key is pressed?

1 Answers1