| Издательский дом ООО "Гейм Лэнд" | СПЕЦВЫПУСК ЖУРНАЛА ХАКЕР #26, ЯНВАРЬ 2003 г. |
TIPS OF WEB - Сайт перед Рождеством
Vadias
Спецвыпуск Xakep, номер #026, стр. 026-106-1
(painter@gameland.ru, www.freehand.str.ru)
Кто сказал, что под Новый год украшают только елки? Твой сайт ничуть не хуже, и сегодня мы, как и положено, добавим в него немного волшебства и декораций. А поможет нам с волшебством не кто иной, как великий и ужасный Dynamic HTML. Чтобы сразу посмотреть, какая пага из всех описываемых телодвижений должна получиться, слетай по адресу: www.freehand.str.ru/newyear, а если что неясно - просто намыль мне (только, чур, без вопросов, где найти фотки с голыми снегурочками).
TIPSA 1
Веселиться, так веселиться! Пусть вход на твой обновленный сайт будет начинаться, ни много ни мало, с микроигры. Нет, не надо закачивать третий "Doom" на бедный сервак - можно обойтись простеньким скриптом.
TIPSA 2
Итак, гама "Закликай Деда ОтМороза". Суть игры такова: когда юзер заходит на сайт, перед ним по странице туда-сюда носится Дед Мороз, и чтобы увидеть дальнейшее содержимое сайта, юзер должен щелкануть мышой по старику (его изображение является ссылкой на основную страницу).
TIPSA 3
Сперва нужно подготовить две зеркальные картинки с Морозом - одна носом вправо, другая носом влево (иначе - что будет носиться по экрану). Дай им понятные имена, я, например, назвал свои пикчи "deda-l.gif" и "deda-r.gif".
TIPSA 4
Весь скрипт нужно засунуть между новогодними тегами <head> и </head>:
<script >
var wid=window.screen.width; //здесь мы узнаем ширину экрана юзера.
var x=-80; //вводим переменную с отрицательной горизонтальной координатой, чтобы картинка уезжала за экран.
var svich=false; //с помощью этой переменной меняется направление движения.
function window_onload() { //эта функция при загрузке страницы запускает основную функцию и устанавливает таймер обновления на 5 миллисекунд.
window.setInterval("move()", 5);
}
function move() { //это функция, которая двигает картинку.
if(svich==false){
imaj.src="deda-r.gif"; //источник (source) изображения устанавливается здесь.
x=x+7; //устанавливаем, на сколько пикселей за раз сдвигается картинка.
if(x>=wid){ //видишь, когда координата по оси X становится больше или равной ширине экрана,
svich=true; //направление движения меняется.
imaj.src="deda-l.gif"; //source картинки изменяется.
}
}
else {
x=x-7;
if(x==-80){
svich=false;
}
}
deda.style.left=x+"px"; //эта строка устанавливает начальную координату картинки, равную переменной x, т.е. -80.
}
</script>
TIPSA 5
Это и был "движок" игры в Деда. Но движок надо еще запустить с толкача. Для этого после открывающего тега <body> пишем: onload="window_onload()". Также устанавливаем параметры отступа и задаем стиль курсору crosshair, то есть "прицел". Такой же стиль курсора надо установить в теге ссылки <a>. У картинки устанавливаем id, чтобы скрипт мог менять ее источник (src). Все остальное - чисто оформление.
<body onload="window_onload()" topmargin="0" leftmargin="0" style="cursor:crosshair" bgcolor="#000066">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="180px" bgcolor="#FFCC33"> </td>