Как сделать управление «Шаром» как в Agar.io?

Question

[Triborg-333]

Как сделать управление "Шаром" как в Agar.io ?

нужно сделать управление так, чтобы куда наводишь туда шёл шар, а не прям за курсором.

и скажите пожалуйста, правильно ли я, сделал камеру игры.

вот игра

код:

let canvas, ctx, width, height;

let Game = function(){
  
	canvas = document.getElementById('agario');
	ctx = canvas.getContext('2d');
   

   	this.Agar();
   	this.app();
}

const bg = new Image();

bg.src = "img/bg.jpg"

Game.prototype.app = function(){
	this.draw();

		requestAnimationFrame(()=>{
		this.app();
	})
}

let mouse = {x : 0, y : 0};

function mouseMove(e){
	mouse.x = e.offsetX - 0;
	mouse.y = e.offsetY - 0;
}

Game.prototype.Agar = function(){
	this.position = {x : 350, y : 150}
	this.cell_radius = 50;
	this.eat = [];
	this.eat_push = 0;

	this.score = 10;
	this.camera = {
		x : 0,
		y : 0,

		move:function(x, y){
			this.x += x;
			this.y += y;
		}
	}
}



window.addEventListener("mousemove", mouseMove);

Game.prototype.draw = function(){

	ctx.drawImage(bg, -this.camera.x+-this.position.x, -this.camera.y+-this.position.y, 3000, 2000)
	ctx.translate(-this.camera.x, -this.camera.y);
	this.camera.move(this.camera.x, this.camera.x);

	//еда по карте
//   
  // for(let i = 0; i < this.eat.length; i++){
	//ctx.beginPath();
	//ctx.arc(this.eat[i].x, this.eat[i].y, 10, 0, 2*Math.PI, false);
	//ctx.fillStyle = '#' + (Math.random() * Math.pow(256, 3) | 0).toString(16).padStart(6, '0');
	//ctx.fill();

	//Проверяем столкновение еды, и игрока.

	//if(Math.abs(this.position.x+50-this.eat[i].x)< 50 && Math.abs(this.position.y+-this.eat[i].y)<50){
	//this.eat.splice(i,1);
		//this.score+=3;
		//this.cell_radius+=3;
		//break;
	//}
//}
//
	ctx.beginPath();
	ctx.arc(this.position.x, this.position.y, this.cell_radius, 0, 2*Math.PI, false);
	ctx.fillStyle = '#99FD01';
	ctx.fill();
	ctx.lineWidth = 3;
	ctx.strokeStyle = '#89E604';
	ctx.stroke();
	
	//Присваеваем очки к player.
    ctx.fillStyle = '#fff'
    ctx.font = '23px Arial'
	ctx.fillText("" + this.score, this.position.x-15, this.position.y+20)

	//Присваеваем ник к player.

	this.nameplayer = document.getElementById("nameplayer").value;


	ctx.fillStyle = 'black';
	ctx.font = '30px Arial';
	ctx.fillText("" + this.nameplayer, this.position.x-35, this.position.y)

 this.eat_push++;

 if(this.eat_push%33==0){
 	this.eat.push({
 		x : Math.random()* 1900,
 		y : Math.random()* 1900
 	})
 }

	//Расчет того, чтобы "Круг" следовал за мышкой.

	let agar_speed = 1.5
					
	let positionX = this.position.x <------ Код шар следует за мышкой
	let positionY = this.position.y
	let mouseX = mouse.x;
	let mouseY = mouse.y;
	let speed = agar_speed;
					
	let cordinate = Math.sqrt((mouseX-positionX) * (mouseX-positionX) + (mouseY-positionY) * (mouseY-positionY))
					
	this.position.x += (mouseX-positionX) * speed / cordinate;
	this.position.y += (mouseY-positionY) * speed / cordinate;


       if(this.position.x >= 950){
        this.position.x = 950;
    }else if(this.position.x <= 5){
        this.position.x = 5;
    }
	
	if(this.position.y >= 900){
        this.position.y = 900;
    }else if(this.position.y <= 125){
        this.position.y = 125;
    }
}


window.onload = function(){
	new Game("ctx");
    document.getElementById('start_block').style.display = 'none';
}