Разработка игрового развивающего приложения для детей дошкольного возраста на языке Javascript

Размещено на http://www.allbest.ru

Размещено на http://www.allbest.ru

Введение

Обучение наиболее продуктивно, если оно идет в контексте практической и игровой деятельности, когда созданы условия, при которых знания, полученные детьми ранее, становятся необходимыми им, так как помогают решить практическую задачу, а потому усваиваются легче и быстрее. Анализ состояния обучения дошкольников приводит многих специалистов к выводу о необходимости обучения в играх. Иными словами, речь идет о необходимости развития обучающих функций игры, предполагающей обучение через игру.

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

Целью ВКР является разработка программ, для развития и обучения детей младшего дошкольного возраста. Для достижения поставленной цели необходимо сформулировать и решить следующие задачи:

1. Проанализировать требования к разрабатываемой системе;

2. Выбрать архитектуру и средства разработки, спроектировать базу данных и пользовательский интерфейс;

3. Реализовать серверную и клиентскую части;

4. Протестировать разработанное приложение;

5. Описать способ внедрения

1. Анализ требований к разрабатываемой системе

1.1 Анализ предметной области

Система является сайтом, который предоставляет своим пользователям (детям дошкольного возраста и их родителям) игровое приложение развивающего характера.

В современной педагогической теории игра рассматривается как ведущий вид деятельности ребенка-дошкольника. Когда ребенок играет, у него формируется восприятие, мышление, память, речь - то есть те качества, без которых нельзя говорить о воспитании гармоничной личности

Школьное образование в значительной мере компьютеризировалось, а в детских садах использование компьютеров не так распространено.

Компьютеризация школьного образования в нашей стране уже имеет свою, хотя и небольшую историю. А вот использование компьютеров на занятиях в детских садах только начинается.

Одна из важнейших функций компьютерных игр обучающая. На экране дисплея оживают любые фантазии ребенка, герои книг и сказок. Но также оживают и предметы окружающего мира, цифры и буквы. Попадая в компьютерную игру, они создают особый мир, похожий на реальный, но и отличающийся от него. Компьютерные игры составлены так, чтобы ребенок мог представить себе не единичное понятие или конкретную ситуацию, но получил обобщенное представление обо всех похожих ситуациях или предметах. Таким образом, у детей развиваются такие важнейшие операции мышления как обобщение и классификация, которые при стандартном обучении начинают формироваться с 6-7 лет.

1.2 Бизнес правила

Перед началом проектирования необходимо составить список бизнес-правил разрабатываемой системы. Бизнес-правила - это положение, определяющее или ограничивающее какие-либо стороны проекта. Его назначение - защитить структуру проекта, контролировать или влиять на его операции. Для создаваемой платформы были выделены следующие правила:

1. Каждый пользователь может зарегистрироваться на сайте;

2. Каждый зарегистрированный пользователь может зайти под своей учетной записью, введя логин и пароль;

3. Зарегистрированный пользователь может видеть свою статистику о том, сколько игр пройдено;

4. При входе на сайт, зарегистрированный пользователь видит интерактивную карту с доступными ему играми;

5. Каждый зарегистрированный пользователь может запустить доступную ему игру;

6. В каждой игре есть текст задания, дублируемый голосом;

7. При неверно выполненным задании, появляется подсказка о том, что игрок попробовал ещё раз;

8. В конце каждой мини-игры появляется сообщение об успешно пройденном задании;

9. Весь процесс игры сопровождается музыкой и звуками, которые пользователь, при желании может отключить;

10. Пользователь может перезагрузить игру или выйти из нее в главное меню.

1.3 Обзор аналогов

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

Логозаврия - сайт детских компьютерных игр представлен на рисунке 1 [1].

Рисунок 1 - Проект «Логозаврия»

Некоторые из игр на данном сайте:

1. ИГРЫ "НАЙДИ ОТЛИЧИЯ" - детям предоставляется возможность выбрать на двух картинках отличия между собой, причем картинки зеркальные, что усложняет задачу перед школьниками. Данная игра развивает у детей внимательность;

2. ИГРЫ "НАЙДИ МЕСТО" - в этой игре необходимо щёлкнуть кнопкой мыши по тому объекту, который предоставляется в верхнем углу экрана. Данная игра развивает у детей внимательность;

3. ИГРЫ "ПАЗЛЫ" - суть игры понятна из названия. Игра такая же, как и бумажная версия, только более красочная и интересная. Помогает развить у детей наглядное мышление, сообразительность и внимательность.

Чтобы их запустить, необходимо скачивать их с сайта и открывать файл c расширением .exe.

Ещё одним подобным проектом является «Растишка. Мир Дино», изображенный на рисунке 2, в котором представлено много интересных игр, такие как:

1. Раскрась картинку, где нужно, используя выбранную палитру, раскрашивать различные объекты;

2. Найди Дино, в котором нужно на картинке с другими животными отыскать персонажа из рекламы «Растишка»

3. Дино-комикс, где представлены различные истории в картинках.

Большинство игр являются больше развлекательными, чем познавательными.

Рисунок 2 - Проект «Мир Дино»

Разрабатываемое приложение, в отличие от вышеназванных может запускаться прямо в браузере и помимо развлекательного имеет и развивающий характер. Также в игре отслеживается прогресс пройденных игр.

2. Проектирование

2.1 Архитектура приложения

На рисунке 3 представлена use-case диаграмма. В ней показана роль пользователя.

Рисунок 3 - Use-case диаграмма

В диаграмме у пользователя есть такие функции как:

- авторизация или регистрация;

- просмотр существующих игр;

- просмотр статистики (только авторизованным пользователям);

- запуск игры.

В данном проекте была выбрана трехуровневая архитектура, которая предполагает наличие следующих компонентов приложения: клиентское приложение, подключенное к серверу приложений, который в свою очередь подключен к серверу базы данных. Схема данной архитектуры показана на рисунке 4.



Рисунок 4 - Схема трехуровневой архитектуры приложения

По сравнению с клиент-серверной или файл-серверной архитектурой можно выделить следующие достоинства трёхуровневой архитектуры:

- масштабируемость. В высоконагруженных приложениях можно распределить нагрузку между несколькими серверами приложений;

- конфигурируемость -- изолированность уровней друг от друга позволяет быстро и простыми средствами переконфигурировать систему при возникновении сбоев или при плановом обслуживании на одном из уровней;

- высокая безопасность. Клиент не обращается напрямую к данным, все запросы на сервер приложений проходят валидацию;

