Javascript HTML5/CANVAS：鼠标事件问题

我现在面临一个问题，鼠标事件似乎不起作用。我有一个按钮精灵和一个播放器精灵，我希望当我点击按钮时，播放器应该移动，但它不会移动，这是mycode：

var canvas = document.getElementById("canvas_1");
ctx = canvas.getContext("2d");
canvas.addEventListener('mousedown', doMouseDown, true);
var X = 100;
var Y = 0;
var x = 0;
var y = 0;
var player = new Image();
var butt = new Image();
player.src = 'images/player.png';
butt.src = 'images/right.png';
player.onload = function () {
    ctx.drawImage(player, x, 0);
}
butt.onload = function () {
    ctx.drawImage(butt, X, Y);
}

update = function () {
    ctx.clearRect(0, 0);
    ctx.drawImage(player, x, y);
}
setInterval(update, 1000 / fps.getFPS());
var fps = {
    startTime: 0,
    frameNumber: 0,
    getFPS: function () {
        this.frameNumber++;
        var d = new Date().getTime(),
            currentTime = (d - this.startTime) / 1000,
            result = Math.floor((this.frameNumber / currentTime));

        if (currentTime > 1) {
            this.startTime = new Date().getTime();
            this.frameNumber = 0;
        }
        return result;

    }
};

function doMouseDown(event) {
    var mousePos = getMousePos(canvas, event);

    if ((mousePos.x >= X && mousePos.x <= X + butt.width) && (mousePos.y >= Y && mousePos.y <= Y + butt.height)) {
        x += 4;
    }
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

var canvas=document.getElementById（“canvas_1”）；
ctx=canvas.getContext（“2d”）；
canvas.addEventListener（'mousedown'，doMouseDown，true）；
var X=100；
var Y=0；
var x=0；
var y=0；
var player=新图像（）；
var butt=新图像（）；
player.src='images/player.png'；
butt.src='images/right.png'；
player.onload=函数（）{
ctx.drawImage（播放器，x，0）；
}
butt.onload=函数（）{
ctx.drawImage（对接，X，Y）；
}
更新=函数（）{
ctx.clearRect（0,0）；
ctx.drawImage（播放器，x，y）；
}
setInterval（更新，1000/fps.getFPS（））；
var fps={
开始时间：0，
帧编号：0，
getFPS：函数（）{
这个.frameNumber++；
var d=new Date（）.getTime（），
currentTime=（d-this.startTime）/1000，
结果=Math.floor（（this.frameNumber/currentTime））；
如果（当前时间>1）{
this.startTime=new Date（）.getTime（）；
this.frameNumber=0；
}
返回结果；
}
};
函数doMouseDown（事件）{
var mousePos=getMousePos（画布，事件）；
如果（（mousePos.x>=x&&mousePos.x=Y&&mousePos.Y您正在执行的操作就像您单击一样，
doMouseDown
函数被调用并结束。

您需要多次调用此函数才能获得动画。因此，

你可以像

如果单击
var clicked=true

然后将下面的代码放入循环中

if（单击）{

x+=4

}