Javascript-форум - Перемещение дива внутри другого дива по диагонали с отталкиванием от границ

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Перемещение дива внутри другого дива по диагонали с отталкиванием от границ (https://javascript.ru/forum/dom-window/22798-peremeshhenie-diva-vnutri-drugogo-diva-po-diagonali-s-ottalkivaniem-ot-granic.html)

Перемещение дива внутри другого дива по диагонали с отталкиванием от границ

Здравствуйте, столкнулся с некоторой проблемой при решении следующей задачи: нужно внутри дива (высота 200px ширина 300px) перемещать другой див (30x30px) чтобы он сам по себе начинал движение по диагонали и отталкивался от границы дива-родителя. Я начал реализовывать это самым примитивным способом, чтобы в процессе апгрейдить все по феншую.

Сейчас я приведу код html файла и css файла.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Ололо шарик</title>
<link href="circus.css" rel="stylesheet" type="text/css">

</head>
<body onload="hod()">

<script>
function hod() {
if (ball.style.pixelTop<170) {
ball.style.pixelTop+=2;
ball.style.pixelLeft+=2;
setTimeout("hod()", 63);
}
}
</script>

<div id="field">
<div id="ball">
</div>

</body>
</html>

__________________________________________________ ________

#field {
padding: 0;
margin: 0;
width: 300px;
height: 200px;
border: 1px solid black;
position:absolute;
background-image: url('fieldbg.jpg');
}

#ball {
position:absolute;
left:0;
top:0;
padding: 0;
margin: 0;
width: 28px;
height: 28px;
border: 1px solid black;
background-color: red;
-moz-border-radius: 14px;
border-radius: 14px;
background-image: url('ballface.jpg');
}

Собственно сабж. Я довел дело только до того чтобы шарик достиг нижней границы дива-родителя. Дальше я хочу явно указать куда и докуда двигаться аналогично коду выше. Но поскольку я в JS пока еще чайник обращаюсь к вам за советом. Я пробовал после if втыкать else, но ничего не получилось.

P.S. повтор, но никаких других способов пока не хочу.

Здесь можно посмотреть что получилось

Просто продумай логику. Эта реализация делается в одну функцию из 5 строк с 3 аргументами - 2 коэффициента и шаг. А на каком языке написать её не имеет значения.Суть везде будет одна.

<body onload="start()">

<script>
function start() {
var dx = 2; // проинитим dx и dy
var dy = 2; // и дернем первый раз наш "ход", а дальше он уж сам
hod();

// а вот и наш ход - определен прям внутри старта, и ниче...
function hod() {
if (ball.style.pixelTop<700) {
ball.style.pixelTop+=dx;
ball.style.pixelLeft+=dx;
setTimeout("hod()", 63);
} // функция ход кончилась
} // функция старт кончилась

if (left <= 0 || left >= width) { // наткнулись на левую или правую границы поля,
dx = -dx; //меняем знак dx, поехали в другую сторону по горизонтали
}
if (top <= 0 || top >= height) { // наткнулись на верх или низ поля
dy = -dy; //меняем знак dy, поехали в другую сторону по вертикали
}
}
</script>

скрипт все равно не работает, шар не двигается.. думаю наделал ошибок в синтаксисе

Небольшая игрушка

Вот небольшая игрушка, шарик отскакивает от курсора - добавь 10 шаров и проверяй чтобы позиция шара+высота была меньше высоты блока иначе game over и можешь играть...

Цитата:

Сообщение от madcap

Не хочется повторно постить себя, но посмотри - здесь то, что тебе нужно (как я понял), реализовано (наведи курсор на стрелки):

http://www.sg-foto.ru/submoscow

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Здравствуйте!

Судя по вашему сообщению, вы ну совсем не знаете javascript.

Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://htmlbook.ru

Задавайте конкретные вопросы по ходу дела.

HTML знаю, JS действительно начал пользовать только пару дней назад. Конкретно что я хочу сделать - чтобы шарик двигался по диагонали, отталкивался от границ дива и продолжал движение. Без активации мышкой или наведения, без других шариков. Просто сам себе колбасился бесконечно ) Я в последнем своем сообщении вставил кусок кода, который по моим убеждениям должен работать. Но шарик фризится, думаю есть синтаксическая ошибка. Сам найти не могу ( В упор не вижу, уже давно сижу и пытаюсь понять что там не так.

madcap,
Рабочий вариант для медитации ...

<!DOCTYPE >
<html>
<head>
  <title></title>
<style type="text/css">
#field {
padding: 0;
margin: 0;
width: 300px;
height: 200px;
border: 1px solid black;
position:absolute;
background-image: url('fieldbg.jpg');
}

#ball {
position:absolute;
left:0;
top:0;
padding: 0;
margin: 0;
width: 28px;
height: 28px;
border: 1px solid black;
background-color: red;
-moz-border-radius: 14px;
border-radius: 14px;
background-image: url('ballface.jpg');
}
</style>
</head>
<body>
<div id="field">
<div id="ball"></div>
</div>
<script type="text/javascript">
var dx = -2;
var dy = -2;
var ball = document.getElementById('ball');
var left = 0;
var top = 0;
hod();

function hod() {
if (left <= 0 || left >= 272) {
dx = -dx;
}
if (top <= 0 || top >= 172) {
dy = -dy;
}
left+=dx;
top+=dy;
ball.style.top=top+"px";
ball.style.left=left+"px";
window.setTimeout("hod()",63) ;
}
</script>
</body>
</html>

Спасибо, я кстати сам так и сделал )