- высокая надёжность. В момент отказа оборудования или пиковых нагрузок можно добавить резервный сервер, на который пойдут запросы клиента [2].

По сравнению c клиент-серверной или файл-серверной архитектурой можно выделить следующие недостатки трёхуровневой архитектуры:

- Более высокая сложность создания приложений;

- Сложнее в разворачивании и администрировании;

- Высокие требования к производительности серверов приложений и сервера базы данных, а, значит, и высокая стоимость серверного оборудования;

- Высокие требования к скорости канала между сервером базы данных и серверами приложений.

2.2 Выбор средств разработки

Среда разработки

Выбор осуществлялся из следующих сред разработки:

1. Visual Studio Code - Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб-приложений, где с помощью плагинов можно настроить удобное для себя окружение;

2. JetBrains WebStorm - IDE на платформе IntelliJ IDEA, которая делает разработку проще и удобней. WebStorm обеспечивая подсветку и автодополнение кода, проверяет его на ошибки, имеет удобную навигацию по проекту и безопасно вносит изменения. В WebStorm есть инструменты для отладки кода и интеграция с системами управления версиями [3].

Выбор был сделан в пользу JetBrains WebStorm, в котором большинство необходимых инструментов для отладки, редактирования и поиска ошибок в коде, доступно сразу после установки, то есть не требуется дополнительная конфигурации среды.

Выбор СУБД

Как свободная объектно-реляционная система управления базами данных (СУБД) была выбрана MySQL [4].

Сильными сторонами MySQL считаются:

- быстродействие;

- производительность;

- наследование;

- легкая расширяемость [5].

Выбор осуществлялся между PostgreSQL и MySQL. Выбор был сделан в пользу последнего из-за уже имеющегося опыта работы с данной СУБД.

Выбор языка и ПО

HTML - это язык гипертекстовой разметки.

CSS - язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам.

JavaScript -- язык сценариев, или скриптов. Скрипт представляет собой программный код -- набор инструкций, который не требует предварительной обработки (например, компиляции) перед запуском. Код JavaScript интерпретируется движком браузера во время загрузки веб-страницы. Интерпретатор браузера выполняет построчный анализ, обработку и выполнение исходной программы или запроса.

Подробнее рассмотрим основные программные средства для реализации игр на JavaScript.

PixiJS. Эту библиотеку используют в качестве игрового движка, но на самом деле у нее более широкое применение. Она упрощает вывод интерактивной 2D-графики и анимации в любых приложениях на базе HTML5.

Для рендеринга PixiJS может использовать как WebGL, так и стандартный Canvas. Но первый работает заметно быстрее, особенно когда нужно одновременно анимировать сотни и даже тысячи объектов. Скорость достигается за счет того, что WebGL -- инструмент низкоуровневый. А значит без дополнительных фреймворков разрабатывать для него трудоемко: нужно прописывать каждую мелочь в управлении текстурами и шейдерами. И здесь на сцену выходит PixiJS, который берет это на себя.

Плюсы: стабильно быстрый 2D-рендеринг даже на слабых машинах (при условии, что браузер поддерживает WebGL). Низкоуровневость -- ниже только чистый JS, так что работа движка очень прозрачна. Кроссплатформенность, поддержка тачскрина. Удобная песочница, подробная документация на английском языке, понятный вводный курс для новичка. Движок хорош для создания небольших казуальных 2D-игр для мобильных устройств и ПК.

Минусы: в сравнении с движками, заточенными именно под игры, предлагает меньше инструментов «из коробки». Мало руководств на русском языке.

Phaser. Игровой движок для настольной и мобильной разработки на JS и TypeScript. Работает на основе PixiJS -- использует его для визуализации сцен. Следовательно, опирается на тот же WebGL с возможностью отката на Canvas в устаревших браузерах.

Плюсы: перспективный движок, оптимизированный под мобильные платформы. Очень прост в освоении благодаря пошаговым инструкциям для новичка. Много примеров, постоянно выходят новые уроки и руководства.

Минусы: последняя версия -- Phaser 3 -- еще сырая. Плагины и утилиты к движку стоят в среднем 20$ и поддерживают только Phaser 2. У второй версии движка есть неочевидные настройки, которые трудно изменить.

Babylon.js. Для разработки браузерных 3D-игр этот фреймворк так же значим, как Pixi -- для 2D. Работа с мешами, освещением, материалами, физикой, позиционным звуком -- вот это все -- продумано, задокументировано, снабжено интерактивными примерами. С Babylon можно делать игры для Android, iOS и десктопных браузеров. Наряду с JS поддерживается TypeScript.

Плюсы: мощный, бурно развивающийся движок со множеством онлайн-инструментов, готовых рецептов и ресурсов. Среди расширений -- 60 заготовок для создания эффектов (огня, травы, частиц, меха и других), генерации ландшафта, работы с GUI и прочего. Команда регулярно исправляет баги, найденные сообществом.

Минусы: требует времени на изучение, бывают ошибки при импорте 3D-моделей из Blender и Autodesk 3ds Max.

Проанализировав библиотеки, было решено выбрать phaser.js, так как у него низкий порог вхождения, подробная, понятная документация, много примеров, роликов и руководств.

Для серверной части было решено использовать программную платформу node.js. C помощью неё было реализовано http-взаимодействие, авторизация и аутентификация, а также взаимодействие с базой данных.

Node.js был выбран по нескольким причинам:

1) Возможность вести разработку на стороне сервера на том же языке, что и клиентскую часть, то есть на javaScript.

2) Высокая производительность. Node.js работает на движке V8, от компании Google, Данный движок очень экономно расходует память, очень хорошо оптимизирована в этом плане, позволяет профилировать процессор и память.

3) Решает основные задачи для Web. Node.JS предназначен для решения основных задач, которые перед нами ставит Web разработка. Хотим работать с базой данных -- Node.JS отлично работает с самыми распространенными современными базами данных. Хотим получить низкоуровневый доступ к сети http, https, tcp, udp, в Node.JS содержится отлично проработанная коллекция модулей. Node.JS. Это инструмент, который изначально проектировался для решения задач под Web и в нем очень много этого сделано.

4) Легко сделать рабочий прототип. Следующее, это рабочий прототип. На Node.JS очень легко создать, что-то готовое и заставить это работать, причем работать в том числе под нагрузкой.

5) Удобный менеджер пакетов. В Node.JS есть очень удобный менеджер пакетов, NPM.

2.3 Проектирование базы данных

База данных состоит из 3 таблиц. Схема базы данных представлена на рисунке 5.



Рисунок 5 - Схема БД приложения

Описание таблиц базы данных:

