Квадрат меняет скорость за раз

Question

Итак, я новичок в создании игр на JS, и я следовал инструкциям книг и некоторым вопросам с этого сайта. Мне удалось сделать простой HTML-сайт холста, который имеет небольшой квадрат. У меня есть площадь, чтобы не иметь возможности покинуть границы.

Но моя проблема в том, что мой квадрат увеличивает скорость после небольшого тестирования, поэтому он идет от нажатия стрелки вправо в 8 раз, например, до перехода слева направо в 4 раза. Я искал в Google, пытаясь найти ответ безрезультатно.

Вот моя JS Fiddle (я видел, как люди используют это здесь, так что, наверное, я тоже);

Квадрат не появляется в скрипке (не знаю почему), но когда я втыкаю его в веб-шторм, он, кажется, работает при загрузке в Google Chrome.

Заранее спасибо.

В нем говорится, что мне нужно сопроводить материал jsfille каким-то кодом, так что вот начало моего jsfiddle.

var Game = {
    canvas : undefined,
    canvasContext : undefined,
    rectanglePositionX : 50,
    rectanglePositionY: 50,

};

Answer 1

Причину, по которой квадрат реагирует хаотично, можно найти в функции Game.update(). Так как вы добавляете слушателя в функцию, которая вызывается 60 раз в секунду, он добавляет этого слушателя каждый раз, поэтому позиция была изменена только на 1/1000 от действительного расстояния. Кажется, вы хотите, чтобы квадрат переехать. Это можно исправить, настроив прослушиватель событий только один раз, вне игрового цикла, поскольку он вызывается повторно.

Вот рабочий фрагмент с кодом из вашей скрипки (не уверен, что с этим не работает), где я полностью отбросил функцию Game.update() и поместил всю логику из этого в слушатель событий. Положение прямоугольника теперь будет устанавливаться только один раз при нажатии клавиши со стрелкой, хотя функция будет запускаться при каждом нажатии любой клавиши. Поскольку игровой цикл постоянно перерисовывает холст, изменения появляются каждый раз.

В качестве альтернативы, вы также можете визуализировать и нарисовать холст в прослушивателе событий (я написал их там и прокомментировал), вместо того, чтобы перестраивать его внутри рекурсивного setTimeout, но я не уверен, какая у вас другая игровая логика ищу реализацию, а может вам это нужно. Но в целях демонстрации попробуйте закомментировать вызов Game.mainLoop() внутри Game.start() и раскомментируйте методы в нижней части слушателя keydown.

Надеюсь, это поможет вам.

var Game = {
  canvas: undefined,
  canvasContext: undefined,
  rectanglePositionX: 50,
  rectanglePositionY: 50,
};

Game.start = function() {
  Game.canvas = document.getElementById("myCanvas");
  Game.canvasContext = Game.canvas.getContext("2d");
  // comment this out to instead invoke the clearCanvas and draw methods inside the listener:
  Game.mainLoop();
};

Game.clearCanvas = function() {
  Game.canvasContext.clearRect(0, 0, Game.canvas.width,   Game.canvas.height);
};

Game.mainLoop = function() {
  Game.clearCanvas();
  Game.draw();
  window.setTimeout(Game.mainLoop, 1000 / 60);
};

Game.draw = function() {
  Game.canvasContext.fillStyle = "blue";
  Game.canvasContext.fillRect(Game.rectanglePositionX, Game.rectanglePositionY, 10, 10);
};

document.addEventListener('DOMContentLoaded', Game.start);

document.addEventListener("keydown", function() {
  var d = new Date();
  console.log(Game.rectanglePositionX, Game.rectanglePositionY, d);
  const key = event.key;
  if (key == "ArrowUp") {
    if (Game.rectanglePositionY > 1) {
      Game.rectanglePositionY -= 10;
    } else {
      Game.rectanglePositionY += 10;
    }
  }

  if (key == "ArrowDown") {
    if (Game.rectanglePositionY < 470) {
      Game.rectanglePositionY += 10;
    } else {
      Game.rectanglePositionY -= 10;
    }
  }

  if (key == "ArrowLeft") {
    if (Game.rectanglePositionX > 1) {
      Game.rectanglePositionX -= 10;
    } else {
      Game.rectanglePositionX += 10
    }
  }

  if (key == "ArrowRight") {
    if (Game.rectanglePositionX < 790) {
      Game.rectanglePositionX += 10;
    } else {
      Game.rectanglePositionX -= 10;
    }
  }
  // Game.clearCanvas(); 
  // Game.draw();
});

canvas {
  background-color: chartreuse;
  border: solid 10px gold;
}

<html>

  <head>
    <title>MovingSquare</title>
    <script src="BasicGame.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="gameArea">
      <canvas id="myCanvas" width="800" height="480"></canvas>
    </div>
  </body>

</html>

Ура!