Как пользоваться draw для создания двигающего объекта в Java

В JavaScript draw — не специальный оператор языка, а обычное имя функции, которую часто используют для отрисовки объекта на canvas. Обычно движение делают так: функция update меняет координаты, функция draw очищает canvas и рисует объект, а requestAnimationFrame повторяет кадры

Схема:

update -> draw -> requestAnimationFrame -> снова update

Содержание

Минимальный пример
Что делает draw
Что делает update
Почему нужен requestAnimationFrame
Добавить управление клавишами
Чем draw отличается от loop
Как остановить движение
Частые ошибки
Считать draw оператором
Не очищать canvas
Менять координаты внутри draw
Мини-задание
Что почитать дальше по JavaScript

Минимальный пример

<canvas id="scene" width="400" height="200"></canvas>

<script>
  const canvas = document.querySelector("#scene");
  const ctx = canvas.getContext("2d");

  const box = {
    x: 20,
    y: 80,
    size: 30,
    speed: 2
  };

  function update() {
    box.x += box.speed;

    if (box.x > canvas.width - box.size || box.x < 0) {
      box.speed *= -1;
    }
  }

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#2563eb";
    ctx.fillRect(box.x, box.y, box.size, box.size);
  }

  function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
  }

  loop();
</script>

Откройте HTML-файл в браузере. Квадрат должен двигаться влево-вправо

Что делает draw

Функция draw отвечает только за картинку:

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(box.x, box.y, box.size, box.size);
}

Сначала она очищает старый кадр, потом рисует объект в новых координатах. Если не очищать canvas, объект будет оставлять след

Что делает update

update меняет данные:

function update() {
  box.x += box.speed;
}

Так код легче понимать: update отвечает за состояние, draw — за отрисовку. Не смешивайте всю логику в одной функции, когда проект начинает расти

Почему нужен requestAnimationFrame

Можно было бы использовать setInterval, но для анимации в браузере лучше requestAnimationFrame. Браузер вызывает функцию перед следующим кадром и может оптимизировать отрисовку

function loop() {
  update();
  draw();
  requestAnimationFrame(loop);
}

Это и есть простой игровой цикл

Добавить управление клавишами

document.addEventListener("keydown", (event) => {
  if (event.key === "ArrowRight") {
    box.x += 10;
  }
});

Для плавного управления лучше хранить нажатые клавиши в объекте keys, но для первого шага достаточно увидеть, что координаты меняются и draw рисует объект заново

Чем draw отличается от loop

Частая путаница: draw и loop — не одно и то же. draw рисует текущий кадр, а loop организует повторение

function loop() {
  update();
  draw();
  requestAnimationFrame(loop);
}

Если вызвать только draw(), объект нарисуется один раз. Если вызвать loop(), кадры будут повторяться, координаты обновятся, и объект начнет двигаться. Поэтому для анимации нужен не просто draw, а связка update + draw + requestAnimationFrame

Как остановить движение

Добавьте флаг:

let isRunning = true;

function loop() {
  if (!isRunning) return;
  update();
  draw();
  requestAnimationFrame(loop);
}

Теперь можно остановить анимацию, присвоив isRunning = false. Это пригодится для паузы, экрана проигрыша или кнопки stop

Частые ошибки

Считать draw оператором

draw — не ключевое слово JavaScript. Вы можете назвать функцию render, paint или drawScene. Главное — смысл

Не очищать canvas

Без clearRect старые кадры остаются на поле

Менять координаты внутри draw

Для маленького примера это работает, но в нормальном коде лучше разделять update и draw

Мини-задание

Измените пример так, чтобы квадрат двигался не по горизонтали, а по вертикали. Потом добавьте изменение цвета при касании нижней границы

Что почитать дальше по JavaScript

Если нужен общий маршрут по теме, откройте рубрику JavaScript. Для соседних задач пригодятся эти разборы:

Как пользоваться draw для создания двигающего объекта в JavaScript