1) games - таблица для хранения списка игр;

- id - уникальный идентификатор;

- name - название игры

2) users - таблица для хранения пользователей.

- id - уникальный идентификатор пользователя

- username - имя пользователя

- password - пароль пользователя в зашифрованном виде

- email - электронная почта пользователя

3) users_games - таблица связка для пользователей и пройденных ими игр

- id - уникальный идентификатор пользователя

- id_game - уникальный идентификатор игры

- id_user - уникальный идентификатор пользователя

2.4 Проектирование пользовательского интерфейса

Для создания изображений для игр был использован графический редактор Adobe Photoshop

При входе в приложение пользователь должен зарегистрироваться, либо авторизоваться как показано на рисунке 6.

Рисунок 6 - Форма авторизации

После авторизации будет отображена интерактивная карта игр, представленную на рисунке 7, на которой пользователь может выбрать игру.

Рисунок 7 - Интерактивная карта

Нажав на интерактивный элемент, загрузиться соответствующая игра. Пример изображен на рисунке 8. В каждой игре, чтобы её завершить, необходимо пройти несколько раундов (от 3 до 5) и игра будет отмечена как пройденная.



Рисунок 8 - Игра, в которой нужно выбрать количество углов у фигуры

Представленные игры:

1) Выбор нужной фигуры;

2) Выбор нескольких фигур по фомре;

3) Выбор нескольких фигур по цвету;

4) Указать количество углов у фигур;

5) Выбрать нужную фигуру по цвету;

6) Заполнить корзины;

7) Заполнить корзину, посчитав пример (Рисунок 2.6);

8) Раставить овощи в нужном порядке;

9) Помочь белке собрать корзину;

10) Выбор необходимого ряда с инструментами.

3. Реализация

3.1 Серверная часть системы

Серверная часть приложения была написана на языке Javascript. Использовался программный продукт Node.js, который позволил упростить и ускорить разработку. C помощью данного инструмента было разработано взаимодействие клиента с сервером по http и взаимодействие сервера с базой данных. Также было разработана система регистрации и авторизации.

Структура сайта изображена на рисунке 9.

Рисунок 9 - Каталог приложения

В ней представлены папки:

1) dumps - папка, где содержатся sql-запросы создания таблиц;

2) node_modules - в которой хранятся необходимые зависимости для серверной части. Такие как:

- express.js, для работы c http запросами;

- passport.js для работы с авторизацией;

- mysql.js для обработки запросов к базе данных MySql;

- express-session.js для работы с сессиями.

3) src - в ней содержатся файлы и папки, представляющие статические ресурсы;

- asserts - в ней содержатся такие ресурсы как: шрифты, изображения, звуки и общие скрипты;

- games - в ней содержатся скрипты отдельно для каждой игры

- commons.js - файл, который содержит общие скрипты, чтобы уменьшить дублируемость кода и делая приложения более расширяемым. Например, в этом файле содержится имя хоста для режима разработки (localhost:3000). И когда придет время развертывать приложение, достаточно будет просто поменять имя этой константы;

- favicon.png - значок отображающийся во вкладке браузера;

- Index.html - разметка для главной страницы;

- indexStyles.css - стилизация главной страницы;

- src_index.js - скрипт для главной страницы;

- sign-in.html - страница с авторизацией;

- sign-up.html - страница с регистрацией;

4) gitIgnore - необходима для того чтобы не загружать лишние файлы и папки в репозиторий;

5) package.json - для хранения информации о зависимостях;

6) server.js - скрипт для работы с серверной частью.

Начнем с рассмотрения создания таблиц в БД. Как упоминалось выше, в качестве сервера базы данных была использована MySQL. С помощью программного продукта MySQL Workbench были созданы таблицы: users, games и таблица-связка users-games. Создание таблиц с пользователями изображен на рисунке 10.



Рисунок 10 - Создание таблицы users

Вся реализация серверной части находится в файле server.js

В начале были импортированы необходимые зависимости, изображенные на рисунке 11. Они необходимы для взаимодействия с клиентом, базой данных, а также отдельные вспомогательные модули вроде session для работы с сессиями, body-parser для обработки запросов от клиента и path для предоставления пути к файлам и директориям.

Рисунок 11 - Подключаемые модули

Далее настраиваются параметры для работы с модулями в соответствии с рисунком 12. В первую очередь это параметры для соединения с локальной базой данных. Где указывается имя хоста, логин, пароль и название базы данных, к которой хотим подключиться.



Рисунок 12 - Конфигурация модулей

Затем реализуется доступ к статичным файлам. Для предоставления статических файлов, например, изображений, файлов CSS и JavaScript в Express используется функция промежуточной обработки express.static.

Для того чтобы начать непосредственное предоставление файлов, необходимо передать имя каталога, в котором находятся статические ресурсы, в функцию промежуточной обработки express.static. Например, воспользуемся приведенным ниже кодом, на рисунке 13, для предоставления изображений, файлов CSS и JavaScript, расположенных в каталоге src.

Рисунок 13 - Предоставление статических файлов

Теперь можно загрузить файлы, находящиеся в каталоге src.

- http://localhost:3000/ - Главная страница с интерактивной картой

- http://localhost:3000/Games?id=1 - Игра с идентификатором 1.

После этого была реализована обработка http-запросов, таких как:

1) /sign-up - get-запрос, для получения формы страницы создания аккаунта. Рисунок 14.

Рисунок 14 - Обработка запроса /sign-in

2) /sign-in - get-запрос, для получения формы страницы авторизации. Рисунок 15.

Рисунок 15 - Обработка запроса /sign-up

3) /auth - post-запрос, для авторизации пользователя в приложении. Рисунок 16.

Рисунок 16 - Обработка запроса /auth

1) /sign-up - post-запрос для создания аккаунта. Рисунок 17.



Рисунок 17 - Обработка post-запроса /sign-in

Для наглядности, на рисунке 18 представлена блок-схема.

Рисунок 18 - Запуск приложения на определенном порте

5) /logout - get-запрос для выхода пользователя из приложения и отображения формы с авторизацией. Рисунок 19.



Рисунок 19 - Обработка запроса /logout

6) /finish-game - post-запрос для записи в базу данных информацию о том, что пользователь закончил определенную игру, и переход на главную страницу с интерактивной картой. Рисунок 20.

Рисунок 20 - Обработка запроса /finish-game

7) /finished-games - post-запрос для получения всех законченных пользователем игр. Рисунок 21.

Рисунок 21 - Обработка запроса /finished-games

В конце задается тот порт, на котором будет запускаться приложение. Рисунок 22.

