графика в JavaScript (хоровод) - JavaScript, Ajax

Vinnipux · 28.09.2010, 18:27

Здравствуйте! Помогите, пожалуйста, разобраться с алгоритмом задачи. Возьмите четыре любые картинки одинакового размера (можно взять изображения игральных карт). Сделайте так, чтобы на Вашей странице отображались одновременно все четыре картинки в разных местах.
Картинки должны "водить хоровод". Т.е. один раз в полсекунды, все они должны перейти "по кругу" по часовой стрелке. Т.е., первая картинка, должна занять место второй, вторая - третьей, третья - четвертой и четвертая - первой.
Лучше, просто разместить картинки сверху, слева, справа, снизу. И сделать анимацию, загрузка картинок на каждой позиции или можно сделать все с помощью координат, как организовать круг? Спасибо!

Виталий Желтяков · 28.09.2010, 19:12

Это стандартная задача для web-игр. Решение: создаете массив координат и в определённое время заставляете картинку пробежаться по нему.

Vinnipux · 28.09.2010, 19:20

Спасибо большое!!! Напишите, если Вам не сложно, пример массива координат.

ser70 · 28.09.2010, 21:08

Ну вот так примерно

:

Код 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>

Конечно он немного не отредактирован.

Vinnipux · 28.09.2010, 22:46

Огромное спасибо!!!!!!!!

28.09.2010, 18:27	#1
Vinnipux Пользователь Регистрация: 15.03.2010 Сообщений: 36	графика в JavaScript (хоровод) Здравствуйте! Помогите, пожалуйста, разобраться с алгоритмом задачи. Возьмите четыре любые картинки одинакового размера (можно взять изображения игральных карт). Сделайте так, чтобы на Вашей странице отображались одновременно все четыре картинки в разных местах. Картинки должны "водить хоровод". Т.е. один раз в полсекунды, все они должны перейти "по кругу" по часовой стрелке. Т.е., первая картинка, должна занять место второй, вторая - третьей, третья - четвертой и четвертая - первой. Лучше, просто разместить картинки сверху, слева, справа, снизу. И сделать анимацию, загрузка картинок на каждой позиции или можно сделать все с помощью координат, как организовать круг? Спасибо!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
% и ^ в 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

28.09.2010, 19:12	#2
Виталий Желтяков Старожил Регистрация: 19.04.2010 Сообщений: 2,702	Это стандартная задача для web-игр. Решение: создаете массив координат и в определённое время заставляете картинку пробежаться по нему.

28.09.2010, 19:20	#3
Vinnipux Пользователь Регистрация: 15.03.2010 Сообщений: 36	Спасибо большое!!! Напишите, если Вам не сложно, пример массива координат.

28.09.2010, 22:46	#5
Vinnipux Пользователь Регистрация: 15.03.2010 Сообщений: 36	Огромное спасибо!!!!!!!!