Как сделать управление "Шаром" как в 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';
}