Когда пуля попадает в цель, ковбои должны упасть и должно появиться сообщение

Когда страница загружается, ковбои стреляют пулей, затем она отскакивает от правой стены и попадает в ковбоя. Он падает с помощью (felldownCowboy()), а затем показывает сообщение. Как я могу остановить пулю и показать сообщение? Я не могу найти решение! Ковбой сделан из холста

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
var hit = 0;
var x = 500;
var xdir = 1;

function trigger() {
  if (x == 1000 || x == 400) {

    xdir = -1 * xdir
  }


  if (xdir == 1) {
    x = x + 5;
  } else {
    x = x - 5;
  }

  if (xdir == 0) {
    requestAnimationFrame(draw2Cowboy);
  } else if (hit == 1) {
    requestAnimationFrame(draw2Cowboy);
  }



  requestAnimationFrame(bullet);

}


function drawCowboy() {

  ctx.clearRect(0, 0, 1000, 300);
  //head
  ctx.beginPath();
  ctx.arc(150, 390, 60, 0, 2 * Math.PI);
  ctx.stroke();

  // body
  ctx.moveTo(150, 450);
  ctx.lineTo(150, 640);
  ctx.lineWidth = 12;
  ctx.stroke();

  // left arm
  ctx.moveTo(10, 600);
  ctx.lineTo(150, 540);
  ctx.stroke();

  // right arm
  ctx.moveTo(300, 500);
  ctx.lineTo(150, 540);
  ctx.stroke();


  // left leg
  ctx.moveTo(-30, 900);
  ctx.lineTo(150, 640);
  ctx.stroke();

  // right leg
  ctx.moveTo(300, 900);
  ctx.lineTo(150, 640);
  ctx.stroke();


  // gun
  ctx.moveTo(300, 450);
  ctx.lineTo(300, 540);
  ctx.stroke();
  ctx.moveTo(300, 470);
  ctx.lineTo(400, 470);
  ctx.stroke();

  ctx.closePath();
}


// drawCowboy();


function felldownCowboy() {
  ctx.clearRect(0, 0, 1000, 300);
  //head
  ctx.beginPath();
  ctx.arc(380, 720, 60, 0, 2 * Math.PI);
  // body
  ctx.moveTo(350, 750);
  ctx.lineTo(150, 640);
  ctx.lineWidth = 12;
  // left arm
  ctx.moveTo(150, 650);
  ctx.lineTo(250, 700);
  // right arm
  ctx.moveTo(450, 950);
  ctx.lineTo(250, 700);
  // left leg
  ctx.moveTo(-30, 900);
  ctx.lineTo(150, 640);
  // right leg
  ctx.moveTo(300, 900);
  ctx.lineTo(150, 640);
  ctx.stroke()

}



function bullet() {
  ctx.clearRect(0, 0, 1000, 500);
  ctx.beginPath();
  var draw = ctx.arc(x, 470, 3, 0, 2 * Math.PI);
  ctx.strokeStyle = "black";
  ctx.stroke();
  ctx.fillStyle = "black";
  ctx.fill();
}

requestAnimationFrame(bullet);
setInterval(trigger, 20);
<h1>A cowboy never dies</h1>
<div class="container">
  <canvas id="canvas1" width="1000" height="800"></canvas>
</div>


javascript canvas bounce bullet
person tasos Nz    schedule 24.01.2021    source источник
comment
Я сделал тебе фрагмент. Сделайте его минимально воспроизводимым примером   -  person mplungjan    schedule 24.01.2021
comment
Посетите справочный центр, совершите тур, чтобы узнать, что и Как спросить. Проведите небольшое исследование, поиск связанных тем на SO; если вы застряли, опубликуйте минимально воспроизводимый пример вашей попытки, отметив ввод и ожидаемый результат, желательно в Фрагмент стека   -  person mplungjan    schedule 24.01.2021