0 / 0 / 0
Регистрация: 18.04.2015
Сообщений: 10
1

Ограничение движения объекта

11.07.2016, 10:35. Показов 3286. Ответов 5
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Есть картинка, мы передвигаем её с клавиатуры, при помощи стрелок.
Как можно ограничить передвижения картинки размерами окна в браузере, чтобы когда она достигла края, не двигалась дальше.
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
11.07.2016, 10:35
Ответы с готовыми решениями:

Реализация движения объекта
Добрый день, есть такая интересная задачка. В html документе размещены изображения, создающие...

Ограничение области перемещения объекта
Всем доброго времени суток. У меня есть вот такой вот код (пример кода): <!-- Настройка...

Настройка диапазона движения для объекта с искусственным интеллектом.
Думаю, каждый программист задумывался когда либо о создании робота, который сам бы решал задачи и...

Ограничение движения объекта в 3D
Прошу помощи. Нужно ограничить возможную область движения для корабля в SpaceShooter-e. Для...

5
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277
11.07.2016, 11:43 2
Javascript
1
2
3
4
5
6
7
8
width=document.body.clientWidth; // ширина окна браузера
height=document.body.clientHeight; // высота окна браузера
top = $(elem).offset().top - $(window).scrollTop; //положение элемента отностиельно окна браузера
left = $(elem).offset().left - $(window).scrollLeft;
imgw = $(elem).width();
imgh = $(elem).height();
 
if(top>0 && top+imgh<height && left>0 && left+imgw<width ){код для перемещалки}
1
0 / 0 / 0
Регистрация: 18.04.2015
Сообщений: 10
11.07.2016, 12:39  [ТС] 3
$(document).ready(function(){
var randomcolor;
$(document.body).keyup(function(e) {
randomcolor="#"+((1<<24)*Math.random()|0).toString(16);
console.log(randomcolor);

if (e.which == 39){
$('#test').css({
"border-color": randomcolor,
"border-style":"solid",
"border-weight":"10px",
'position': 'absolute',
'left': '+=10px',
'transform': 'rotate(0)'
});
}
if (e.which == 37){
$('#test').css ({
"border-color": randomcolor,
"border-style":"solid",
"border-weight": "10px",
'position': 'absolute',
'left': '-=10px',
'transform': 'rotate(180deg)'

});
}
if (e.which == 38){
$('#test').css ({
"border-color": randomcolor,
"border-style":"solid",
"border-weight": "10px",
'position': 'absolute',
'top': '-=10px',
'transform': 'rotate(-90deg)'
});
}
if (e.which == 40){
$('#test').css ({
"border-color": randomcolor,
"border-style":"solid",
"border-weight": "10px",
'position': 'absolute',
'top': '+=10px',
'transform': 'rotate(90deg)'
});
}
});
});

Подскажите ещё, в каком месте, вставить тот кусок кода, который вы дали) Просто ну совсем чайник "#test" в условиях это ID картинки. Спасибо)
0
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277
11.07.2016, 14:47 4
Лучший ответ Сообщение было отмечено CAHR94 как решение

Решение

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
$(document).ready(function(){
    var randomcolor;
    $(document.body).keyup(function(e) {
        randomcolor="#"+((1<<24)*Math.random()|0).toString(16);
        console.log(randomcolor);
        
        var width=document.body.clientWidth, // ширина окна браузера
            height=document.body.clientHeight, // высота окна браузера
            top = $('#test').offset().top - $(window).scrollTop, //положение элемента отностиельно окна браузера
            left = $('#test').offset().left - $(window).scrollLeft,
            imgw = $('#test').width(),
            imgh = $('#test').height();
        
        if(top>0 && top+imgh<height && left>0 && left+imgw<width ){
            $('#test').css({"border-color": randomcolor});
            switch(e.which){
                case 37: $('#test').css({ 'left': '-=10px', 'transform': 'rotate(180deg)'}); break;
                case 38: $('#test').css({ 'top': '-=10px', 'transform': 'rotate(-90deg)'}); break;
                case 39: $('#test').css({ 'left': '+=10px', 'transform': 'rotate(0)'}); break;
                case 40: $('#test').css({ 'top': '+=10px', 'transform': 'rotate(90deg)'}); break;
            }
        }
    
    });
});
как-то так. одинаковые свойства css в стайле пропиши, зачем их каждый раз устанавливать?