Рисунок 22 - Запуск приложения на определенном порте

Полный код серверной части представлен в приложении.

3.2 Клиентская часть системы

Структура и инструменты клиентской части

Клиентская часть представляет из себя веб-интерфейс, написанный на языке JavaScript. Основной технологией, при помощи которой была осуществлена разработка, стал игровой движок Phaser. Данный программный продукт основан на движке PixiJS, поддерживает мобильные платформы и устаревшие браузеры. Phaser имеет низкий порог вхождения и множество уроков по работе с ним.

Не последнюю роль при разработке клиентской части сыграл менеджер пакетов npm, входящий в состав Node.js. Добавление новых модулей происходит путем внесения их названий и желаемых версий в файл «package.json», после чего специальной командой «npm install» выбранные модули подключаются в проект. Для взаимодействия с DOM-элементами браузера была использована библиотека jQuery.

Особенности взаимодействия с серверной частью

Для взаимодействия клиента с сервером используется текстовый формат обмена данными JSON, основанный на языке JavaScript. Благодаря нему данные как отправляются на сервер, так и принимаются от него. Данный формат приобрел свою популярность по причине того, что он легко воспринимается как человеком, так и компьютером.

JSON-текст представляет собой одну из двух структур:

1. Набор пар ключ: значение. Ключом может быть только строка, значением - любая форма;

2. Упорядоченный набор значений. Во многих языках это реализовано как массив, вектор, список или последовательность.

В качестве значений в JSON могут быть использованы:

- Запись - это неупорядоченное множество пар ключ:значение, заключённое в фигурные скобки «{ }». Ключ описывается строкой, между ним и значением стоит символ «:». Пары ключ-значение отделяются друг от друга запятыми;

- Массив (одномерный) - это упорядоченное множество значений. Массив заключается в квадратные скобки «[]». Значения разделяются запятыми;

- Число;

- Литералы true, false и null;

- Строка - это упорядоченное множество из нуля или более символов юникода, заключённое в двойные кавычки [6].

В качестве примера можно привести ответ сервера на запрос списка пройденных пользователем игр и факт того, что он зарегистрирован, изображенный на рисунке 23.

Рисунок 23 - JSON-ответ от сервера

Пользовательский интерфейс проекта

Пользовательский интерфейс приложения состоит из следующих страниц и форм:

- Главная страница сайта;

- Игра, где необходимо выбрать нужную фигуру;

- Игра, где нужно выбрать несколько фигур по форме;

- Игра, где нужно указать количество углов у фигур;

- Игра, где необходимо выбрать нужную фигуру по цвету;

- Игра, где нужно выбрать несколько фигур по цвету

- Игра, где нужно помочь белке заполнить корзину;

- Игра, в которой нужно заполнить корзину, посчитав пример;

- Игра, где нужно расставить овощи в нужном порядке;

- Игра, где нужно выбрать ряд с различными инструментами;

- Игра, в которой нужно заполнить корзину необходимым количеством яблок;

- Форма создания аккаунта;

- Форма авторизации.

Главная страница показана на рисунке 24. Страница состоит из интерактивных элементов. Первый интерактивный элемент - это кнопка в верхнем-левом углу, которая позволяет перейти на форму авторизации. В зависимости от того зарегистрирован ли пользователь в игре, будет отображаться надпись: «Войти» или «Выйти». Если пользователь зарегистрирован, все пройденные им игры отмечаются соответствующим образом (Перестают быть «темными»). Игры можно заново проходить, даже если они уже пройдены.



Рисунок 24 - Главная страница

Форма авторизации, представленная на рисунке 25, позволяет уже зарегистрированным пользователям зайти в игру, введя имя и пароль, если и то и другое будет неверным, то пользователю выведется об этом сообщение

Рисунок 25 - Форма авторизации

Также пользователю предоставляется возможность создать аккаунт. Для этого он может перейти по ссылке «Создать аккаунт», и отобразиться форма с регистрацией в соответствии с рисунком 26. Пользователю необходимо заполнить те же поля, что и при авторизации и ещё свой email. Нажав кнопку «Создать» пользователь либо запишется в базу данных, либо, если пользователь с таким именем уже существует, выдать сообщение о том, что необходимо выбрать другое имя.

Рисунок 26 - Форма регистрации

Как говорилось выше, при нажатии на один из интерактивных изображений будет происходить переход на страницу с игрой. На рисунке 27 изображена блок схема, в которой отображена логика любой из 10 игр.



Рисунок 27 - Блок схема типичной игры в приложении

Каждая игра начинается с какой-нибудь задачки, которую пользователь должен решить. Если он выбрал неверный ответ, ему придет оповещение об этом, в виде звука и текста. А если пользователь верно решил задачку, то происходит переход на следующий уровень, при этом произойдет поощрение игрока, в виде текста, звука и анимации. Когда будет выполнена задача и последнего раунда, пользователю представится награда в виде звездочки, данные о том, что игрок прошел игру запишется в базу данных и произойдет переход на главную страницу. И если пользователь был зарегистрирован, то игра пометится как пройденная на интерактивной карте.

Разберем реализацию игры на конкретном примере, изображенного на рисунке 28. Возьмем игру, где нужно заполнить корзину необходимым количеством фруктов, в зависимости от ответа в решении примера.



Рисунок 28 - Игра «Сосчитай и заполни корзину»

В начале файл инициализируется базовая сущность Phaser - Game, в соответствии с рисунком 29, которая позволяет использовать все необходимые методы для работы с графикой.

Рисунок 29 - Первые строчки кода

В следующем фрагменте кода, изображенного на рисунке 30, загружаются спрайты для игры.

Рисунок 30 - Загрузка спрайтов

В следующем куске кода создаются элементы игры, такие как корзина, фрукты, кнопка, математическая задачка и так далее, в соответствии с рисунком 31.

Рисунок 31 - Создание игровых элементов

Как видно в примере выше было сделано для каждого элемента игры свою функцию создания. Во-первых, это повышает читаемость кода, а во-вторых, теперь можно переиспользовать эти функции в других местах кода. Для примера рассмотрим функцию создания математической задачи, в соответствии с рисунком 32.

Рисунок 32 - Функция создания математической задачки

Как только игрок решит пример и положит нужные фрукты в корзину, он может проверить ответ, нажав на зеленую кнопку, если ответ правильный, то начнется следующий уровень, а если нет, то появится сообщение о том, чтобы пользователь попробовал ещё раз. Фрагмент кода изображен на странице 33.

Рисунок 33 - Кнопка проверки решения

