Canvas и JavaScript - перетекающее слово справа налево в ожидании ввода по нажатию клавиши

#javascript #canvas

Вопрос:

Я новичок, и я пытаюсь написать свою первую программу. В этом фрагменте я пытаюсь передать слово справа налево, а слева переместить полосу вправо, и когда они столкнутся, будет отнята жизнь. У меня также есть событие нажатия клавиши, которое удаляет слово из соответствующего символа. Проблема в том, что анимация выполняется слишком быстро. Нет времени прослушивать ввод и давать оценку. Я пробовал с помощью setTimeout и setInterval, но они не работают. Большое спасибо!

 let positionBar = 10;
let positionWord = 600;
let positionWordHeight = 90;
const word = "Word";
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");

function clrScr() {
  context.clearRect(0, 0, canvas.width, canvas.height);
}

function getRandom(min, max) {
  return Math.trunc(Math.random() * (max - min)   min);
}

while (positionBar < 600 amp;amp; positionBar < positionWord) {
  clrScr();
  positionBar  = 0.01;
  positionWord -= 0.07;

  context.beginPath();
  context.rect(positionBar, 10, 10, 200, "black");
  context.fill();

  context.font = "30px Arial";
  context.fillText(word, positionWord, positionWordHeight);
}

 <canvas id="canvas" height="600" width="800"></canvas>

Развернуть фрагмент

Ответ №1:

Вы можете использовать обратный вызов, например setInterval() , или requestanimationframe() , чтобы последовательно рисовать каждый кадр. Вот простой пример, который лишь слегка изменяет ваш код. Вам следует изучить тему, чтобы понять ее более полно.

 let positionBar = 10;
let positionWord = 600;
let positionWordHeight = 90;
const word = "Word";
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");

function clrScr() {
  context.clearRect(0, 0, canvas.width, canvas.height);
}

function getRandom(min, max) {
  return Math.trunc(Math.random() * (max - min)   min);
}

function draw(elapsed)
{
  if (positionBar < 600 amp;amp; positionBar < positionWord) {
    clrScr();
    positionBar  = 0.01;
    positionWord -= 0.07;

    context.beginPath();
    context.rect(positionBar, 10, 10, 200, "black");
    context.fill();

    context.font = "30px Arial";
    context.fillText(word, positionWord, positionWordHeight);

    // Call again for next frame
    window.requestAnimationFrame(draw);
  }
}

// Start animation
window.requestAnimationFrame(draw);

 <canvas id="canvas" height="600" width="800"></canvas>

Развернуть фрагмент