Добавлено через 1 час 23 минуты
вот этот код точно рабочий:
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
41
42
43
44
$(document).ready(function(){
    var randomcolor;
    $(document.body).keydown(function(e) {
        randomcolor="#"+((1<<24)*Math.random()|0).toString(16);
        //console.log(randomcolor);
        
        var width = getViewportWidth(), // ширина окна браузера
            height = getViewportHeight(), // высота окна браузера
            top = $('#test').offset().top - $(window).scrollTop(), //положение элемента отностиельно окна браузера
            left = $('#test').offset().left - $(window).scrollLeft(),
            imgw = $('#test').width(),
            imgh = $('#test').height();
        
 
        console.log( width, height, top, left, imgw, imgh, document.body.clientHeight);
 
            $('#test').css({"border-color": randomcolor});
            switch(e.which){
                case 37: if (left>0) $('#test').css({ 'left': '-=10px', 'transform': 'rotate(180deg)'}); break;
                case 38: if (top>0 ) $('#test').css({ 'top': '-=10px', 'transform': 'rotate(-90deg)'}); break;
                case 39: if (left+imgw<width) $('#test').css({ 'left': '+=10px', 'transform': 'rotate(0)'}); break;
                case 40: if (top+imgh<height) $('#test').css({ 'top': '+=10px', 'transform': 'rotate(90deg)'}); break;
            }
 
    
    });
});
 
//-- Определение высоты и ширины окна браузера и окна контента вместе с невидимой частью --//
    var ua = navigator.userAgent.toLowerCase();
    var isOpera = (ua.indexOf('opera')  > -1);
    var isIE = (!isOpera && ua.indexOf('msie') > -1);
    function getDocumentHeight(){ // высота всей страницы вместе с невидимой частью
        return Math.max(document.compatMode!='CSS1Compat'?document.body.scrollHeight:document.documentElement.scrollHeight,getViewportHeight());
    }
    function getDocumentWidth(){ // ширина всей страницы вместе с невидимой частью
        return Math.max(document.compatMode!='CSS1Compat'?document.body.scrollWidth:document.documentElement.scrollWidth,getViewportWidth());
    }
    function getViewportHeight(){ // высота браузера
        return ((document.compatMode||isIE)&&!isOpera)?(document.compatMode=='CSS1Compat')?document.documentElement.clientHeight:document.body.clientHeight:(document.parentWindow||document.defaultView).innerHeight;
    }
    function getViewportWidth(){ // ширина браузера
        return ((document.compatMode||isIE)&&!isOpera)?(document.compatMode=='CSS1Compat')?document.documentElement.clientWidth:document.body.clientWidth:(document.parentWindow||document.defaultView).innerWidth;
    }
1
0 / 0 / 0
Регистрация: 18.04.2015
Сообщений: 10
11.07.2016, 15:20  [ТС] 5
Спасибо большое, картинка вертится, но перестала двигаться вовсе. НУ и цвет контура пропал). Но я думаю тут справлюсь сам) Спасибо.

Добавлено через 21 минуту
Условия left+imgw<width и left+imgw<heidth не срабатывают, уходит за границы.
0
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277
11.07.2016, 16:21 6
она не двигается потому что не заданы начальные координаты.
пропиши
HTML5
1
2
3
4
5
6
7
8
<style>
#test{
border-style:solid;
border-weight: 10px;
position: absolute;
top: 10px;
left: 10px;
</style>
А то что вправа и вниз уезжает я заметил, там прокрутка включается. надо подумать как сделать
0
11.07.2016, 16:21
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
11.07.2016, 16:21
Помогаю со студенческими работами здесь

Ограничение движения объекта с помощью hitTestPoint
Столкнулся с проблемой. Есть мувик Stage1 на сцене, в нем 2 мувика currentPath (путь) и currentMC....

Ограничение движения объекта в заданной области и его запуск с силой по вектору
Вечер добрый. Я новичок в Unity. Пытаюсь сделать механику подобную Angry Birds, собственно по ней и...

Ограничение движения picturebox
Всем привет, ув. Форумчане Еле как разобрался с тем чтобы picturebox следил за мышкой. и теперь я...

Ограничение движения камеры
Здравствуйте!Подскажите как ограничить полёт камеры?Может создать Vector?


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru