HTML5/CANVAS: проблема с событием мыши

Question

У меня сейчас проблема, событие мыши, похоже, не работает. У меня есть кнопка спрайта и игрок спрайт, и я хочу, чтобы при нажатии на кнопку, игрок должен двигаться Butit не, ну вот 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 
    }; 
} 

Answer 1

, что вы делаете, как вы нажали, doMouseDown функция называется и конец.
и вам необходимо, чтобы вызвать эту функцию много раз, чтобы получить animation.so,
вы можете попробовать, как
если щелкнул var clicked=true

и поместить это ниже кода в цикле
if (clicked){
x+=4
}