Описание игры: обычный кликер, где волк будет перемещаться по полям, а вам нужно успеть за ним, щелкнуть на нем. Количество попаданий будет показано на счетчике.
Ресурсы: Eclipse Mars for PHP Developers,
jdk 7 (Java Development Kit )
Firefox 40
картинка 160х160
Цель работы: написать простую игру на JavaScript, которая позволила бы познакомиться с некоторыми моментами этого языка, такими как взаимодействие с CSS и HTML.
Еще раз акцентирую внимание, что это для тех кто делает первые шаги в разработке на JavaScript, только начал его изучать и хочет получить какой-то наглядный результат.
Итак, начнем.
1) Создаем новый проект File - New - Project... - JavaScript
После того как проект создан, слева у Вас в PHP Explorer будет папка. На ней откроем контекстное меню и там New - Other - JavaScript. Рисунок
Но, сначала создадим HTML файл.
2) создаем index.html и запишем такой код:
Примечание: строка 1 - запись указывает, что html 5 будет
строки 2 до 4 - теги HTML
строка 5 - подключаем внешний файл .js в HTML
строка 6 - подключаем внешний файл CSS в HTML 5
строка 7 - конец заголовочного тега HTML документа
строка 8 - открываем тег тела HTML документа (body) и в качестве атрибута указываем обработчик события при окончании загрузки (onload). Он должен обратиться к функции createPicture(), которая будет находится в js-файле.
строки с 9 по 20 - создаем таблицу со строками и ячейками. Каждой ячейки присваиваем уникальный id. Отмечу, что данный метод не совсем корректен, но для понимания происходящего процесса в дальнейшем и осваивания работы с HTML, этот подход наиболее прост и эффективен. строка 21 - это будущий счетчик. Здесь так же задается уникальный id и в добавок указываем число 0, потому что счёт пойдет с нуля.
строки 23 и 24 - закрываем теги документа.
3) Возьмем картинку размером 160х160. Если картинка большая, то можете ее сжать до нужного размера. Картинка здесь :) И положим в файл с проектом (в ту папку, где создан проект игры)
4) Создадим файл source.js Запишем следующий код.
Примечание: JavaScript не типизированный язык. По этой причине, у переменных в коде нет типа. Возьмем строчку 2:
а) здесь видно var ( указывает, что будет создана переменная),
б) затем идёт имя переменной. Я назвала ее image. (по подробнее о переменных можно прочесть здесьПеременные). в) и заканчивает всё конструкция new Image(). C new наверно понятно, указывается, потому что мы хотим что-то новое создать. А вот Image повторяется сново и с Заглавной буквы. Отмечу, что эта Image не наша image, а это её как таковой тип, поэтому она пишется с заглавной буквы, чтобы отделять (придуманные имена переменных) от похожих на нее. Но за ней следуют круглые скобочки - это означает, что мы хотим вызвать функцию (конструктор), которая нам положит данные (ссылку) в нашу созданную переменную. г) Так как наша переменная создана не внутри какой-то функции, то она считается Глобальной. К ней теперь может обращаться каждый, находящийся в нашем файле.
Возьмем строчку 3: Здесь мы вешаем слушатель события (addEventListener) на клик мышкой по картинке ("click"). И если событие произойдет, то будет вызвана функция bitWolf.
Строчка 5
Создаем первую функциюcreatePicture(). Обратите внимание, что имя этой функции уже упоминалось в HTML. Именно ее будем вызывать при завершении загрузки файла.Для нас это своего рода точка входа в js-файл.
Строка 6
Здесь мы устанавливаем таймер для волка, что б он мог перемещаться с одной клетки в другую.
Разберем по подробнее.
window.setInterval("tick()", 150);
Здесь мы видим объект Window, который является корневым и все свойства, методы, функции и даже переменные являются его свойствами и методами. Писать "window." при обращении к объектам и переменным необязательно так как на JavaScript он подставляется автоматически, отметим, что машина выполнения JavaScript создаёт объект window для каждого тэга BODY. setInterval - это метод объекта Window, который позволяет через равные промежутки времени срабатывать таймеру. И в скобках идут параметры для работы с ним. Сначала мы указываем, что он должен сделать, если подошло время, в нашем случае это вызвать функцию "tick()". Следующий параметр указывает задержку (в миллисекундах), то есть, через какое время (у нас это 150 мс) опять вызвать функцию.
Строка 9 по 12
Как уже говорилось, мы повесили событие на клик мыши. В данном случае эта функция-события внутри которой указаны функции, которые нужно вызвать, если попали по картинке. Первая функция getGoal() нам нужна для того что бы изменить количество очков, а вторая - tick(), чтобы переместить волка не дожидаясь, когда сработает таймер.
Cтрока с 14 по 25
Сначала Вы видите как сделать комментарий в JavaScript. Достаточно поставить два слэша (//). В комментарии у меня помечен код, это для того, что бы напомнить, как остановить запущенный таймер. В данном разделе мы его использовать не будем, но Вы теперь знаете, что он существует и его можно использовать в дальнейших своих проектах.
Итак, создаем функцию tick() для таймера. Вспомним, что у нас есть глобальная переменная image и обратимся к ней для использования ее свойства src. Этому свойству мы как бы говорим, что хотим, что бы у тебя была такая-то картинка (указываем имя и расширение). Отмечу, что, так как картинка лежит рядом с проектом, то нам не нужно указывать ее путь. Иначе же здесь нужно указать путь, где находится Ваша картинка относительно проекта.
Вспомним, что созданная нами таблица имеет две строки и три столбца. Для перемещения, волк должен знать в какую ячейку ему нужно придти. Поэтому здесь создаются две переменные, одна Х - отвечает за строки, вторая Y - отвечает за столбцы. В эти переменные приходит число из другой функции с getNumber(значение).
Рисунок 1 - Пример расположения ячеек в игре Стандартно, система координат по оси Х идет по горизонтали, но у меня сделано по другому. Я девочка, мне можно :)
Рассмотрим строчку 23. Эта функция создана для нашего удобства, чтоб не писать несколько раз длинный код в одну строчку, а вызвать нами созданную функцию и получить с нее значение.
Итак, что представляет собой эта функция:
getNumber(max_number)
Название говорит само за себя. Мы должны получить число, но для этого мы сначала должны передать в функцию какое-то наше максимальное значение из которого нужно будет взять случайным образом число.
И за это отвечает вот такая конструкция.
Math.floor(Math.random()*max_number);
Начнем со скобок. Объект Math содержит в себе математические функции.
У объекта есть метод random, чтобы случайным образом получить число [0,1). Расшифрую: мы получим число от нуля ( ноль входит в выборку) до единицы, где сама единица не входит в выборку. А это значит, что мы можем получить максимальное число 0.999. Поэтому, имея две строки, мы прибавим единицу и получим максимальное число строк - три, в результате два будет входить в выборку [0,3). Для чего мы умножаем число рандома на максимальное? Потому что рандом у нас в пределах [0,1), а нам, к примеру, нужно [0,3). И если у нас рандом выдал 0, а максимальное число 3, то 0*3=0. Или рандом выдал 0.5, то 0.5*3 = 1.5 - это число больше 1, которую дал бы рандом и оно входит в предел [0,3). Так же у объекта есть метод floor(). Он нам нужен для округления чисел ( метод возвращает наибольшее целое число, меньшее, либо равное указанному числу). К примеру, мы получили результат 1.5, а нам нужно целое число 1 или 2, потому что клетки с номером 1.5 нет в таблице, поэтому мы ее округлили в меньшую сторону и на выходе получим число 1.
Ну и впереди стоит return - именно он и указывает функции, что полученный результат нужно вернуть туда, откуда был вызов.
А теперь вернемся к строчкам 17 и 18. В результате описания, уже должно быть понятно, что за Магические числа указаны в скобочках функцииgetNumber, а так же было описано, почему они такие.
В строке 19 аккумулируем информацию, переведя числа в строки. Так как у нас id в ячейках таблицы начинается с "pic", а это выходит строка, то воспользуемся методом concat для корректного сложения всех данных в строку. Таким образом, мы получим полноценное id ячейки, где должен будет оказаться волк.
Рассмотрим строку 20
Именно она отображает нашего Волка в указанной ячейки.
Для работы с HTML (документом/страницей) у JavaScript есть объект document. Он существует в единственном экземпляре для всего HTML-документа. Так же, он всегда присутствует, если существует HTML-документ. Пользуясь его свойствами и методами можно получить информацию о текущем документе, загруженном в окно браузера, а также управлять отображением содержимого этого документа. В данном случае мы воспользовались его методом getElementById, чтобы найти элемент по id, в результате, он нам вернет ссылку на нужный нам элемент из страницы с HTML. А затем мы просим к найденному элементу добавить дочерний appendChild, то есть вложить внутрь образовав новый узел. Таким образом, мы получим родителя и ребенка, где в качестве ребенка будет наша картинка.
Рисунок 2 - Пример работы метода appendChild в структуре DOM
Строка 27 Работаем со счетчиком.
1) сначала считываем число, которое у нас находится в счетчике.
Для этого, опять воспользуемся поиском по id. Как только нашли, считываем информацию с помощью innerHTML. 2) Полученное число приводит к числовому виду с помощью конвертера типа Number и прибавляем одно очко, так как сюда мы попали, потому что пользователь щелкнул по картинке.
3) Возвращаем информацию обратно на страницу. Используем все те же самые методы и свойства, что при ее получении, только в этот раз в конце указываем, что нам написать вместо того что было.
Всё, работа почти сделана. Остались не большие проблемы.
Ячейки таблицы маленькие, так как мы не указали их размер в HTML документе, а еще, курсор попадая в ячейку меняется, а нам так не удобно.
5) Создадим файл .css И укажем всё, что нам нужно.
В кратце: CSS, или каскадные таблицы стилей - это описание стилей HTML тегов. Он расширяет возможности HTML, позволяет улучшить внешний вид Ваших страниц. Примечание: Селектор: table td, то есть мы выбрали и написали тег, который хотим использовать, что бы изменить его представление на странице.
Его свойства, которые будем изменять можно увидеть в строках с 2 по 5 включительно. Таким образом, мы задали длину и высоту ячеек, нарисовали бордюр, что бы можно было видеть границы таблицы и самое главное, указали какой должен быть курсор при наезде на таблицу.
Наверно вы обратили внимание, что общая схема css, такая: Селектор{ свойство: значение; }
Теперь можно самостоятельно работать.
Всё. Игра закончена. Время играть!
