Jquery for Games: февраля 2013

вторник, 26 февраля 2013 г.

Использование функций

Речь пойдёт не о математике, а о практике многократного использования части программы для того, чтобы выполнить какую-либо задачу.
Например, у нас есть несколько окошек, которые мы сделали с помощью слоёв (<div></div>)
И мы хотим, чтобы окошко выскакивало по центру страницы.
Для того, чтобы это сделать достаточно написать:

$("#_наш_слой").css("left","50%");
$("#_наш_слой").css("margin-left",-1*(obj_width/2));

А если в программе предусмотрено 10 диалогов.

Поэтому можно написать функцию, в ней прописать заранее действия, которые мы предполагаем предпринять с нашими слоями.
Функция в Java Script начинается со слова function далее идёт имя функции. Пробелы в имени, спецсимволы недопустимы. Пробелы можно заменить на знак подчёркивания. Наша функция будет называться - "помести_в_центр" (place_in_center)

function place_in_center(obj){
// вычисляем ширину obj (obj - переменная объекта)
var obj_width=$(obj).width();
// вычисляем высоту
var obj_height=$(obj).height();
//рисуем слева начиная от половины экрана
$(obj).css("left","50%");
//смещаем в лево на расстояние равное половине ширины объекта
$(obj).css("margin-left",-1*(obj_width/2));
// делаем тоже самое по вертикале
$(obj).css("top","50%");
$(obj).css("margin-top",-1*(obj_height/2));
}

После того, как функция написана, её помещают в начале программы - функцию объявляют.
После этого её можно многократно использовать.

place_in_center("#dialog_1");
place_in_center("#dialog_2");
place_in_center("#dialog_3");

и т.д.

Пример ниже можно скопировать пометить в текстовой файл, сохранить файл с расширением .html, например: "test.html" и открыть с помощью Google Crome.
Внимание! Для того, чтобы пример работал файл jquery.js, должен быть в той же папке.
Скачать jquery-1.5.1.js (для примера) можно отсюда: http://2l4u.ru/pub/js/jquery-1.5.1.js

<!DOCTYPE html>
<html lang="ru">
<head>    <meta charset="utf-8">
    <title>jQuery Example</title>
    
    <script src="jquery-1.5.1.js"></script>


<script>
$(document).ready(function() {

function place_in_center(obj){

var obj_width=$(obj).width();

var obj_height=$(obj).height();

$(obj).css("left","50%");

$(obj).css("margin-left",-1*(obj_width/2));

$(obj).css("top","50%");

$(obj).css("margin-top",-1*(obj_height/2));
}

place_in_center("#dialog_1");

place_in_center("#dialog_2");

place_in_center("#dialog_3");

});
</script>

<body>

<div id="dialog_1" style="position: absolute; background: #cc6600; width: 700px; height: 350px; border: solid #000000 4px; padding: 4px;">



Frame 1

</div>

<div id="dialog_2" style="position: absolute; background: #ff33cc; width: 600px; height: 300px; border: solid #000000 2px; padding: 4px;">



Frame 2

</div>

<div id="dialog_3" style="position: absolute; background: #336699; width: 500px; height: 250px; border: solid #000000 1px; padding: 4px;">



Frame 3
</div>

</body>

</html>

пятница, 22 февраля 2013 г.

Jquery-Follow mouse Как следить за указателем.

В Jquery очень просто организовать отслеживание положение указателя на странице.
Иногда это бывает необходимо для того, чтобы разместить в позиции указателя элемент управления, всплывающую подсказку и т.п.

Для того, чтобы протестировать работу нужно создать страницу с помощью блокнота или c помощью программы Notepad++, которую можно бесплатно скачать отсюда: http://notepad-plus-plus.org/
и написать внутри страницы следующие:
<!DOCTYPE html>
<html lang="en">
<head>   <meta charset="utf-8">
   <title>jQuery Example</title>
   
    <script src="jquery-1.5.1.js"></script>
После этого, можно проверить работу JQuery следующим образом.
Напишем на странице следующий код:

<script>
$(function() {

   $(document).mousemove(function(e){
   $('#status').html(e.pageX +', '+ e.pageY);

   });

});
</script>

<body>
<div id="status">0, 0</div>
</body>

</html>

