Javascript 图像未在画布上跟随鼠标

我在html画布上创建游戏时遇到问题。游戏的前提是你必须在气球落地之前抓住它们。我对画布的背景有问题，而且篮子不能用鼠标移动

背景应为黑色，篮子应跟随鼠标光标

肖恩·科因




var_x=100；
var_y=0；
var_x=100；
var_y=100；
var点=0；
//画布的背景色
var c=document.getElementById（“c”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“#000”；
ctx.fillRect（0,0500500）；
//下面是事件侦听器
mycanv.addEventListener（“mousemove”，seenmove，false）；
函数seenmotion（e）{
//这是鼠标的代码
//在画布上移动。
var bounding_box=c.getBoundingClientRect（）；
篮子x=（e.clientX-bounding\u box.左）*
（c.宽度/边框宽度）；
basket_y=（e.clientY-bounding_box.top）*
（c.高度/边框高度）；
}
函数启动_game（）{
设置间隔（游戏循环，50）；
}
函数博弈_循环（）{
//上面的代码每50ms调用一次，是一个
//帧重画游戏动画循环。
c、 宽度=c.宽度；
//下面是绘制对象的代码
绘制气球（气球x，气球y）；
抽篮（抽篮x、抽篮y）；
//下面是更新引出序号位置的代码
气球_x++；
如果（引出序号x>c.宽度）{
气球x=0；
}
//这是碰撞检测代码
if（碰撞（气球x、气球y、篮子x、篮子y））{
点数-=0.5；
}
//这是积分系统的代码
积分+=1；
//让我们把它贴在右上角。
var integerpoints=Math.floor（points）；//将其转换为整数
ctx.font=“bold 24px无衬线”；
ctx.fillText（整数点，c.width-50，50）；
}
context.clearRect（0,0500500）；
功能碰撞（篮x、篮y、球x、球y）{
如果（气球y+85<篮子y）{
返回false；
}
如果（气球y>篮子y+91）{
返回false；
}
如果（气球x+80<篮子x）{
返回false；
}
如果（气球>篮子+80）{
返回false；
}
返回true；
}
//结束游戏后停止游戏的代码
函数stop_game（）{
}
//球的代码
函数绘制\气球（x，y）{
var balloon_img=新图像（）；
balloon\u img.src=“balloon.png”；
ctx.drawImage（气球图像，x，y）；
}
//篮子的代码
功能绘图篮（x，y）{
var basket_img=新图像（）；
basket_img.src=“basket.png”；
ctx.drawImage（篮形图，x，y）；
}

您必须更改鼠标侦听器的变量。所以不是

mycanv.addEventListener("mousemove",seenmotion, false);

你必须写这个

c.addEventListener("mousemove",seenmotion, false);

这将使用鼠标移动篮子，但图像仍然不正确。必须从x和y坐标中减去图像宽度和高度的一半。 要修复你的背景，你必须修改你的CSS。文章和章节标签都有全宽/高和自己的背景。这应该不难修复，只要将#c的背景更改为黑色即可

#c {
    background-color: black;
}

以下是JSFIDLE：

有关CSS和JS的更多信息，请访问。此外，代码可以更简单、更结构化。

是否尝试类似的方法？

#c {
    background-color: black;
}