Для наглядности, на рисунке 34 представлена блок схема этой функции.

Рисунок 34 - Блок схема кнопки проверки решения

Как только будет пройден последний уровень, игра закончится, удалятся все созданные элементы, отобразится окно с поздравлением и через 5 секунд произойдет переход на главную страницу. Функция, отвечающая за эту логику представлена на рисунке 35.

Рисунок 35 - Функция, отвечающая за завершения уровня

Полный код клиентской части представлен в приложении

4. Тестирование

4.1 Методика тестирования

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

Основными классами тестирования являются модульные, функциональные, интеграционные и end-to-end тесты.

Модульные тесты -- такие тесты, в которых проверяется, правильно ли работает отдельные куски кода.

Функциональные тесты. С их помощью проверяются отдельные функции, связки модулей и так далее.

Интеграционные тесты. Они позволяют проверить, могут ли все модули работать вместе.

End-to-end тестирование. Проверка какой-либо функциональности с точки зрения клиента и от начала до конца [7].

В пределах данной разрабатываемой ВКР было проведено полноценное функциональное тестирование всех возможностей игрового приложения.

4.2 Результаты тестирования

Чтобы точно определить ошибки и корректно провести тестирование программного продукта, проведём все возможные манипуляции с приложением, для дальнейшего анализа, ожидаемого и полученного результатов. Начнем с тестирования формы с регистрацией.

1. Попробуем не заполнить поле с email, при нажатии на кнопку «Создать» должно появится сообщение, о незаполненном поле. Результат приведен на рисунке 36.



Рисунок 36 - Неполное заполнение формы

2. Попробуем зарегистрировать пользователя с именем, которое уже есть в базе данных. Должно появится сообщение с просьбой придумать другое имя. Результат на рисунке 37.

Рисунок 37 - Результат попытки регистрации с уже существующим именем

3. При вводе правильных данных и подборе ещё не существующего имени, должен произойти переход на главную страницу. На этой странице все интерактивные элементы должны быть затемненными, что означает что не одна игра ещё не пройдена так как пользователь только зарегистрировался. Результат на рисунке 38.



Рисунок 38 - Игровая карта со всеми играми отмеченные как незаконченные

Протестируем форму авторизации пользователя.

1. Попробуем ввести пользователя, которого не существует в базе данных. Должно отобразиться поле о некорректном заполнении данных. Результат на рисунке 39.

Рисунок 39 - Результат ввода имени и пароля, которых нет в базе данных

2. При верном заполнении данных должен произойти переход на главную страницу и все игровые элементы, которые соответствуют пройденным играм должны быть светлыми, в соответствии с рисунком 40.

Рисунок 40 - Главная страница с пройденными пользователем игр

Протестируем работу с главной страницей.

1. Попробуем зайти на главную страницу будучи не авторизованным. Должно появится сообщение, с просьбой авторизоваться, чтобы сохранять прогресс в соответствии с рисунком 41.

Рисунок 41 - Результат входа на страницу без авторизации

2. Попробуем зайти в игру. Для примера кликнем по вулкану в верхнем правом углу. Должен произойти переход в соответствующую игру. Результат представлен на рисунке 42.

Рисунок 42 - Игра, которая открылась при клике на вулкан

Протестируем одну из игр. Например, ту, которая уже открыта, где нужно выбрать нужные фигуры по их форме.

1. Выберем неверную фигуру, например, круг. Фигура должна на секунду отметиться как неправильная. Результат на рисунке 43.



Рисунок 43 - Результат неверно выбранной фигуры

2. Выберем верную фигуру, например, круг. Фигура должна отметиться как неправильная. Результат на рисунке 44.

Рисунок 44 - Результат выбора правильной фигуры

3. После выбора всех правильных фигур должен начаться новый раунд с новыми фигурами. Результат на рисунке 45.

Рисунок 45 - Новый раунд

4. После прохождения всех уровней должно выйти окно с поздравлением в соответствии с рисунком 46.

Рисунок 46 - Завершения игры

Затем должен произойти переход на главную страницу. Если пользователь был авторизован, то вулкан должен перестать быть темным. Результат на рисунке 47.

Рисунок 47 - Главная страница с одной пройденной игрой

5. Нажмем на выход на главной странице в соответствии с рисунком 48.



Рисунок 48 - Кнопка «Выйти» на главной странице

Должен произойти переход на страницу с авторизацией Результат представлен на рисунке 49.

Рисунок 49 - Страница с авторизацией

В результате проведения функционального тестирования и анализируя составленные в данном пункте тесты, можно убедиться в правильной и корректной работе игрового приложения.

После реализации проекта и проведения полного функционального тестирования, программный продукт готов к эксплуатации.

Для работы с базой данных на сервере должна стоять СУБД MySQL. В качестве сервера используется Ubuntu. Сервер располагается на удалённой машине на него установлен node 10 и npm. Пользователи, в свою очередь, знают только про приложение, куда отправлять запрос и что ожидать в ответ.

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

В конце необходимо запустить приложение на сервере с помощью команды node server.js.

Заключение

интерфейс программный серверный

Целью данной выпускной квалификационной работы была разработка игрового приложения для детей дошкольного возраста.

В первой части ВКР была проанализирована предметная область, в которой определили основные задачи. Были рассмотрены аналогичные программные продукты и сформулирована необходимость для разработки данного приложения.

Во второй части было рассмотрено проектирование системы. Составлена USE CASE-диаграмма и рассмотрена архитектура программного продукта. Для разработки приложения использовалась среда WebStorm, язык программирования javaScript, библиотеку Phaser. В качестве системы управления базами данных была выбрана MySQL. Также были спроектированы база данных и пользовательский интерфейс.

В третьей части была описана программная реализация серверной и клиентской частей и приведены примеры программного кода.

В четвертой части протестирована функциональность и пользовательский интерфейс.

В пятой части описано внедрение разработанной информационной системы.

Таким образом, в данной ВКР было разработано 10 игр с авторизацией и работой с БД.

Данное приложение обеспечивает выполнение всех функций, предъявленных в техническом задании. Интерфейс приложения прост и удобен в использовании.

Литература

1. Логозаврия: [Электронный ресурс] // Логозаврия сайт. - URL: http://www.logozavr.ru/.

2. Архитектура: [Электронный ресурс] // Википедия сайт. - URL: https://ru.wikipedia.org/wiki/Трехуровневая_архитектура.

3. Webstorm: [Электронный ресурс] // Википедия сайт. - URL: https://ru.wikipedia.org/wiki/WebStorm.

