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

Question

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

DSN (Имя источника данных) - это просто имя сохраненного соединения, которое содержит драйвер, сервер, базу данных, порт и т. д. Вы можете использовать его по имени. Но, конечно, вы можете просто напрямую подключиться к ODBC и предоставить полную строку соединения со всей необходимой информацией.

0

html5-canvas javascript

задан Jeff Banks 19 January 2019 в 20:44

1 ответ

Другие вопросы по тегам:

html5-canvas javascript

Похожие вопросы:

score 0 · 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>

Ура!