HTML5 canvas 和 javascript 用鼠标移动移动玩家

Question

好的，到目前为止我可以用箭头键移动玩家，但我一直在尝试弄清楚如何用鼠标移动来移动玩家，例如将鼠标向右移动会增加玩家的 X 位置并移动鼠标向左移动会降低 X 位置，但我正在努力实现这一目标！

我是如何制作我的玩家对象的

player = {
    x: width / 30,//player properties 
    y: height - 5,
    width: 16,
    height: 18,
    speed: 3,
    velX: 0,
    velY: 0,
    jumping: false,
    grounded: false

},

我的控制函数

 if (keys[38] || keys[32]) {
    // up arrow or space
    if (!player.jumping && player.grounded) {
        player.jumping = true;
        player.grounded = false;
        player.velY = -player.speed * 2;
        var audio = new Audio('jump.mp3');
        audio.play();
    }
}
if (keys[39]) {
//mouseControl = false;
    // right arrow
    if (player.velX < player.speed) {
        player.velX++;

if(count ==2)
 {
 count = 0;
 }
else {
 count++;
}
    }
}
     if (keys[37]) {
   //mouseControl = false;
    // left arrow
    if (player.velX > -player.speed) {
        player.velX--;
        if(count ==2)
  {
   count = 0;

}
 else {
 count++;
 }
    }
}

player.velX *= friction;
player.velY += gravity;

ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "black";
ctx.beginPath();

player.grounded = false;
}

我是如何拿到钥匙的

 //if key is pressed down = true
 document.body.addEventListener("keydown", function (e) {
    keys[e.keyCode] = true;
 });
 //if key is not pressed = false
 document.body.addEventListener("keyup", function (e) {
keys[e.keyCode] = false;
 });


 window.addEventListener("load", function () {
game_loop();
 });

Answer 1

您要做的是添加一个 mousemove 事件。并有两个变量来存储 oldX 和 oldY 鼠标位置，以及 newX 和 newY 鼠标位置。然后在每次调用 mousemove 时，newX 和 newY 将是当前鼠标位置，而 oldX 和 oldY 将是最后一次调用的鼠标位置mousemove。最后，您只需减去 newX - oldX 即可得到鼠标 X 位置的差异 (diffX)。如果为正，则将鼠标向右移动，如果为负，则将鼠标向左移动。 diffY 也是如此。这是一个例子：

var oldX = 0, oldY = 0, newX, newY;

canvas.addEventListener("mousemove", function(e) 
{ 
    // Get the current mouse position
    var cRect = canvas.getBoundingClientRect();
    newX = e.clientX - cRect.left;
    newY = e.clientY - cRect.top;

    // Subtract from the old mouse position
    var diffX = newX - oldX;     
    var diffY = newY - oldY;         

    ctx.clearRect(0,0,canvas.width,canvas.height);

    if(diffX > 0)
        player.x += player.speed; // If the mouse moved right, move right
    else
        player.x -= player.speed; // Otherwise move left.

    ctx.fillRect(player.x, player.y, 50, 50); // draw player

    // Now make the current mouse potion the old mouse position
    oldX = newX;
    oldY = newY
});

Here is a working fiddle example

HTML5 canvas 和 javascript 用鼠标移动移动玩家

HTML5 canvas and javascript move player with mouse movement

html

javascript

canvas

function

html5-canvas