4. Введение в базы данных: [Электронный ресурс] // Компьютер пресс сайт. - URL: https://compress.ru/article.aspx?id=10551&part=pb1ext1l.

5. Microsoft SQL Server: [Электронный ресурс] // Википедия сайт. - URL: https://ru.wikipedia.org/wiki/Microsoft_SQL_Server.

6. JSON: [Электронный ресурс]. // Википедия сайт. - URL: https://ru.wikipedia.org/wiki/JSON.

7. Тестирование глазами разработчика: [Электронный ресурс]. // Data Art сайт. - URL: https://dataart.ru/news/testirovanie-glazami-razrabotchika.

Приложение

Исходный код проекта

Исходный код серверной части проекта:

Файл: umland\server.js

const mysql = require('mysql');

const express = require('express');

const session = require('express-session');

const bodyParser = require('body-parser');

const path = require('path');

const PORT = 3000;

const connection = mysql.createConnection({

host: 'localhost',

user: 'root',

password: 'root',

database: 'nodelogin'

});

const app = express();

app.use(session({

secret: 'secret',

resave: true,

saveUninitialized: true

}));

app.use(bodyParser.urlencoded({extended: true}));

app.use(bodyParser.json());

app.use(express.static(__dirname + "/src"));

app.get('/sign-in', function (request, response) {

response.sendFile(path.join(__dirname + '/src/sign_in.html'));

});

app.get('/sign-up', function (request, response) {

response.sendFile(path.join(__dirname + '/src/sign_up.html'));

});

app.post('/auth', function (request, response) {

var username = request.body.username;

var password = request.body.password;

if (username && password) {

connection.query('SELECT * FROM nodelogin.users WHERE username = ? AND password = ?',

[username, password],

function (error, results) {

if (results.length > 0) {

request.session.loggedin = true;

request.session.username = username;

response.redirect('/');

} else {

response.send('Неверное имя или пароль');

}

response.end();

});

} else {

response.send('Пожайлуста, введи имя и пароль');

response.end();

}

});

app.post('/sign-up', function (request, response) {

var username = request.body.username;

var password = request.body.password;

var email = request.body.email;

if (username && password && email) {

connection.query('SELECT * FROM nodelogin.users WHERE username = ?',

username,

function (error, results) {

if (results.length > 0) {

response.send('Такое имя уже есть, придумай другое');

} else {

connection.query(`INSERT INTO users(username, password, email)

VALUES (?, ?, ?) `,

[username, password, email],

(error) => {

request.session.loggedin = true;

request.session.username = username;

response.redirect('/');

}

)

}

});

} else {

response.send('Пожайлуста, введи имя и пароль');

response.end();

}

});

app.get('/logout', (request, response) => {

request.session.loggedin = false;

request.session.username = null;

});

app.post('/finish-game', (request, response) => {

const username = request.session.username;

const gameId = request.body.gameId + 1;

if (username) {

connection.query(

`insert into users_games(id_user, id_game)

values ((SELECT id FROM users

where username = ?), ?);

`,

[username, gameId],

);

}

response.end();

});

app.get('/finished-games', (request, response) => {

username = request.session.username;

if (username) {

connection.query(

`select games.id from users_games

left join games on games.id = users_games.id_game

left join users on users.id = users_games.id_user

where username = ?`,

username,

(error, results) => response.json({

gamesId: results.map((game) => game.id - 1),

isLogin: true,

})

);

}

});

app.listen(PORT,

console.log('Сервер запущен на http://localhost:%s', PORT)

);

Исходный код клиентской части проекта:

Файл: umland\src\Games\game_7

Game = new Phaser.Game(1200, 600, Phaser.AUTO, 'CanvasGame', {preload: preload, create: create, update: update});

Phaser.Game.prototype.showDebugHeader = function () {};

function preload() {

Game.stage.backgroundColor = "#fff";

Game.load.image("spr_background", "../Assets/Images/img_Backgrounds/" + "img_background_" + 4 + ".jpg");

Game.load.image("spr_btn_checkmark", "../Assets/Images/img_Icons/" + "img_btn_checkmark.png")

Game.load.image("spr_btn_cross", "../Assets/Images/img_Icons/" + "img_btn_cross.png")

Game.load.image("spr_cabbage", "../Assets/Images/img_Food/Vegetables/" + "x128" + "/img_food_vegetables_" + 0 + ".png");

Game.load.image("spr_carrot", "../Assets/Images/img_Food/Vegetables/" + "x128" + "/img_food_vegetables_" + 1 + ".png");

Game.load.image("spr_cucumber", "../Assets/Images/img_Food/Vegetables/" + "x128" + "/img_food_vegetables_" + 2 + ".png");

Game.load.image("spr_field", "../Assets/Images/img_Objects/img_field3X3.png");

MainParticles.Preload();

MainReward.Preload(0);

MainButtons.Preload();

MainSounds.Preload();

}

function NextLevelButton_Down(pointer) {

if (MainReward.Reward.Main.DrawUp == true) {

MainSounds.Sounds.Back.destroy();

MainSounds.Sounds.Win.destroy();

Game.state.start(Game.state.current);

}

}

