Как заставить кнопку вызывать функцию?

Question

Я новичок в программировании и мне нужна помощь. У меня есть кнопка запуска <button id="startBtn" onclick="draw()">START</button>, я хочу, чтобы эта кнопка запуска вызывала мою функцию рисования

    function draw() {
    drawWalther();
    rain();

    if (rightPressed && (waltherX + waltherWidth) < 865) {
        waltherX += waltherDx;
    } else if (leftPressed && waltherX > -54){
        waltherX -= waltherDx;
    }

    if (y + dy > c.height - 100 || y + dy < 0) {
        dy = 0;
    }

    if (rightPressed && (waltherheadX + waltherheadWidth) < 900) {
        waltherheadX += waltherheadDx;
    } else if (leftPressed && waltherheadX > 50){
        waltherheadX -= waltherheadDx;
    }
    x += dx;
    y += dy;

    requestAnimationFrame(draw);
} 
requestAnimationFrame(draw);

, но, конечно, когда я загружаю игру, она загружает функцию рисования без необходимости нажимать кнопку запуска, так как Могу ли я вызвать функцию, когда я нажимаю кнопку запуска, а не когда я перезагружаю игру

Answer 1

Вы вызываете requestAnimationFrame(draw) сразу после определения функции. Это немедленно запускает функцию и не дожидается нажатия кнопки. Если вы удалите экземпляр ПОСЛЕ определения функции, он будет ждать ее выполнения.

Упрощенный пример:

<script>
function draw() {
    // some code
    requestAnimationFrame(draw);
};
</script>
<button onclick="draw()"></button>

Ваш новый код:

<script>
    function draw() {
    drawWalther();
    rain();

    if (rightPressed && (waltherX + waltherWidth) < 865) {
        waltherX += waltherDx;
    } else if (leftPressed && waltherX > -54){
        waltherX -= waltherDx;
    }

    if (y + dy > c.height - 100 || y + dy < 0) {
        dy = 0;
    }

    if (rightPressed && (waltherheadX + waltherheadWidth) < 900) {
        waltherheadX += waltherheadDx;
    } else if (leftPressed && waltherheadX > 50){
        waltherheadX -= waltherheadDx;
    }
    x += dx;
    y += dy;

    requestAnimationFrame(draw);
} 
</script>
<button id="startBtn" onclick="draw()">START</button>

Answer 2

Вы передаете функцию draw в качестве обработчика в функции requestAnimationFrame, поэтому функция draw вызывается автоматически.

Включите функцию addEventListener и привяжите событие click как показано ниже:

1. Убрать атрибут onClick

function draw() {
  drawWalther();
  rain();

  if (rightPressed && (waltherX + waltherWidth) < 865) {
    waltherX += waltherDx;
  } else if (leftPressed && waltherX > -54) {
    waltherX -= waltherDx;
  }

  if (y + dy > c.height - 100 || y + dy < 0) {
    dy = 0;
  }

  if (rightPressed && (waltherheadX + waltherheadWidth) < 900) {
    waltherheadX += waltherheadDx;
  } else if (leftPressed && waltherheadX > 50) {
    waltherheadX -= waltherheadDx;
  }
  x += dx;
  y += dy;

  requestAnimationFrame(draw);
}
document.querySelector("#startBtn").addEventListener("click", draw));