var text = document.getElementById("text");

​

var ctx = canvas.getContext("2d");

​

var width = canvas.width = 500;

var height = canvas.height = 200;

var stop = false;

​

var tasks = [

  {

    message: "Затолкайте красный шар за верхнюю грань",

    isPerformed: (x,y)=>(y<0)

  },

  {

    message: "Затолкайте красный шар за нижнюю грань",

    isPerformed: (x,y)=>(y>height)

  },

  {

    message: "Затолкайте красный шар за левую грань",

    isPerformed: (x,y)=>(x<0)

  },

  {

    message: "Затолкайте красный шар за правую грань",

    isPerformed: (x,y)=>(x>width)

  },

];

​

var task = tasks[Math.floor(Math.random()*tasks.length)];

text.innerText = task.message;

​

// класс объекта ЕДА

class Food {

  constructor(ctx){

    this.ctx = ctx;

    this.randomWarp();

    this.display = false;

    this.warpTime = Math.floor(10+Math.random()*10);

    this.count=0;

    this.type="food";

  }

  loop(){

    this.count++;

    if(this.count>=this.warpTime){

      this.count=0;

      this.randomWarp();

    }

  }

​

  // метод телепортирует еду в новые случайные координаты

  randomWarp(){

    this.x = 20+Math.floor(Math.random()*(width-40));

    this.y = 20+Math.floor(Math.random()*(height-40));

  }

​

  // метод рисует еду

  draw(){

    if(!this.display) return;

    // this.ctx.fillRect(food.x-5,food.y-5,10,10);

    this.ctx.fillStyle = "red";

    this.ctx.beginPath();

      this.ctx.arc( this.x, this.y, 2, 0, Math.PI * 2);

    this.ctx.fill();    

  }

​

}

​

// класс объекта ЕДА

class Mouse {

  constructor(ctx, canvas){

    this.ctx = ctx;

    this.display = false;

    this.type="mouse";

    let listener = (e)=>{

      this.x = e.pageX - e.target.offsetLeft;

      this.y = e.pageY - e.target.offsetTop;

    }

    canvas.addEventListener('mousemove', listener);

    canvas.addEventListener('touchmove', listener);

  }

​

  loop(){}

​

  // метод рисует еду

  draw(){

    if(!this.display) return;

    // this.ctx.fillRect(food.x-5,food.y-5,10,10);

    this.ctx.fillStyle = "blue";

    this.ctx.beginPath();

      this.ctx.arc( this.x, this.y, 6, 0, Math.PI * 2);

    this.ctx.fill();    

  }

​

}

​

​

// класс объекта СУЩЕСТВО

class Entity {

  constructor(ctx, type="passive",isPerformed=(x,y)=>false){

    this.ctx = ctx;

    this.type = type;

    this.rubbing = 0.97;

    this.targets = [];

    this.randomWarp();

    this.isPerformed = isPerformed;

  }

​

  // метод телепортирует существо в новые случайные координаты

  randomWarp(){

    // случайным образом выбираем координаты

    this.x = 15+Math.floor(Math.random()*(width-30));

    this.y = 15+Math.floor(Math.random()*(height-30));

​

    // текущий вектор движения

    this.dx = this.dx||0;

    this.dy = this.dy||0;

​

    // случайное скорость (ускорение) в интервале от 0.1 до 0.7

    this.speed = this.speed||(0.05+Math.random()*0.7);

    if(this.type === "source")

      this.speed = 0.04;

  }

​

  // метод назначает существу цель, добавляя ее в список целей

  addTarget(target){

    if(Array.isArray(target)){

      this.targets.push(...target);

    }else{

      this.targets.push(target);

    }

  }

​

  // метод определяет ближайшую цель

  getNearestFood(){

    let temp = 99999999;

    this.targets.forEach(target=>{

      //if(this.type === "passive" && target.type === "mouse")

​

      // находим расстояние между существом и текущей целью по осям X и Y

      let dx = target.x-this.x;

      let dy = target.y-this.y;

      if(this.type === "passive" && target.type === "mouse"){

        dx=-dx*2;

        dy=-dy*2;

      }else if(this.type === "active" && target.type === "mouse"){

        dx=-dx*1;

        dy=-dy*1;

      }else if(this.type === "source" && target.type === "mouse"){

        dx=-dx*3;

        dy=-dy*3;

      }

​

      // находим дистанцию между существом и текущей целью

      let dist = Math.sqrt(dx*dx+dy*dy);

      if(dist<temp){

        temp = dist;

        this.target = target;

        this.tdx = dx;

        this.tdy = dy;

        this.tdist = dist;

      }

    });

  }

​

    // пропорциональный метод расчита следующих координат объекта

    calc(){

    // находим ближайшую еду

    this.getNearestFood();

​

​

    // находим коэффициент насколько дистанция больше величины скорости

    let q = this.speed/this.tdist;

​

    // находим величины шага для объекта 1 по осям X и Y, 

    // такие чтобы при изменении координат х и y на величину шага, 

    // объект 1 смещался в направлении объекта 2

    this.dx = this.dx*this.rubbing + this.tdx*q;

    this.dy = this.dy*this.rubbing + this.tdy*q; 

​

    // и изменяем координаты объекта from на эти величины

    this.x += this.dx;

    this.y += this.dy;

    if(this.isPerformed(this.x,this.y)){

      text.innerText="Вы отлично справились с заданием";

      stop = true;

    }

  }

​

  // метод рисует существо

  draw(){

    // this.ctx.fillRect(food.x-5,food.y-5,10,10);

    this.ctx.fillStyle = "red";

    if(this.type === "active"){

      this.ctx.fillStyle = "green";

    }else if(this.type === "passive"){

      this.ctx.fillStyle = "black";

    }

​

    this.ctx.beginPath();

      this.ctx.arc( this.x, this.y, 2+0.5/this.speed, 0, Math.PI * 2);

    this.ctx.fill();    

  }  

​

​

}

​

var foodList = [];

var entityList = [];

​

​

for(let i=0; i<5; i++){

  // создаем экземпляр класса ЕДЫ

  foodList.push(new Food(ctx));

}

​

foodList.push(new Mouse(ctx, canvas));

​

for(let i=0; i<500; i++){

  // создаем экземпляр класса СУЩЕСТВО с тригонометрическим типом расчетов

  let entity1 = new Entity(ctx,"passive");

​

  // создаем экземпляр класса СУЩЕСТВО с пропорциональным типом расчетов

  let entity2 = new Entity(ctx,"active");

​

  // добавляем существам цель

  entity1.addTarget(foodList);

  entity2.addTarget(foodList);

​

  entityList.push(entity1);

  entityList.push(entity2);

}

​

var entity3 = new Entity(ctx,"source",task.isPerformed);

entity3.addTarget(foodList);

entityList.push(entity3);

​

​

function loop(){

  // отчистим канвас

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

  ctx.fillStyle = "rgba(255,255,255,0.2";

  ctx.fillRect( 0, 0, width, height);  

​

  foodList.forEach(food=>{

    // нарисуем еду

    food.draw();

    food.loop();

  });  

  entityList.forEach(entity=>{

    // рассчитаем новые координаты существа 1

    entity.calc();

    // и нарисуем его

    entity.draw();

  });

​

​

​

​

  if(!stop) window.requestAnimationFrame(loop);

}

​

​

loop();