function create() {

GameState = {};

GameState.CurStep = 0;

GameState.MaxStep = 6;

BackGround = Game.add.image(0, 0, "spr_background");

BackGround.width = Game.width;

BackGround.height = Game.height;

sizeVegetables = Math.round(Game.width * 0.07);

Field = Game.add.image(0, 0, "spr_field");

Field.x = Game.width / 2 / 2;

Field.y = Game.height / 2 / 2;

Field.width = Game.width / 2;

Field.height = Game.height / 2;

Field.fullnessField = [0, 0, 0, 0, 0, 0, 0, 0, 0];

Field.leftBroderX = [];

Field.rightBroderX = [];

Field.topBroderY = [];

Field.bottomBroderY = [];

Field.leftBroderX[0] = Field.x;

Field.rightBroderX[0] = (Field.x + Field.width / 6 * 2) - (sizeVegetables / 2);

Field.topBroderY[0] = Field.y - (sizeVegetables / 2);

;

Field.bottomBroderY[0] = (Field.y + Field.height / 6 * 2) - (sizeVegetables / 2);

Field.leftBroderX[1] = (Field.x + Field.width / 6 * 2) - (sizeVegetables / 2);

Field.rightBroderX[1] = (Field.x + Field.width / 6 * 4) - (sizeVegetables / 2);

Field.topBroderY[1] = (Field.y + Field.height / 6 * 2) - (sizeVegetables / 2);

Field.bottomBroderY[1] = (Field.y + Field.height / 6 * 4) - (sizeVegetables / 2)

Field.leftBroderX[2] = (Field.x + Field.width / 6 * 4) - (sizeVegetables / 2);

Field.rightBroderX[2] = (Field.x + Field.width / 6 * 6) - (sizeVegetables / 2);

Field.topBroderY[2] = (Field.y + Field.height / 6 * 4) - (sizeVegetables / 2);

Field.bottomBroderY[2] = (Field.y + Field.height / 6 * 6) - (sizeVegetables / 2)

Button = Game.add.image(0, 0, "spr_btn_checkmark");

Button.anchor.set(0.5, 0.5)

Button.width = Math.round(Game.width * 0.13);

Button.height = Button.width;

Button.x = Field.x + Field.width + Button.width;

Button.y = Field.y + Field.height / 2;

Button.inputEnabled = true;

Button.events.onInputDown.add(continueButton, this);

lockVegetables = {};

unlockVegetables = {};

setLockVegetables(0);

setUnlockVegetables();

var style = {font: "64px Trebuchet MS", fill: "#ffffff", align: "center"};

Quest_Text = Game.add.text(Game.world.centerX, 5, "", style);

Quest_Text.anchor.set(0.5, 0.0);

Quest_Text.text = "";

Quest_Text.font = "Trebuchet MS";

Quest_Text.fontSize = (Game.width * 0.3) * 0.1 + "px";

Quest_Text.stroke = "#000000";

Quest_Text.strokeThickness = Math.floor(Quest_Text.fontSize * 0.15);

Quest_Text.alpha = 1;

Quest_Text.inputEnabled = true;

Quest_Text.text = "Расставь овощи так, чтобы они не повторялись\n" + "по ВЕРТИКАЛИ";

var style = {font: "20px Trebuchet MS", fill: "#ffffff", align: "left"};

Commend_Text = Game.add.text(Game.world.centerX / 4, Game.world.centerY, "", style);

Commend_Text.anchor.set(0.5, 0.5);

Commend_Text.goodTexts = ["Молодец!", "Умница!", "Продолжай!"];

Commend_Text.badTexts = ["Неправильно!", "Попробуй ещё раз!", "Ошибка!"];

Commend_Text.text = "Молодец!";

Commend_Text.stroke = "#000000";

Commend_Text.strokeThickness = Math.floor(Quest_Text.fontSize * 0.15);

Commend_Text.activate = false;

Commend_Text.font = "Trebuchet MS";

Commend_Text.fontSize = (Game.width * 0.25) * 0.1 + "px";

Commend_Text.alpha = 0;

BackgroundBlack = Game.add.image(0, 0, "spr_background");

BackgroundBlack.width = Game.width;

BackgroundBlack.height = Game.height;

BackgroundBlack.tint = "0x000000";

BackgroundBlack.alpha = 0.25;

BackgroundBlack.inputEnabled = true;

BackgroundBlack.visible = false;

BackgroundBlack.events.onInputDown.add(NextLevelButton_Down, this);

MainParticles.Create();

MainButtons.Create();

MainButtons.MuteToggleButton_Down();

MainReward.Create();

MainSounds.Create();

GameCanvasShow();

}

function continueButton() {

Button.width = Math.round(Game.width * 0.12);

Button.height = Button.width

setTimeout(() => {

Button.width = Math.round(Game.width * 0.13);

Button.height = Button.width

}, 100)

if (isFullField() && successFullField(GameState.CurStep)) {

MainSounds.Sounds.Clicks[6].play();

if (!Commend_Text.activate && GameState.CurStep < 6) {

Commend_Text.text = Commend_Text.goodTexts[Math.round(Math.random() * (Commend_Text.goodTexts.length - 1))];

Commend_Text.angle = -30;

Commend_Text.x = Game.world.centerX / 4;

Commend_Text.activate = true;

MainParticles.Star0.setYSpeed(500, 700);

MainParticles.Star0.start(true, Math.round(Game.height), 0, Math.round(Game.width * 0.025));

game()

}

} else {

Button.loadTexture("spr_btn_cross", 0);

setTimeout(() => Button.loadTexture("spr_btn_checkmark", 0), 300)

MainSounds.Sounds.Errors[0].play();

if (Commend_Text.activate == false) {

Commend_Text.text = Commend_Text.badTexts[Math.round(Math.random() * (Commend_Text.badTexts.length - 1))];

Commend_Text.angle = -30;

Commend_Text.x = Game.world.centerX / 4;

Commend_Text.activate = true;

}

}

}

function setLockVegetables(step) {

images = ["spr_cabbage", "spr_carrot", "spr_cucumber"];

for (var i = 0; i < 3; i++) {

var indexVeg = Math.floor(Math.random() * images.length);

lockVegetables[i] = Game.add.image(0, 0, images[indexVeg]);

lockVegetables[i].id = identify(images[indexVeg]);

lockVegetables[i].width = sizeVegetables;

lockVegetables[i].height = sizeVegetables

images.splice(indexVeg, 1);

}

if (step == 0) {

var place = 1;

for (var i = 0; i < 3; i++) {

lockVegetables[i].x = (Field.x + Field.width / 6 * place) - (sizeVegetables / 2);

lockVegetables[i].y = (Field.y + Field.height / 6 * place) - (sizeVegetables / 2);

place += 2;

}

Field.fullnessField[0] = lockVegetables[0].id;

Field.fullnessField[4] = lockVegetables[1].id;

Field.fullnessField[8] = lockVegetables[2].id;

} else if (step == 1) {

var placeX = 5;

var placeY = 1

for (var i = 0; i < 3; i++) {

lockVegetables[i].x = (Field.x + Field.width / 6 * placeX) - (sizeVegetables / 2);

lockVegetables[i].y = (Field.y + Field.height / 6 * placeY) - (sizeVegetables / 2);

placeX -= 2;

placeY += 2;

}

Field.fullnessField[2] = lockVegetables[0].id;

Field.fullnessField[4] = lockVegetables[1].id;

Field.fullnessField[6] = lockVegetables[2].id;

} else if (step == 2 || step == 4) {

var index = 0;

var placeX = 1;

var placeY = Math.floor(Math.random() * 3);

if (placeY == 0) {

placeY = 1;

index = 0;

} else if (placeY == 1) {

placeY = 3;

index = 3;

} else if (placeY == 2) {

placeY = 5;

index = 6;

}

for (var i = 0; i < 3; i++) {

lockVegetables[i].x = (Field.x + Field.width / 6 * placeX) - (sizeVegetables / 2);

lockVegetables[i].y = (Field.y + Field.height / 6 * placeY) - (sizeVegetables / 2);

placeX += 2;

}

Field.fullnessField[index] = lockVegetables[0].id;

Field.fullnessField[++index] = lockVegetables[1].id;

Field.fullnessField[++index] = lockVegetables[2].id;

} else if (step == 3 || step == 5) {

var index = 0;

var placeX = Math.floor(Math.random() * 3);

var placeY = 1;

if (placeX == 0) {

placeX = 1;

index = 0

} else if (placeX == 1) {

placeX = 3;

index = 1

} else if (placeX == 2) {

placeX = 5;

index = 2

}

for (var i = 0; i < 3; i++) {

lockVegetables[i].x = (Field.x + Field.width / 6 * placeX) - (sizeVegetables / 2);

lockVegetables[i].y = (Field.y + Field.height / 6 * placeY) - (sizeVegetables / 2);

placeY += 2;

}

Field.fullnessField[index] = lockVegetables[0].id;

Field.fullnessField[index += 3] = lockVegetables[1].id;

Field.fullnessField[index += 3] = lockVegetables[2].id;

}

}