При запуске страницы с помощью Google Chrome и нажатии на клавишу должно появится окошко с числовым кодом нажатой клавиши
Пояснение
Конструкция $(document).mousemove(function(e){ - запускает перехват ввода указателя.
Событие просиходит, когда мышь двигается (mousemove) , из объекта e с помощью методов pageX и e.pageY , можно получить координаты указателя на странице (в документе)

Для того, чтобы отобразить координаты, мы используем слой с идентификатором "status"

Конструкция $('#status').html(); - помещает значение координат внутрь слоя.

вторник, 19 февраля 2013 г.

Jquery и нажатия клавиш

В Jquery существует удобный интерфейс позволяющий отлавливать пользовательский ввод. Буквально несколько строк кода позволяет слушать и выстраивать адекватное взаимодействие с пользователем.
Для того, чтобы протестировать работу Jquery с пользовательским вводом (нажатие клавиш) нужно создать страницу с помощью блокнота или c помощью прекрасной программы Notepad++, которую можно бесплатно скачать отсюда: http://notepad-plus-plus.org/
и написать в коде страницы следующие:
<!DOCTYPE html>
<html lang="en">
<head>   <meta charset="utf-8">
   <title>jQuery Example</title>
   
    <script src="jquery-1.5.1.js"></script>
После этого, можно проверить работу JQuery следующим образом.
Напишем на странице следующий код:

<script>
$(document).keydown(function(e){
    alert(e.keyCode);
    });
</script>

<body>

</body>

</html>

При запуске страницы с помощью Google Chrome и нажатии на клавишу должно появится окошко с числовым кодом нажатой клавиши
Пояснение
Конструкция $(document).keydown( ) - запускает слушатель нажатия на клавиши. Функция function(e) через переменную e транслирует код клавиши, используя свойство keyCode

Это очень удобно использовать при разработки игр с помощью сервиса http://2l4u.ru

Ниже пример использования кода

При нажатии на клавишу S, герой начинает двигаться
$(document).keydown(function(n) {

switch (n.keyCode){
case 83:
move_forvard=1;
show_object("#player_run_forward");
hide_object("#player_stand");
break;
}
});

При отпускании клавиши, останавливается

$(document).keyup(function(n) {
show_object("#player_stand");
hide_object("#player_run_forward");

move_forvard=0;
});

Jquery и CSS

CSS это каскадные таблицы стилей - это инструмент возник в эпоху интернета 2.0, когда для успешного ведения бизнеса в интернете стало нехватать изобразительных средств.
Дело в том, что интернет (страницы и первый браузер) создавали физики, а не лирики и не бизнесмены (как нам повезло ;) ). Поэтому они изначально заложили во всё строгий транспарентный фундамент, логику в сочитании с объявленными стандартами. Но время шло и у сообщества появилось желание попробывать новые формы привлечения внимания пользователей. Появилась и получила поддержка идея разделить оформление страницы и элементы разметки. Для дизайнеров оказалось удобнее создать одну таблицу со стилями и потом подключать её к множеству страниц, чем прописывать оформление в каждый тэг.
Когда стандарт CSS появился он был принят не всеми сразу, были ошибки и современем пришлось доработать до CSS второй версии.
Визуально к эре интернета 2.0 относят появление всякого рода сглаженных очертаний кнопок и окон. Муветоном стали считаться гиперссылки выделенные синим цветом. Широкое распостронение получили ролоуверы...
Интересной особенностью в JQuery является возможность управление стилями тэгов.
Предположим что у нас есть слой с id pixcont - <div id="pixcont"></div>
А вот так можно урасить pixcont
<script>
$(document).ready(function() {

$("#pixcont").css("border","1px solid #110f00");
$("#pixcont").css("padding","3px");
$("#pixcont").css("cursor","pointer");
$("#pixcont").css("width","800px");
$("#pixcont").css("height","600px");
$("#pixcont").css("overflow","scroll");

});
</script>

Поясню:
1. $("#pixcont").css("border","1px solid #110f00"); - рисуем рамку по периметру размером 1 px и цветом ( #110f00)
2. $("#pixcont").css("padding","3px"); - создаём отступ для содержание, чтобы оно не прилипало к краям
3. $("#pixcont").css("cursor","pointer"); - меняем курсор при наведении
4. $("#pixcont").css("width","800px"); $("#pixcont").css("height","600px"); - ширина, высота
5. $("#pixcont").css("overflow","scroll"); - если текст, или картинка будут больше нашего элемента, появятся полосы прокрутки.

В Jquery любой элемент может быть кнопкой

Создадим страницу с помощью блокнота или c помощью прекрасной программы Notepad++, которую можно бесплатно скачать отсюда: http://notepad-plus-plus.org/

Напишем в начале страницы сл. код:
<!DOCTYPE html>
<html lang="en">
<head>   <meta charset="utf-8">
   <title>jQuery Example</title>
   
   <script src="jquery-1.5.1.js"></script>

<script>
$(document).ready(function() {

$("#btn_01").click(function(){
alert("you click the button");
});
});
</script>
</head>

<body>
<div id="btn_01" style="border: solid #000000 1px; padding: 5px; width: 120px; cursor: pointer;">button</div>
</body>
</html>

Пояснение. Итак. После тэга <body> - у нас имеется элемент, который называется btn_01. Это слой, который с помощью стиля (style) имеет очертания - border (размером в 1 пиксел), черного цвета (#000000)... Кроме того, я добавил изменение курсора - cursor: pointer, чтобы при наведении он менялся

Наверху внутри конструкции $(document).ready(function() {    располагается

$("#btn_01").click(function(){
alert("you click the button");
});

Нашему слою btn_01 мы присваиваем действие click

При запуске страницы с помощью Google Chrome при нажатии на клавишу появится окошко с надписью "you click the button!"

Таким же образом можно создать неограниченное количество кнопок для любых целей

Как подключить Jquery

Начать работать с Jquery или подключить Jquery очень просто.
Нужно скачать последнюю версию с официального сайта http://jquery.com/
Далее нужно создать страницу с помощью блокнота или c помощью прекрасной программы Notepad++, которую можно бесплатно скачать отсюда: http://notepad-plus-plus.org/
и написать в коде страницы следующие:
<!DOCTYPE html>
<html lang="en">
<head>   <meta charset="utf-8">
   <title>jQuery Example</title>
   
    <script src="jquery-1.5.1.js"></script>

После этого, можно проверить работу JQuery следующим образом.
Напишем на странице следующий код:

<script>
$(document).ready(function() {
alert("Hello world!");
});
</script>

<body>

</body>

</html>

При запуске страницы с помощью Google Chrome должно появится окошко с надписью "Hello world!"
Пояснение
Конструкция $(document).ready - запускает работу сценария в момент старта страницы, запускается "безымянная" системная функция function() - в которой можно запустить, что угодно во время старта или подготовить функции, например подготовить обработчики кнопок.
В этом есть некоторая строгость Jquery. Java Script позволяет разработчику вольно раскидывать код по всей странице, в то время как Jquery собирает его в одном месте.

Имея мощный интерфейс взаимодействие с элементами управления, Jquery может себе это позволить.

Что такое Jquery

Jquery это упрощённый и оптимизированный под различные браузеры Java Script, точнее сказать библиотека.
Дело в том, что сам Java Script очень мощный язык программирования, обладает огромным количеством возможностей и логикой С.
Начинающий программист или дизайнер сайтов может быстрее научится использовать Jquery для различных задач, чем освоить Java Script и написать полноценное веб-приложение. Выдержать логику и синтаксис на высоком уроне новичку не под силу. Не говоря уже о том, чтобы соблюсти все тонкости и сделать приложение кросс-платформенным (работающим одинаково на разных платформах)
Ещё один плюс Jquery в том, что работа с технологией Ajax - асинхронной работы с сервером упрощена и унифицирована.
Что такое асинхронная работа с сервером?
Раньше (до появления ajax) было так. Если пользователь, нажимал на какой-нибудь элемент управления на странице, связанной с сервером, ну например, на кнопку рейтинга, или оставлял комментарий, то перезагружалась вся страница. Это очень неудобно. Особенно если страница увешана баннерами. В итоге пришла необходимость создавать элементы управления, которые, при нажатии перезагружаются, а страница нет. Теперь можно смело ставлть лайки не беспокоясь, что придётся ждать пока сервер снова откроет страницу.
Кроме того, Jquery дал старт огромному количеству плагинов работающих под Jquery. Это и всплывающие окна, и комментарии, и галереи; многочисленные кнопки рейтингов, диалоги, валидаторы форм и т.д.
Кроме того, появились сервисы использующие Jquery для построения игр и один из них http://2l4u.ru

вторник, 26 февраля 2013 г.

пятница, 22 февраля 2013 г.

вторник, 19 февраля 2013 г.

вторник, 26 февраля 2013 г.

пятница, 22 февраля 2013 г.

вторник, 19 февраля 2013 г.