Есть шарик в центре- я мышку отвожу на определённое расстояние от него и если это расстояние большое- он двигается быстрее на координатной сетке. Если курсор на шарике- он стоит. Пример есть в игре http://agar.io/ .
Как этот просчёт реализовать?
Спасибо
-
в игре двигается сетка с разной скоростью, которая зависит от расстояния между шариком и мышью. – Stack 30 янв '16 в 18:29
-
@Stack на самом деле в игре двигаются шарики, в том числе и шарики игрока, и даже в случае если игрок состоит из единственного шарика - этот шарик все равно двигается - в пространстве игрового поля. А то что на экране этот шарик обычно в центре так это все благодаря камере, которая всегда смотрит в центр масс шариков игрока. – sba 30 янв '16 в 19:21
1 ответ
Будем считать, что координаты центра окружности и курсора вам известы. Тогда Уравнение окружности с центром в точке (x0, y0) и радиусом R выглядит так
(x - x0)^2 + (y - y0)^2 = R^2
Для точки с координатами (x1, y1), лежащей внутри окружности, должно выполняться условие
(x1 - x0)^2 + (y1 - y0)^2 <= R^2
Для нахождения же расстояния между двумя точками с заданными координатами используйте формулу
sqrt((x1 - x0)^2 + (y1 - y0)^2)
Также обратите внимание на руководство по canvas
вот здесь. Там, среди прочего, есть и примеры работы с мышью. Например, фрагмент кода для отслеживания координат мыши
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.onmousemove = function (e) {
var x = e.pageX = this.offsetLeft;
var y = e.pageY = this.offsetTop;
var div = document.getElementById("coords");
div.innerHTML = "x: " + x + " y: " + y;
};