|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
28.09.2010, 18:27 | #1 |
Пользователь
Регистрация: 15.03.2010
Сообщений: 36
|
графика в JavaScript (хоровод)
Здравствуйте! Помогите, пожалуйста, разобраться с алгоритмом задачи. Возьмите четыре любые картинки одинакового размера (можно взять изображения игральных карт). Сделайте так, чтобы на Вашей странице отображались одновременно все четыре картинки в разных местах.
Картинки должны "водить хоровод". Т.е. один раз в полсекунды, все они должны перейти "по кругу" по часовой стрелке. Т.е., первая картинка, должна занять место второй, вторая - третьей, третья - четвертой и четвертая - первой. Лучше, просто разместить картинки сверху, слева, справа, снизу. И сделать анимацию, загрузка картинок на каждой позиции или можно сделать все с помощью координат, как организовать круг? Спасибо! |
28.09.2010, 19:12 | #2 |
Старожил
Регистрация: 19.04.2010
Сообщений: 2,702
|
Это стандартная задача для web-игр. Решение: создаете массив координат и в определённое время заставляете картинку пробежаться по нему.
|
28.09.2010, 19:20 | #3 |
Пользователь
Регистрация: 15.03.2010
Сообщений: 36
|
Спасибо большое!!! Напишите, если Вам не сложно, пример массива координат.
|
28.09.2010, 21:08 | #4 |
Форумчанин
Регистрация: 02.10.2009
Сообщений: 255
|
Ну вот так примерно:
Код HTML:
<html> <head> <title></title> <script language="JavaScript"> function mouse() { mouse1.style.pixelLeft+=3 mouse1.style.pixelTop+=3 id=window.setTimeout("mouse()",100) if(mouse1.style.pixelLeft>297&&mouse1.style.pixelTop>197) { clearTimeout(id) } x() } function x() { mouse3.style.pixelLeft-=3 mouse3.style.pixelTop+=3 id1=window.setTimeout("mouse1()",100) if(mouse3.style.pixelLeft<403&&mouse3.style.pixelTop>397) { clearTimeout(id1) } y() } function y() { mouse2.style.pixelLeft-=3 mouse2.style.pixelTop-=3 id2=window.setTimeout("mouse2()",100) if(mouse2.style.pixelLeft<203&&mouse2.style.pixelTop>353) { clearTimeout(id2) } z() } function z() { mouse4.style.pixelLeft+=3 mouse4.style.pixelTop-=3 id3=window.setTimeout("mouse3()",100) if(mouse4.style.pixelLeft<97&&mouse4.style.pixelTop<247) { clearTimeout(id3) } } </script> </head> <body onLoad="mouse()"> <img src="/home/serkym/Документы/Рисунки/mouse1.gif" width=100 height=150 style="position:absolute;top:0;left:250" id=mouse1> <img src="/home/serkym/Документы/Рисунки/mouse1.gif" width=100 height=150 style="position:absolute;top:400;left:250" id=mouse2> <img src="/home/serkym/Документы/Рисунки/mouse1.gif" width=100 height=150 style="position:absolute;top:200;left:450" id=mouse3> <img src="/home/serkym/Документы/Рисунки/mouse1.gif" width=100 height=150 style="position:absolute;top:200;left:50" id=mouse4> </body> </html>
"Реальность воображаема, а воображаемое - реально" В. Соло
Последний раз редактировалось Stilet; 29.09.2010 в 08:55. |
28.09.2010, 22:46 | #5 |
Пользователь
Регистрация: 15.03.2010
Сообщений: 36
|
Огромное спасибо!!!!!!!!
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
% и ^ в javascript | HTL | JavaScript, Ajax | 4 | 21.01.2010 20:46 |
javascript | kettyrus | Помощь студентам | 1 | 03.10.2009 14:00 |
Игра "Новогодний хоровод" | Phoenix77 | Gamedev - cоздание игр: Unity, OpenGL, DirectX | 7 | 02.02.2009 18:18 |