Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/6: Рейтинг темы: голосов - 6, средняя оценка - 5.00
Boolean14
0 / 0 / 0
Регистрация: 07.09.2017
Сообщений: 2
#1

Движение объектов

07.09.2017, 18:28. Просмотров 1060. Ответов 3
Метки нет (Все метки)

Привет, форумчане. В этом посте хочу осветить проблему создания движения объектов на языке javascript. Из дополнительных библиотек использую только jquery. Двигаю DOM элементы, но в этой теме можно обойтись без них.
Недавно открыл для себя существование js и сразу начал создавать игровой проект. В какой-то момент, как это часто бывает, столкнулся с проблемой, которую уже долгое время не знаю, как решить. Я думал, как написать движение для пули. Проблем с коллизиями нету, но они есть со скоростями. Изначально я попробовал сделать вот так:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//  Наши объекты их координаты и размер
var obj1 = {
    x: 100,
    y: 300,
    w: 100,
    h: 100
};
var obj2 = {
    x: 500,
    y: 100,
    w: 100,
    h: 100
};
// функция, запускающая движение
$(function initWorld(){
    var acc = 100;
    var acceleration = 0;
    var mTimer1 = setInterval(function() {
        if ((obj1.x  <=  obj2.x) && (obj1.y >= obj2.y)) { // проверка в какой области находится obj2 относительно obj1
            if (a / b > b / a) { 
                obj1.x += a/b+acceleration; // собственно, вот оно наше передвижение
                obj1.y -= b/a+acceleration; // --
                if (acc < 500) { // подобие ускорения
                    acc += 50;
                    acceleration += 0.5;
                }
                if ((obj1.x+obj1.w > obj2.x)&&(obj1.y < obj2.y+obj2.h)) {   //простая проверка на столкновение      
                    clearInterval(mTimer1); //остановка движения 
                }
                else if((obj1.x-100>=800)||(obj1.y+100<=0)){ // проверка на вылет из рабочей области проекта
                    clearInterval(mTimer1);
                }
            }
            else {
              //
            }
        }
    }, 1000/acc)
 
});
Но с таким движением есть проблемы. 1)Скорость получается неравномерной. В одном случае объект может двигаться очень быстро, в другом очень медленно. 2)Неточность.
Это всё, что я пока смог сделать и как вы понимаете, код этот, мягко говоря ху**ый. Помогите советом, идеей, кодом, "чтопрочитать", ментальными обнимашками или чем сможете. Спасибо.

Добавлено через 8 минут
Блинский. Забыл указать, что такое "a" и "b"
Javascript
1
2
var a = Math.abs(obj1.x+50 - obj2.x+50);
var b = Math.abs(obj1.y-50 - obj2.y-50);
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
07.09.2017, 18:28
Ответы с готовыми решениями:

