问题描述
当页面加载时,牛仔射出一颗子弹,然后它从右墙上弹回并击中了牛仔。他与 (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 (将#修改为@)