Меню сайта
Категории раздела
Мои лекции [2]
C# [2]
as3 [3]
теория и практика
java [1]
первые шаги в java. Теория и практика
Web [2]
CSS, HTML, JS и т.д.
MyProgramms [2]
Образование [1]
лекции разного уровня
Python [0]
Python, микрофреймворк Flask, фреймворк Django
Мои ссылки
  • Дизайн-магазин
  • Поиск
    Статистика


    Четверг, 28.03.2024, 15:46ГлавнаяМой профильРегистрацияВыходВход
    Добро пожаловать в мой MIR!
    Вы вошли как Гость | Группа "Гости"Приветствую Вас Гость | RSS
    Главная » Статьи » Программирование » Web

    Простая игра на JavaScript
    Описание игры: обычный кликер, где волк будет перемещаться по полям, а вам нужно успеть за ним, щелкнуть на нем. Количество попаданий будет показано на счетчике.

    Ресурсы: 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 и запишем такой код:

    пример html 5

    Примечание:
    строка 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

    Примечание:
    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
    Именно она отображает нашего Волка в указанной ячейки.


    document.getElementById(idPic).appendChild(image);

    Для работы с HTML (документом/страницей) у JavaScript есть объект document. Он существует в единственном экземпляре для всего HTML-документа. Так же, он всегда присутствует, если существует HTML-документ. Пользуясь его свойствами и методами можно получить информацию о текущем документе, загруженном в окно браузера, а также управлять отображением содержимого этого документа.
    В данном случае мы воспользовались его методом getElementById, чтобы найти элемент по id, в результате, он нам вернет ссылку на нужный нам элемент из страницы с HTML. А затем мы просим к найденному элементу добавить дочерний appendChild, то есть вложить внутрь образовав новый узел. Таким образом, мы получим родителя и ребенка, где в качестве ребенка будет наша картинка.

    Пример организации связи Родитель - Ребенок

    Рисунок 2 - Пример работы метода appendChild в структуре DOM

    Строка 27
    Работаем со счетчиком.
    1) сначала считываем число, которое у нас находится в счетчике.
    Для этого, опять воспользуемся поиском по id. Как только нашли, считываем информацию с помощью
    innerHTML.
    2) Полученное число приводит к числовому виду с помощью конвертера типа Number  и прибавляем одно очко, так как сюда мы попали, потому что пользователь щелкнул по картинке.
    3) Возвращаем информацию обратно на страницу. Используем все те же самые методы и свойства, что при ее получении, только в этот раз в конце указываем, что нам написать вместо того что было.

    Всё, работа почти сделана.
    Остались не большие проблемы.
    Ячейки таблицы маленькие, так как мы не указали их размер в HTML документе, а еще, курсор попадая в ячейку меняется, а нам так не удобно.

    5) Создадим файл .css

    И укажем всё, что нам нужно.

    Пример кода игры CSS

    В кратце: CSS, или каскадные таблицы стилей - это описание стилей HTML тегов. Он расширяет возможности HTML, позволяет улучшить внешний вид Ваших страниц.
    Примечание:
    Селектор: table td, то есть мы выбрали и написали тег, который хотим использовать, что бы изменить его представление на странице.
    Его свойства, которые будем изменять можно увидеть в строках с 2 по 5 включительно. Таким образом, мы задали длину и высоту ячеек, нарисовали бордюр, что бы можно было видеть границы таблицы и самое главное, указали какой должен быть курсор при наезде на таблицу.
    Наверно вы обратили внимание, что общая схема css, такая:
    Селектор{ свойство: значение; }
    Теперь можно самостоятельно работать.
    Всё.
    Игра закончена.
    Время играть!
    Удачи!!!




     
    Категория: Web | Добавил: halenka (04.09.2015)
    Просмотров: 5358 | Теги: игра, программирование, js, game, web, javascript, css, html 5 | Рейтинг: 5.0/2
    Всего комментариев: 0

    Copyright MyCorp © 2024