Движение объектов по траектории - JS
Здравствуйте уважаемые, у меня есть шарик который стоит в влевом нижнем углу(он...

Как делается движение объектов?
Как делается движение объектов? Если знаете хороший урок просьба кинуть

Движение по траектории
Помогите пожалуйста ,нужно : Организовать движение какой-либо строки, по...

Движение объекта
Вот код который двигает объект. Как сделать чтобы функция включалась только...

Движение картинки
Здравствуй,уважаемые форумчане! Недавно Меня резко потянуло на язык...

3
TFullControl
398 / 322 / 189
Регистрация: 20.10.2016
Сообщений: 1,024
07.09.2017, 21:40 #2
Набросал простой пример движения пули:
HTML5
1
<canvas></canvas>
CSS
1
2
3
4
5
canvas{
  border: 1px solid;
  width: 500px;
  height: 500px;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
var x = 150;
var y = 0;
 
function drawBulet(){
    context.clearRect(0,0,300,300);
    context.fillStyle = "red";
    context.fillRect(x, y, 5, 5);
}
 
function draw(){
  drawBulet();
  y+=1;
  requestAnimationFrame(draw);
}
draw();
https://jsfiddle.net/eoLkuLfy/1/
0
Boolean14
0 / 0 / 0
Регистрация: 07.09.2017
Сообщений: 2
08.09.2017, 01:11  [ТС] #3
Когда будет следующая версия? =)

Добавлено через 1 час 25 минут
Нашёл нормальную формулу для движения. Попозже может выложу полностью код.
Javascript
1
2
3
4
5
6
7
 
 var v = 100; //какая-то скорость
 var vx = ((obj2.x - obj1.x)/((obj2.x - obj1.x)*(obj2.x - obj1.x) + (obj2.y - obj1.y)*(obj2.y - obj1.y)))*v;
 var vy = ((obj2.y - obj1.y)/((obj2.x - obj1.x)*(obj2.x - obj1.x) + (obj2.y - obj1.y)*(obj2.y - obj1.y)))*v;
 // ...
 obj1.x += vx;
 obj1.y += vy;
0
nubideus
390 / 272 / 76
Регистрация: 19.09.2011
Сообщений: 828
08.09.2017, 02:06 #4
Лучший ответ Сообщение было отмечено Boolean14 как решение

Решение

Цитата Сообщение от Boolean14 Посмотреть сообщение
Нашёл нормальную формулу для движения. Попозже может выложу полностью код.
как обычно делают движение:
есть вектор направления, это единичный вектор, то есть нормированный, то есть его длина равна единице. его умножают на скорость, она обычно в пикселях - это просто число.

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

Javascript
1
2
3
4
var direction = {x: 3, y: 1};
var len = Math.sqrt(direction.x * direction.x + direction.y + direction.y); // по теореме пифагора находишь гипотенузу у прямоугольного треугольника из этого вектора.
vec.x = direction.x / len;
vec.y = direction.y / len;
теперь умножаешь полученный нормальный вектор на скорость:

Javascript
1
var speed = { x: vec.x * v, y: vec.y * v };
это ты получил "правильную" скорость по оси x и y.
теперь ты можешь двигать свой объект с этой скоростью:
Javascript
1
2
obj1.x += speed.x;
obj1.y += speed.y;
например, ты можешь задать направление, как задумывалось у тебя:
Javascript
1
var direction= {x: obj1.x - obj2.x, y: obj1.y - obj2.y};
нормировать его, и получишь такую скорость, с которой obj1 будет двигаться к obj2.

или ты можешь задать направление углом:
Javascript
1
var angle = 123; // важно знать, что в программировании под углом чаще всего подразумеваются именно радианы.
соответственно, если ты хочешь работать с градусами, тебе стоит научиться переводить из градусов в радианы и обратно, как это сделать море инфы. в моем примере будут радианы.

через синус и косинус можно сразу получить нормальный вектор направления:
Javascript
1
2
vec.x = Math.sin(angle);
vec.y = Math.cos(angle);
и далее умножить на скорость и двигать объект.

вот пара поделок, которые могут быть тебе полезны в этом нелегком вопросе:
http://jsbin.com/gidaka/2/edit?html,css,js,output
http://jsbin.com/tageju/9/edit?html,js,output
http://jsbin.com/qipawi/4/edit?html,js,output
http://jsbin.com/sowini/8/edit?html,css,js,output
http://jsbin.com/yoziqe/4/edit?html,css,js,output

Цитата Сообщение от Boolean14 Посмотреть сообщение
((obj2.x - obj1.x)/((obj2.x - obj1.x)*(obj2.x - obj1.x) + (obj2.y - obj1.y)*(obj2.y - obj1.y)))*v;
думал ты в правильном направлении, но забыл про квадратный корень, если сделать Math.sqrt(((obj2.x - obj1.x)*(obj2.x - obj1.x) + (obj2.y - obj1.y)*(obj2.y - obj1.y))), то будет работать правильно

Добавлено через 5 минут
Цитата Сообщение от nubideus Посмотреть сообщение
{x: obj1.x - obj2.x, y: obj1.y - obj2.y};
тут закралась ошибка, правильно obj2.x - obj1.x и тд
2
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
08.09.2017, 02:06

Движение объекта
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;script...

Движение фона
Здравствуйте, подскажите плагин или как это сделать, движение фона при...

движение объекта
Всем привет. Скажу сразу в javascript я ещё понимая очень мало. Столкнулся с...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru