当子弹击中时，牛仔应该倒下并显示一条消息

问题描述

当页面加载时，牛仔射出一颗子弹，然后它从右墙上弹回并击中了牛仔。他与 (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,1000,300);
  //head
  ctx.beginPath();
  ctx.arc(150,390,60,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,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,300);
  //head
  ctx.beginPath();
  ctx.arc(380,720,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,640);
  // right leg
  ctx.moveTo(300,640);
  ctx.stroke()

}



function bullet() {
  ctx.clearRect(0,500);
  ctx.beginPath();
  var draw = ctx.arc(x,470,3,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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）