Как сделать игру на jquery
Пошаговое создание легендарной игры Bejeweled на jQuery
Инструменты
Что нам понадобится для создания игры?
Безусловно, можно обойтись без библиотек и плагинов. Язык JavaScript имеет достаточно возможностей для работы со страницей и пользовательскими событиями. Но если вы начинающий разработчик, эти инструменты существенно упростят вам жизнь.
Начало работы
Состояния игры
Сразу определимся, в каких состояниях (стадиях) может находиться игровой процесс:
Игровое поле
Поле для игры в Bejeweled представляет собой простую двумерную сетку, на которой располагаются гемы (драгоценные камни). Их необходимо удалять, собирая в группы одного цвета.
В нашей реализации для простоты будут учитываться только вертикальные или горизонтальные группы размером от трех камней (и более).
Примеры допустимых групп:
Первая попытка
Давайте определим основные параметры игры, нарисуем поле и заполним его гемами.
Есть проблема: на поле еще до начала игры появляются группы сбора (вертикальные и горизонтальные группы из 3 и более гемов одного цвета). Это происходит из-за того, что цвета мы выбираем случайным образом.
Проверка на группы сбора
Добавим проверку после выбора цвета для нового гема. Если он вдруг составит группу сбора с уже существующими на поле камнями, просто поменяем цвет.
Функция isVerticalStreak проверяет соседей по вертикали, а isHorizontalStreak – соответственно по горизонтали. Если где-то получится больше двух гемов одного цвета, создадим другой гем.
Обработка действий игрока
Чтобы наша Bejeweled заработала, нужно отслеживать, какие гемы выбирает игрок, менять их местами и убирать появившиеся группы.
Язык программирования JavaScript умеет работать со множеством пользовательских событий – кликами, тачами, движениями мыши и др. Организовать все это в единую рабочую (а также кроссбраузерную и кроссплатформенную!) систему очень непросто. Так давайте отдадим тяжелую и скучную работу плагину touchSwipe.
Начнем с простых тапов/кликов. Попробуйте кликнуть мышкой на поле – в консоли появится сообщение и выведется тот гем, на который вы нажали.
Игровые операции
Выделение активного гема
Чтобы было понятно, какой камень выбрал игрок, нужно его каким-то образом выделять. Для этого добавим элемент-маркер на поле:
А при клике на гем, поместим маркер прямо над ним:
Меняем гемы местами
А вот если выбран уже второй гем, нужно проверить, является ли он соседом для первого.
Функция gemSwitch меняет местами два гема как на поле, так и в массиве jewels :
Проверка хода
Переменная movingItems хранит количество движущихся в данный момент гемов. Функция checkMoving вызывается после завершения каждой анимации, но отработать должна только тогда, когда все камни остановятся. Для этого мы просто каждый раз уменьшаем счетчик на единицу.
checkMoving – главная функция в нашей головоломке. Она будет проверять поле после каждого действия, поэтому мы добавим в нее конструкцию switch для разных состояний игры:
Если ни один из выбранных камней не образовал группу сбора, меняем состояние игры на revert и двигаем их обратно.
Если группы сбора обнаружены, их нужно удалить.
Удаление групп сбора
А затем красиво уберем их со страницы:
Сдвигание гемов
После удаления необходимо опустить все камни, оказавшиеся над пустыми клетками. Добавим это действие в функцию checkMoving :
А вот и сама функция checkFalling :
Заполнение пустот
Функционал игры практически готов, осталось лишь заполнять поле камнями после удаления и запускать новый цикл игры.
Для этого добавим еще один case в функции checkMoving :
И реализуем функцию placeNewGems :
Не забываем про все проверки – вуа-ля! – наша игра готова 😉
Добавляем свайп c jQuery плагином
Можно сделать Bejeweled еще красивее и удобнее, добавив возможность двигать камни с помощью свайпов. Вот где нам пригодится плагин touchSwipe. Он замечательно обрабатывает жесты игрока и предоставляет для этого очень удобный интерфейс:
Реализуем обработчики. swipeStatusHandler будет отслеживать начало свайпа и записывать первый выделенный гем. swipeHandler сделает все остальное:
Весь остальной функционал уже готов! Вы можете наслаждаться любимой головоломкой.
[codepen_embed height=»500″ theme_id=»0″ slug_hash=»XwoYBV» default_tab=»result» user=»mohnatus-the-lessful»]See the Pen Bejeweled by FurryCat (@mohnatus-the-lessful) on CodePen.[/codepen_embed]
Творческое задание
Для упражнения или ради интереса вы можете переписать код игры без использования jQuery или заменить ее на другие JavaScript фреймворки.
Также в прототип можно добавить разные улучшения:
Разработка игр на JavaScript: реально и безболезненно
Почему JavaScript?
Масса людей думает, что все крутые игры (God Of War, Assassin’s Creed, Skyrim, добавь по вкусу) созданы на C++. Это отчасти так. В проекте принимают участие сотни специалистов из разных отраслей, в том числе и разработчики, юзающие другой язык – обычная распространенная практика.
Некоторые классные игры написаны на “непопулярных” языках программирования, и это нормально. Если ты работаешь с JavaScript, то не нужно после этой статьи бросаться изучать “плюсы”, оставайся с JavaScript.
Существуют Unity, Unreal Engine, CryEngine и прочие классные решения для создания игрушек, и если тебе удобно развлекаться с ними – пожалуйста. Поэтому нет никакой разницы, на чем ты будешь кодить, но в нашем случае речь пойдет о JS-фреймворках.
Основы
Не нужно забывать о творении команды Khronos Group. WebGL – это веб-версия спецификации OpenGL ES, позволяющая разработчикам общаться с видеокартой через браузер (поверь, лучше не знать, как это работает).
Таким образом, можно создавать 2D и 3D сцены на GPU (что эффективнее, чем на CPU). Супер! Но если взглянуть на код JavaScript, использующий эти технологии, тебе поплохеет.
Поэтому давай разбираться с фреймворками, оберегающими нас от canvas и абстрагирующими от WebGL.
2D Frameworks
PixiJS
Этот инструмент можно назвать 2D-рендером WebGL. Это означает, что данная библиотека включает в себя множество функций, предназначенных для эффективной отрисовки 2D-сцен и объектов. Так проще сосредоточиться на создании программного кода, а хардкорные “низкоуровневые” вещи оставить разработчикам PixiJS.
Это не полноценный фреймворк, но он делает свою работу настолько здорово, что многие игровые JS-фреймворки юзают его в качестве движка для рендеринга.
Если ты планируешь создать что-то большее, чем анимация, то поищи дополнительные библиотеки для других частей игровой разработки (физика, масштабирование, tilemaps и т. д.).
ExcaliburJS
Здесь у нас полноценный игровой фреймворк, написанный на Typescript. Полная система сцен и камер, спрайты и анимации, звуки, физика и т. д. – все, что пожелаешь. Многим очень нравится API, предоставляемый ExcaliburJS, т. к. с ним уютнее.
Это связано с тем, что создатели продукта из мира веб (некоторые являются веб-разработчиками, другие — DevOps), поэтому большинство шаблонов и подходов – это штуки, которые уже популярны в веб-разработке. Если тебе близка веб-разработка, попробуй этот инструмент.
ImpactJS
ImpactJS начал свой путь со звания “Первый фреймворк для веб-игр”. Большинство фреймворков, рассмотренных ранее, были просто экспериментами, а не коммерческим продуктом. Этот опенсорсный претендент распространяется бесплатно и поставляется с хорошим редактором уровней.
Фреймворк не является самым понятным или документированным, но его надежность уже доказана. Например, разрабы из CrossCode взяли за основу форкнутую версию Impact для своего движка за его производительность и способность масштабироваться под конкретную задачу.
CreateJS
CreateJS – это набор модульных библиотек и HTML5-инструментов, работающих асинхронно или параллельно в зависимости от ситуации.
Инструмент предоставляет все, что нужно для создания игры с нуля, с помощью отдельного модуля языка JavaScript. Например, для рендеринга можно взять PixiJS, а для работы со звуковыми материалами SoundJS и т. д.
PhaserJS
И напоследок самый популярный – PhaserJS. Это мощный набор инструментов для создания веб и мобильных игр. Этот фреймворк имеет огромное и активное сообщество – каждую неделю эти ребята выкладывают много новых статей, демо и туториалов, основанных на PhaserJS. Это обеспечивает отличное подспорье для людей, делающих свои первые шаги в геймдеве и нуждающихся в наставлениях. А еще, начиная с 3-й версии, это один из самых производительных игровых фреймворков.
3D Frameworks
ThreeJS
ThreeJs – самая популярная 3D-библиотека. Она предлагает наборы функций для выполнения общих операций, которые должны происходить в 3D-сцене. Все мероприятия происходят на более высоком уровне, чем raw WebGL, и не надо заморачиваться с горой низкоуровневых действий.
BabylonJS
Этот фреймворк похож на предыдущий, но имеются различия:
Литература
Как в любом уважающем себя мануале, далее идет подборочка книг по теме.
Кстати, у нас есть очень крутая статья по книгам для геймдэва – рекомендуем!
Мы подобрали для тебя литературу по базовым вещам. Когда определишься, какая ветка игровой разработки тебе больше нравится, будет легче подбирать книги JavaScript.
Как устроен jQuery: изучаем исходники
jQuery однозначно стал стандартом в индустрии веб-дева. Есть много отличных js-фреймворков, которые заслуживают внимания, но jQuery поразил всех своей лёгкостью, изящностью, магией. Люди пишут с использованием jQuery, люди пишут плагины для jQuery, люди даже пишут статьи про jQuery, но мало кто знает (особенно из новичков), КАК устроен jQuery.
В этой статье проведем небольшой экскурс во внутренности этого фреймворка и разберем, что внутри.
Статья рассчитана на базовые знания Javascript. Задумайтесь и, если вы знаете, как написать клон jQuery, то, скорее всего, вы тут не найдёте ничего нового. Остальным — добро пожаловать под кат
Общие сведения
jQuery — это Javascript-библиотека.
Официальный сайт — jquery.com, автор — John Resig, aka jeresig, известный гуру и бывший евангелист Javascript в Mozilla Corporation. У него есть свой блог — ejohn.org, где он написал кучу крутых статей и либа для работы с Canvas — processing.js, а также книга «JavaScript. Профессиональные приёмы программирования». Находится в Зале Славы RIT
Основной jQuery-репозиторий располагается на GitHub, где лежат исходники, unit-тесты, сборщик, js-lint проверялка и т.д.
В этот момент я хотел бы сделать отступление и обратить внимание на GitHub. Огромное количество OpenSource Javascript либ — prototype.js, MooTools, node.js, jQuery, Raphael, LibCanvas, YUI а также значительная часть Javascript (и не только Javascript) сообщества нашли приют там, потому, если вы хотите выложить свой javascript-проект, GitHub — лучшее место.
В директории /src находятся исходники, разбитые на множество файлов. Если вы смотрели на файл code.jquery.com/jquery-*.js и ужасались, как там можно не запутаться, то знайте — всё структурировано и не так ужасно. Собираются при помощи билдера на node.js. В нём строки «@VERSION» и «@DATE» исходника заменяются на соответсвующие значения.
Углубляемся в исходники
Coding styles весьма привычные и обычные. Порадую или огорчу вас. Используются табы и египетские скобки. Отбиваются только # indentation, alignment не используется нигде.
Есть два файла — intro.js и outro.js, которые ставятся в начало и конец собранного исходника соответственно.
Основной интерес для нас представляет файл core.js, в котором и находится всё «мясо».
Исходник выглядит так. Мы видим, что код опустился ещё на один уровень вложенности, что позволяет легче контролировать область видимости переменных:
Конструирование объекта
Мы уже видели выше код конструктора jQuery:
То есть, при вызове функции jQuery создается и возвращается сущность » jQuery.fn.init «. В этом месте используется магия Javascript. Чуть ниже по коду мы можем обнаружить приблизительно следующее:
Чтобы вы поняли суть такого поведения, я приведу вам другой пример:
Парсим аргументы
Есть куча вариантов использования функции jQuery:
Первые четыре куска вполне понятны — идет обработка случаев, когда передали пустой селектор, DOM-элемент в качестве селектора или строку ‘body’ — для более быстрого получения тела документа, а также обработка функции для DomReady.
Интересный момент с случаем, когда мы передаем строку. В первую очередь оно парсит её «быстрым регулярным выражением». В нём левая часть отвечает за нахождение тегов в строке, а вторая — за поиск по айди элемента:
quickExpr = /^(?: [^ )[^>]*$ | #([\w\-]*)$ )/;
И только если запрос более сложный, то вызывается метод find у текущего контекста, который ищет элемент при помощи поискового движка (тоже авторства JResig) Sizzle (права принадлежат The Dojo Foundation).
Разработка плагинов
Многие профессионалы Javascript знают о том, что класс, созданный при помощи прототипов можно очень легко расширять.
Таким же образом мы можем расширять стандартный прототип jQuery:
И данный плагин появится во всех уже созданных и тех, что создадутся сущностях. Добавляя свойства напрямую в объект мы реализуем статические свойства:
Таким образом, наилучший шаблон для небольших плагинов:
Именно такой подход можно заметить у большинства плагинов для jQuery, например, DatePicker.
Заключение
Надеюсь, вам понравилась эта статья и она не оказалась слишком заумной. Если будет желание — можно будет продолжить цикл и углубится в jQuery ещё глубже, или поизучать другие фреймворки.
Фреймворк для простых проектов на jQuery
Преамбула
Я не силен в разработке на javascript, но по работе приходится разбираться и писать хотелки разного рода. Интерфейсы усложняются, код дублируется, дополняется и в итоге получается довольно-таки сумбурная каша без документации и структуры. Нет, нет вы не подумайте. Все начинается безобидно:
— Нужно сделать, чтобы эта таблица сворачивалась.
Прошла неделя.
— Надо, чтобы эти данные подсвечивались столбцам или строками.
Прошла неделя.
— Нужно, чтобы из столбцов рисовались графики, а из строк пользователь потом мог настроить данные для экспорта в таблицу.
Прошла неделя.
— Нужно то, что мы сделали, скопировать в страницу назначений прав и данные поменять на пользователей и группы и немного изменить логику работы.
И так далее. Более 2 лет это копилось, копилось и копилось. Переводить на какой то фреймворк проект не дают, по той простой причине — придется изучать его всей команде. А ни я, ни они не уверены в том, что мы потратим на его изучение время, а потом он нигде не пригодится.
Фабула
Я начал писать прослойку для облечения работы с объектами из базы данных. Создание новых элементов для вставки, удаление, фильтрация.
Первым аргументом передается название модели, которое впоследствии станет глобальной переменной.
Вторым — объект с набором свойств модели и описанием этих свойств.
Связи объектов с объектами — это ссылки на кеш TObject._cache.
Из описаний свойств могу отметить пока 3 — iskey, type, isfrooze.
iskey — используется для создания уникального ключа у объекта в кеше. Если он один, то к объекту можно обратится через метод id, заранее зная его ключ.
type — типы значений. Пока их несколько — bool, int, string, function. Последнее используется для связывания объектов. Планируется создание собственных.
isfrooze — свойство, которое при заполнении больше не меняется. Это сделано на случай, если вы боитесь нечаянно поменять свойство.
Есть несколько свойств моделей. all — выгрузка всех объектов:
find(< property: value >) — выгрузка всех оюъектов подходящих по правило:
id( ident ) — выгрузка одного объекта по заданному ключу:
Для двусторонней связи DOM и объектов создан метод jQuery jsdata, аналогичный data, но он связывает объект с DOM. Получить связь можно через метод модели getDOM:
[Туториал] Как создать вашу первую инкрементальную IDLE игру на JavaScript
Сегодня я расскажу вам, как создать простейший ToDo лист простейшую инкрементальную IDLE игру на JavaScript, потратив меньше одного дня ежегодных каникул. Для этого предлагаю выбрать сову игру попроще и не пропускать шагов между овалом и готовой совой пустым проектом и готовой игрой.
Людям, знающим как делать такие игры, будет скучно; людям, знающим JS, рекомендую смотреть на код сквозь пальцы (во избежание травм) и читать только про механики. Под катом последовательная инструкция, ориентированная на новичков.
Инкрементальные игры — это игры, в основе которых лежит [бесконечный] основной цикл, состоящий из накопления ресурсов, их постоянных трат и ускорения дохода. Главная их особенность в постоянном росте чисел. Инструкция расскажет, как сделать IDLE (ленивую) игру, в которой ресурсы пополняются таймером, а не активным кликаньем.
Начнем с того, что создадим текстовый файл с именем index.html и напишем в него следующее:
На текущий момент никакой игры пока нет, но есть всего лишь статичная надпись.
Ссылка на игру в текущем состоянии: 0df7a27.
В основе всех игр в этом жанре лежат два условно-бесконечных игровых цикла.
Первый цикл заключается в накоплении ресурсов.
Второй цикл заключается в трате ресурсов.
Давайте реализуем первый цикл.
В первую очередь, строка
обеспечивает нам возможность обращаться к ней по её id, и менять содержимое внутри тегов, в нашем с вами случае — значение наличных монет.
Во-вторых, появился скрипт.
Создаем переменную coppers, и задаем её область видимости ключевым словом let. Аналогично объявлением copperGrowth, которая будет отвечать за скорость прироста медных монет.
Далее создаем объект, в который мы поместим наш таймер, который будет дергать функцию endOfTurnCalc каждые 2000 мс (2 секунды). Функция обеспечивает прирост медных монет и обновление интерфейса. Ура, половина игры сделана: у нас есть цикл накопления ресурсов. Следующая задача — научиться их тратить.
Ссылка на игру в текущем состоянии: e5d96e1.
Давайте добавим кнопку, которая будет позволять нам тратить медные монеты на улучшения медной шахты, ее предлагаю поставить перед нашей строкой с монетами. Кнопка, ее название, функция, которую кнопка вызывает, имя кнопки — содержимое внутри тэгов.
Добавим код, который позволит кнопке апгрейда работать:
и код, который окажет влияние на скорость добычи новых монет:
Зададим цену улучшения шахты, определим уровень шахты по умолчанию, пропишем в функцию проверку достаточности монет на апгрейд шахты.
В случае, если денег достаточно, то списываем цену апгрейда, повышаем текущий уровень шахт, рассчитываем цену для следующего улучшения; выводим на экран текущие значения медных монет и стоимости следующего улучшения.
Ссылка на игру в текущем состоянии: c731ec5.
Ну что же, играть уже можно — можно копить, и, что приятнее, тратить накопленное. Но нам нужно подкрепление успеха — игрок не только вычислять прирост скорости накопления монет, методом вычитания от нового значения старого, но и, по-хорошему, сразу видеть текущую скорость накопления монет. Сделаем?
В интерфейс добавляем еще одну строчку:
Теперь наш интерфейс описан следующими строчками:
Вносим изменение в скрипт, в функцию upgCopperMine():
Ссылка на игру в текущем состоянии: 3ac06b6.
Отлично! У нас есть условно-бесконечная игра. Теперь надо остановится на секунду, и задуматься — части людей нравится, когда конечной цели нет, и можно играть, пока не надоест, другая часть считает, что условия конечности, достижимости игры должны быть. Игру для первых мы уже сделали, но что мешает нам сделать небольшое изменение, чтобы у игры была цель и условие победы? Давайте сделаем.
Добавили переменную, в которую положим значение, которое нам нужно достичь и изменим функцию из цикла, добавив проверку на достижение цели. При достижении цели мы очищаем интервал из нашего объекта с таймером и выводим всплывающее сообщение в браузере.
Есть небольшой момент: некоторые антивирусы не любят alert’ы и блокируют страницу за их использование.
Ссылка на игру в текущем состоянии: 8fa4041.
Следующая функциональность, которую ожидают люди от игры длиннее пяти минут — это возможность сохранять и загружать игру. Давайте же дадим им её!
Добавляем в интерфейс две строчки, не забыв добавить в предыдущую строчку тег перевода строки:
и теперь расширим наши скрипты, чтобы кнопки заработали:
Кладём все изменяемые ресурсы в локальное хранилище браузера при сохранении и при чтении читаем их обратно и обновляем интерфейс.
Ссылка на игру в текущем состоянии: 54b1ea0.
Все, основная часть игры готова.
К текущему моменту мы рассмотрели:
— создание ресурса;
— добычу ресурса;
— трата ресурса на апгрейд системы его добычи;
— отражение скорости добычи ресурса;
— условие победы;
— запись и чтение сохранения игры в локальное хранилище браузера.
Продолжим? Перед тем как приступить к следующей теме, а именно добавлению второго ресурса в нашу систему (серебра), я предлагаю провести небольшой рефакторинг текущего кода.
Что нужно сделать в рамках рефакторинга?
Во-первых, давайте создадим один игровой объект, а медные монеты, уровень медных шахт и так далее поместим внутрь как свойства этого объекта. Это сильно поможет в будущем, когда мы будем расширять сохранение и загрузку на новые игровые сущности.
Во-вторых, сделаем расчет цены апгрейда динамическим.
В-третьих, избавимся от дублирования кода, который отвечает за обновление интерфейса.
Код, приобретет следующий вид:
Довольно очевидно, что мы создали объект game, и внутри объекта прописали его свойства и значения свойств. Далее, везде, где мы раньше обращались напрямую к переменным, мы теперь обращаемся к тем же свойства объекта game.
Ссылка на игру в текущем состоянии: 8a07f4d.
Давайте теперь обновим систему сохранения и загрузки.
Теперь, вместо сохранения отдельных свойств, мы сохраняем весь объект целиком. Но будьте осторожны: если вы добавите в объект методы, то они не сохранятся таким образом, и последующая перезапись объекта из сохранения удалит все методы…
Ссылка на игру в текущем состоянии: 8eba059.
Давайте же удалим ненужное свойство — цену апгрейда шахты и создадим функцию расчета апгрейда и будем вызывать ее в необходимых местах.
Ссылка на игру в текущем состоянии: 4007924.
Наконец, вынесем повторяющиеся части кода обновления интерфейса в отдельную функцию.
В свою очередь, во всех остальных местах, где мы обращались к тем или иным объектам DOM, теперь поставим вызов функции updateUI():
Ссылка на игру в текущем состоянии: 2245f97.
Теперь предлагаю ввести второй ресурс: серебро, строительство и улучшения серебряных шахт.
Что сделано? В интерфейсе добавлены поля для отображения серебряных монет, скорость их добычи, кнопка для постройки или улучшения серебряной шахты.
Внутрь игрового объекта продублированы свойства silvers, silverGrowth, silversUpgLevel, но для последнего установлено значение 0, потому что серебряной шахты у нас по умолчанию нет.
Добавлена переменная silverMineBasePriceCoppers, которая будет отражать цену постройки серебряной шахты в медных монетах (потому что мы не можем платить за серебряную шахту серебром, которого у нас пока нет).
Модифицирована функция coppersUpgCost и продублирована как silversUpgCost, чтобы цена апгрейда была отличной от нуля, в случае, если текущий уровень шахты равен 0.
Изменили функцию обсчета конца хода, добавив туда расчет дохода от серебряной шахты, а также изменив условие победы — теперь нам нужно сравнивать не количество медных монет, а количество серебряных монет.
Создали функцию upgSilverMine, в которой отразим логику списывания средств (если шахты еще нет, списываем медяки, если шахта уже построена, то списываем серебро для улучшения шахты).
В функцию updateUI добавили необходимые строчки для серебра, а также разделили логику вывода текста на кнопку для улучшения серебряной шахты, таким образом одна кнопка работает и для постройки и для улучшения шахты.
Функции сохранения и загрузки остались без изменений.
Ссылка на игру в текущем состоянии: 03eb0eb.
Может так случиться, что медных монет накопиться много больше, чем надо, в то время как серебро еще нужно заработать. Для этого в подобных играх, как правило, существует возможность обмена разных ресурсов друг на друга.
Давайте добавим в интерфейс пару кнопок:
И добавим пару функций к этим кнопкам:
Ссылка на игру в текущем состоянии: 92219b2.
Так, что еще можно добавить в инкрементальную игру? Механизм Престижа! Конечно, сейчас это скорее излишество, но в случае дальнейшего развития игры, он вам пригодится. Игроки любят его!
В разных играх сделано по-разному, но в целом — механизм дает очки Престижа либо после успешного завершения (прохождения) игры, либо, разблокируется во время игры после достижения некоего целевого порога.
С помощью очков Престижа игрок получает возможность быстрого старта или постоянного бонуса в этой же игре (возможно, что в следующей миссии, если игра разбита на таковые), так, что он может попробовать какую-то другую тактику, но тратит меньше времени на повторное прохождение. Таким образом, можно изучить несколько развилок, опробовав разные решения, и затрачивая на это меньше времени, чем если бы такового механизма не было.
Что нам потребуется для этого? Нужен механизм перезапуска игры со значениями по умолчанию. В качестве постоянного бонуса, будем добавлять очки Престижа к ранее неизменяемым свойствам copperGrowth и silverGrowth.
Добавляем следующие функции winGame, restartGameDialog, restartGame, а также изменим endOfTurnCalc для вызова новых функций и обновим updateUI:
Функция winGame запускает таймер, по истечению которого вызывается диалог подтверждения. В случае подтверждения вызывается функция рестарта, которая сбрасывает все значения на умолчанию, но увеличивает свойства базового прироста монет.
В целом, игра готова:
— создание ресурса;
— добычу ресурса;
— трата ресурса на апгрейд системы его добычи;
— отражение скорости добычи ресурса;
— условие победы;
— запись и чтение сохранения игры в локальное хранилище браузера;
— добавление еще одного ресурса с добычей и апгрейдом его добычи;
— обмен ресурсов;
— механизм рестарта игры и механизм Престижа.
Ссылка на игру в текущем состоянии: 92219b2.
Наконец, последнее, что в этой статье хочется показать, это другой механизм хранилища, потому что у текущего механизма есть одна, но существенная проблема.
Представьте себе, что вы разрабатываете игру, публикуете ее на веб-сервере (возможно, на github pages), а люди в нее играют. Со временем, вы вносите изменения в игру, которые добавляют новые свойства к игровому объекту game.
Теперь следите за руками.
Игрок заходит со старым сохранением, в котором есть все свойства coppers и silvers, но нет, скажем, свойства gold. Загружается наш game объект и перезаписывает тот, который был создан при загрузке веб-страницы, и теперь внутри объекта есть только те свойства, которые были в его сохранении. А код-то мы уже обновили! И этот код ссылается на обновленные свойства, которых нет. Таким образом, код начинает получить множественные ошибки, вплоть до полной неработоспособности игры. На удивление, чтобы исправить эту проблему, нужно переписать всего две строчки в функции загрузки игры:
Теперь, если добавите в game = < gold: 1, >и загрузитесь с вашего старого сохранения, где золота еще не было, то золото останется в объекте и игровая логика нигде не сломается.
Ссылка на игру в текущем состоянии: 83c258d.
Еще одно. Перенос сохранений между браузерами, давайте его тоже запилим.
Добавили две служебных переменных, обновили updateUI(), написали три функции — экспорта, импорта, и функцию, которая изменяет флаг отображения экспорта, таким образом «старый» экспорт через 30 секунд после его формирования будет скрыт.