function setUnlockVegetables() {

images = ["spr_cabbage", "spr_carrot", "spr_cucumber"];

index = 0;

var coordX = 0;

for (var i = 0; i < 3; i++) {

for (var j = 0; j < 2; j++) {

unlockVegetables[index] = Game.add.image(0, 0, images[i]);

unlockVegetables[index].id = identify(images[i]);

unlockVegetables[index].width = sizeVegetables;

unlockVegetables[index].height = sizeVegetables;

unlockVegetables[index].x = Field.x + coordX;

unlockVegetables[index].y = Field.y + unlockVegetables[index].height / 2 + Field.height;

unlockVegetables[index].startPositionX = unlockVegetables[index].x;

unlockVegetables[index].startPositionY = unlockVegetables[index].y;

unlockVegetables[index].events.onInputDown.add(dragVegetable, this);

unlockVegetables[index].inputEnabled = true;

unlockVegetables[index].input.enableDrag(true);

unlockVegetables[index].events.onDragStop.add(dropVegetable);

coordX += sizeVegetables * 1.2;

index++;

}

}

}

function identify(image) {

if (image == "spr_cabbage") return 1;

else if (image == "spr_carrot") return 2;

else if (image == "spr_cucumber") return 3;

}

function dragVegetable(sprite) {

var indexСell = 0;

for (var y = 0; y < 3; y++) {

if (sprite.y > Field.topBroderY[y] && sprite.y < Field.bottomBroderY[y]) {

for (var x = 0; x < 3; x++) {

if (sprite.x > Field.leftBroderX[x] && sprite.x < Field.rightBroderX[x]) {

if (Field.fullnessField[indexСell] != 0) {

Field.fullnessField[indexСell] = 0;

return;

}

}

indexСell++;

}

} else indexСell += 3;

}

}

function dropVegetable(sprite) {

var indexСell = 0;

var kY = 1;

for (var y = 0; y < 3; y++) {

var kX = 1;

if (sprite.y > Field.topBroderY[y] && sprite.y < Field.bottomBroderY[y]) {

for (var x = 0; x < 3; x++) {

if (sprite.x > Field.leftBroderX[x] && sprite.x < Field.rightBroderX[x]) {

if (Field.fullnessField[indexСell] == 0) {

sprite.x = (Field.x + Field.width / 6 * kX) - (sizeVegetables / 2);

sprite.y = (Field.y + Field.height / 6 * kY) - (sizeVegetables / 2);

Field.fullnessField[indexСell] = sprite.id;

return;

} else {

sprite.x = sprite.startPositionX;

sprite.y = sprite.startPositionY;

return;

}

}

indexСell++;

kX += 2;

}

} else indexСell += 3;

kY += 2;

}

}

function isFullField() {

for (var i = 0; i < 9; i++)

if (Field.fullnessField[i] == 0)

return false;

return true;

}

function successFullField(step) {

if (step == 0 || step == 1) {

if ((Field.fullnessField[0] != Field.fullnessField[3] && Field.fullnessField[3] != Field.fullnessField[6] && Field.fullnessField[6] != Field.fullnessField[0])

&& (Field.fullnessField[1] != Field.fullnessField[4] && Field.fullnessField[4] != Field.fullnessField[7] && Field.fullnessField[7] != Field.fullnessField[1])

&& (Field.fullnessField[2] != Field.fullnessField[5] && Field.fullnessField[5] != Field.fullnessField[8] && Field.fullnessField[8] != Field.fullnessField[2]))

return true;

return false;

} else if (step == 2 || step == 3) {

if ((Field.fullnessField[0] != Field.fullnessField[1] && Field.fullnessField[1] != Field.fullnessField[2] && Field.fullnessField[2] != Field.fullnessField[0])

&& (Field.fullnessField[3] != Field.fullnessField[4] && Field.fullnessField[4] != Field.fullnessField[5] && Field.fullnessField[5] != Field.fullnessField[3])

&& (Field.fullnessField[6] != Field.fullnessField[7] && Field.fullnessField[7] != Field.fullnessField[8] && Field.fullnessField[8] != Field.fullnessField[6]))

return true;

return false;

} else if (step == 4 || step == 5) {

if ((Field.fullnessField[0] != Field.fullnessField[1] && Field.fullnessField[1] != Field.fullnessField[2] && Field.fullnessField[2] != Field.fullnessField[0])

&& (Field.fullnessField[3] != Field.fullnessField[4] && Field.fullnessField[4] != Field.fullnessField[5] && Field.fullnessField[5] != Field.fullnessField[3])

&& (Field.fullnessField[6] != Field.fullnessField[7] && Field.fullnessField[7] != Field.fullnessField[8] && Field.fullnessField[8] != Field.fullnessField[6])

&& (Field.fullnessField[0] != Field.fullnessField[3] && Field.fullnessField[3] != Field.fullnessField[6] && Field.fullnessField[6] != Field.fullnessField[0])

&& (Field.fullnessField[1] != Field.fullnessField[4] && Field.fullnessField[4] != Field.fullnessField[7] && Field.fullnessField[7] != Field.fullnessField[1])

&& (Field.fullnessField[2] != Field.fullnessField[5] && Field.fullnessField[5] != Field.fullnessField[8] && Field.fullnessField[8] != Field.fullnessField[2]))

return true;

return false;

}

}

function game() {

for (var i = 0; i < 3; i++)

lockVegetables[i].destroy();

for (var i = 0; i < 6; i++)

unlockVegetables[i].destroy();

...