Я нашел похожие вопросы, но не точные.Я могу сделать это с помощью мыши, но я не уверен, как справиться с этим с помощью события mousemove.
моя текущая ситуация JSFiddle, например
Я пытаюсь сделать так, чтобы экран перемещался в сторону мыши при перемещении моего плеера, а не только при перемещении мыши.Но я не уверен, как еще пойти по этому поводу.
У меня есть объект игрока, который обновляется при перемещении мыши.
function Player (x,y) {
this.x = x;
this.y = y;
this.draw = function () {
ctx.beginPath();
ctx.arc(this.x,this.y,30,0,Math.PI * 2, false);
ctx.fillStyle = 'black';
ctx.fill();
}
this.update = function () {
this.x = playerX;
this.y = playerY;
this.draw();
}
}
эта функция обновления не допускает перемещения contstant , но когда я пытаюсь что-то реализовать, это приводит к большим задержкам - очевидно, я использую неправильный подход.
В данный момент я просто определяю, где находится мышь по сравнению с центром экрана.
document.addEventListener('mousemove', (event) => {
moveWorld(event);
});
function moveWorld(e){
var x = e.clientX;
var y = e.clientY;
// playerSpeed is 3
var centerX = window.innerWidth / 2
var centerY = window.innerHeight / 2
// move south
if (y < centerY) {
ctx.translate (0,playerSpeed);
playerY -= playerSpeed;
}
// move e
if (x < centerX) {
ctx.translate (playerSpeed,0);
playerX -=playerSpeed;
}
// move north
if (y > centerY) {
ctx.translate (0,-playerSpeed);
playerY += playerSpeed;
}
// move west
if (x > centerX) {
ctx.translate (-playerSpeed,0);
playerX +=playerSpeed;
}
drawWorld();
}
и, наконец, отрендерить все это.
function drawWorld(){
requestAnimationFrame(drawWorld); // refresh world
// CLEAR
ctx.clearRect(0,0,innerHeight,innerHeight);
// world
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
ctx.fillRect(110, 30, 50, 50);
// player
player.update();
}
document.addEventListener('mousemove', (event) => {
moveWorld(event);
});
drawWorld();