17 мин. на чтение (слов - 3412)

Создание электронных игр: кроссворд «Названия фруктов»

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

Сегодня узнаем, как создать этот тип игры с помощью ActivePresenter 7.

Правила игры

Есть восемь слов по горизонтали (восемь строк от 1 до 8) и одно слово по вертикали (столбец с красной границей). Каждое слово – это название фрукта, которое нужно выяснить. Название фрукта идеально подходит для каждой строки (по одной букве в каждой клетке). Каждая строка является ключом, чтобы узнать слово в столбце.

Все, что нужно сделать, это нажать на фрукты, ввести их название в текстовых полях, которые появляются, и нажать ENTER.

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

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

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

Дизайн игры

Проект игры имеет два слайда: слайд с приветствием и слайд с кроссвордом. Оба имеют пользовательский фон, созданный с помощью изображений и тем.

Большая часть игрового контента может быть создана с помощью объектов и функций ActivePresenter (фигуры, текст, надпись, события, действия и т. д.). Некоторые элементы могут быть созданы с использованием внешних ресурсов (изображение фруктов и т. д.)

Для некоторых действий необходим JavaScript. Не пугайтесь, если не знакомы с JS, потому что код JS будет здесь представлен. Его нужно лишь скопировать.

Процесс создания игры разбит на несколько этапов:

  1. Дизайн фона слайда.
  2. Создание слайда приветствия.
  3. Создание слайда кроссворда.
  4. Добавление событий и действий к изображениям фруктов и полям названий фруктов.
  5. Создание кнопки «Помощь».
  6. Экспорт игрового проекта.

Дизайн фона слайда

Проект имеет два слайда с одинаковым фоном. Можно создать фоновую графику для одного слайда, а затем скопировать на новый (щелкните правой кнопкой мыши слайд > «Копировать» > щелкните правой кнопкой мыши в любом месте панели слайдов > «Вставить»).

Использование фоновой графики делает игру более привлекательной. Существует несколько способов создания фоновой графики для слайдов, одним из которых является использование темы. Многие встроенные в ActivePresenter 7 темы уже готовы к использованию (вкладка «Оформление» > «Темы»).

Дополнительные сведения об использовании и настройке темы см. Использование тем в ActivePresenter 7 и Создание и использование шаблонов слайдов.

Кроме того, можно просто вставить любимое изображение в пустой слайд (вкладка «Аннотации» > «Изображение») и сделать его фоном слайда (щелкните правой кнопкой мыши изображение > «Объединить в фон»). После этого отредактируйте фон слайда, если потребуется.

Создание слайда приветствия

Первый слайд проекта содержит следующую информацию: название игры, вводный текст, рассказывающий пользователям о правилах игры, и кнопку запуска, которую пользователи могут нажать, чтобы начать играть. За исключением кнопки «Старт», созданной с помощью объекта «Кнопка», другие элементы могут быть созданы с помощью фигур.

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

  • для текстового поля названия фрукта: Строка_X_1 или Столбец_X_2, где X – номер фрукта от 1 до 8 (Строка_1_1, Строка_2_1 и т. д.);
  • для каждой фигуры строки в кроссворде: X_Y, где X – номер строки, а Y – порядок фигуры в строке (1_1, 2_1 и т. д.).

Важное примечание 2: чтобы создать эту игру, необходимо знать, как работать с событиями и действиями объекта. Для это лучше заранее познакомиться со статьей Использование событий и действий в ActivePresenter 7.

1. Текстовое поле названия игры и инструкция

Вставьте две фигуры или текстовые надписи (вкладка «Аннотации» > «Фигура/текст»), одну для названия игры, другую для инструкции. Введите текст в каждую из них и измените внешний вид, чтобы сделать их «видимыми», позволяя им не иметь заливки и линии (панель «Свойства» > вкладка «Стиль и эффекты»).

2. Кнопка «Старт»

Пользователи могут нажать кнопку «Старт», чтобы начать игру. Кнопка запускает следующий экран, содержащий кроссворд. Это можно сделать с помощью событий и действий. Кроме того, используйте функцию состояния объекта, чтобы придать кнопке другой вид, когда пользователи наводят или нажимают на нее.

Выполните следующие действия для создания кнопки:

Шаг 1: вставьте кнопку и измените ее стиль

Вставьте кнопку (вкладка «Взаимодействия» > «Кнопка»), введите название кнопки (можно назвать ее «Старт» или «Играть»), и измените ее внешний вид на ваше усмотрение. Чтобы изменить стиль и цвет фигуры, перейдите на вкладку «Свойства» > «Стиль и эффекты» > «Заливка, линия, тень».

Есть еще один способ изменить стиль кнопки, выбирая один из множества готовых шаблонов стилей – вкладка «Формат» > «Кнопка».

Шаг 2: назначьте кнопке разные состояния

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

Для этого выберите кнопку, откройте окно состояния объекта (выберите кнопку > вкладка «Вид» > «Состояния объекта») и нажмите кнопку «Изменить состояния», чтобы включить функцию редактирования. Измените заливку, линию и цвет для каждого состояния кнопки («Normal (По умолчанию)», «При наведении» и «Нажата»).

Шаг 3: заставьте кнопку «Старт» заработать, добавив события и действия

События и действия делают кнопку «Старт» интерактивной и фактически запускают игру. Когда пользователи нажимают на нее, начинается игра и воспроизводится короткий звук. Добавьте событие «По щелчку» и добавьте действия «Воспроизведение аудио» и «Перейти вперед», как на скриншоте ниже:

Шаг 4: сделайте паузу в игре, чтобы дождаться действий пользователя

Как правило, когда первый слайд заканчивается, отображается второй слайд, даже если пользователи не нажмут кнопку «Старт». Чтобы избежать этого, нажмите кнопку и установите чекбокс «Пауза презентации для ожидания ввода данных пользователем» на панели «Свойства».

Создание слайда кроссворда

Кроссворд имеет восемь слов, которые могут быть созданы с помощью объекта «Фигура». Каждый фрукт имеет номер, который соответствует номеру строки. Необходимо вставить восемь изображений фруктов, использовать объект «Текстовое поле» для создания полей имен фруктов и использовать объект «Фигура» для создания чисел фруктов.

Текст «Нажми меня!» появляется, когда пользователи нажимают на фрукт. Для его создания можно использовать текстовые надписи.

1. Создание кроссворда

Строка в кроссворде состоит из фигур. Количество фигур зависит от того, сколько букв в названии фрукта. Обычно вставляется и настраивается одна фигура (светло-синяя заливка, черная сплошная линия). Затем она копируется и вставляется для создания первой строки. После этого используйте команду копировать и вставить для создания других семи строк. Для строки, которая имеет меньше букв, удалите лишние фигуры.

Привязка к холсту (вкладка «Вид» > «Привязка к холсту») и функция упорядочения и выравнивания объектов позволяют легко выстраивать фигуры.

После создания восьми строк вставьте объект «Подсветка» (вкладка «Аннотации» > «Подсветка»), измените его границу на красную линию и поместите в положение «Опустить».

Затем создайте номер для каждой строки (от 1 до 8), вставив текстовую надпись (вкладка «Аннотации» > «Текстовая надпись»), введя число и изменив его внешний вид.

2. Вставка изображений фруктов и их номеров

Чтобы вставить изображение с компьютера, откройте вкладку «Аннотации» и щелкните «Изображение».

Лучше назвать изображения по шаблону Изображение_X, где X – номер плода. X также является номером строки в кроссворде. Например, номер строки лимона – 8, поэтому его картинка названа Изображение_8.

Для номеров фруктов используйте объект «Фигура» с числом внутри.

3. Работа с полем названия фрукта и текстом «Нажмите на меня!»

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

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

Шаг 1: вставьте текстовое поле для каждого изображения фрукта (вкладка «Взаимодействия» > «Текстовое поле»)

По умолчанию текстовое поле имеет сообщение «Правильно» и «Неправильно» со встроенной фигурой и цветом. Можно изменить внешний вид этих сообщений (выберите сообщения > вкладка «Формат»).

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

Напомним, что необходимо изменить название текстового поля в соответствии с указанным ранее форматом (Строка_8_1 – это текстовое поле имени фрукта номер восемь).

Затем установите состояние текстового поля и сообщений изначально скрытым (щелкните правой кнопкой мыши объект > «Изначально скрыто»), чтобы скрыть их до вызова действием.

Шаг 2: определите правильный ответ для текстового поля

Каждое текстовое поле содержит название фрукта, которое является правильным ответом.

Чтобы определить это значение, выберите текстовое поле и перейдите на вкладку «Общее» (панель «Свойства» > «Взаимодействия» > «Общее»). Нажмите кнопку «Добавить значения» и введите правильное имя фрукта в поле «Список правильных значений». Например, правильный ответ для номера восемь – Lemon.

Шаг 3: определите количество баллов и попыток для текстового поля

В разделе «Оценивание и отчетность» (панель «Свойства» > вкладка «Взаимодействия») установите количество баллов для каждого правильного ответа равным 1. Это не для ранжирования или отслеживания пользователей, а для подсчета общего количества баллов. Если пользователи получат 8 баллов, они завершат игру.

Затем выберите «Бесконечно» в поле «Попытки». Это позволит игрокам пробовать ответить столько раз, сколько они хотят.

Кроме того, установите Enter в качестве ключа для отправки, чтобы пользователи могли нажать ENTER после ввода ответа.

Дополнительные сведения об определении правильного ответа и оценивания интерактивных объектов см.:

Шаг 4: создание текста «Нажми меня!»

Когда пользователи наводят курсор на изображение фруктов, появляется сообщение с текстом «Нажми меня!», предлагая пользователям щелкнуть фрукты. Чтобы получить этот текст, вставьте текстовую надпись (вкладка «Аннотации» > «Текстовая надпись»). Переименуйте ее (Нажми меня_8), настройте и установите изначально скрытой (щелкните правой кнопкой мыши объект > «Изначально скрыто»). Текст будет скрыт, поэтому игроки не могут видеть его, пока они не наведут курсор на фрукты. Эти действия могут быть инициированы с помощью действий. В следующей части будет рассказано, как это сделать.

4. Создание шкалы времени для текстовых полей с названием фрукта и текстом «Нажми меня!»

На этом этапе добавим шкалу времени для управления анимацией полей с именами фруктов и текста «Нажми меня!». Благодаря этому можно использовать действие, чтобы показать или скрыть их.

Шаг 1: добавление интерактивной шкалы времени

Чтобы создать новую шкалу времени, щелкните список шкал времени и выберите «Добавить шкалу времени». Измените ее имя, чтобы скрыть текстовые поля (снова щелкните список шкал времени и выберите «Переименовать шкалу времени...»). Можно выбрать другое значимое имя, чтобы легче было его запомнить.

Дополнительные сведения см. Использование нескольких шкал времени.

Шаг 2: добавление анимации во все текстовые поля и текстовые надписи

Добавление анимации к объектам на интерактивную шкалу времени похоже на добавление на основную шкалу времени. Выделите все текстовые надписи и текстовые поля (удерживая CTRL при щелчке, чтобы выбрать несколько из них), откройте вкладку «Анимации» и выберите эффект «Исчезание».

Затем сделайте продолжительность эффекта короче (щелкните правой кнопкой мыши панель времени анимации > «Настройки анимации»).

5. Работа с группой желтых звезд

Когда пользователи заканчивают игру, появляются несколько мерцающих желтых звезд, чтобы поздравить их. Это можно сделать с помощью объекта «Фигура» и анимации объекта.

Шаг 1: создание группы звезд

Каждая звезда в группе имеет четырехконечную форму. Можно вставить одну (вкладка «Аннотации» > «Фигуры» > «Звезды»), настроить и скопировать, чтобы создать другие.

Затем сгруппируйте все эти фигуры в одну группу (выберите их > щелкните правой кнопкой мыши > «Группировать»), что позволит легко перемещать их вместе. Группировка также позволяет анимировать их быстрее, так как нужно анимировать только одну группу как объект, а не каждую фигуру по отдельности.

Шаг 2: анимация группы звезд

Для легкой анимации группы создайте для нее интерактивную шкалу времени «Поздравление». См. выше на создание шкалы времени для текстовых полей названий фруктов и текста «Нажми меня!».

На созданной шкале времени добавьте эффект акцента «Пульс» к группе, заставляя звезды мерцать (выберите объект группы > «Анимация» > «Акцент и путь движения» > «Пульс»).

Затем повторите эффект, отредактировав анимацию. Выберите, сколько раз анимация будет повторяться, прежде чем объекты останутся неподвижными в поле «Повтор».

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

Когда игроки наводят курсор мыши над любым из фруктов, он подсвечивается (слегка встряхивается) на некоторое время. Это можно сделать с помощью событий и действий. Но если ответ уже дан, то изображение больше не подсвечивается при наведении. Для этого необходимо использовать переменную.

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

Эта процедура требует определенной степени мастерства в понимании событий и действий. Если у вас еще нет глубокого их понимания, см . Использование событий и действий в ActivePresenter 7.

1. Добавление событий и действий к изображениям фруктов

Есть три типа взаимодействия, которые пользователи могут применять к изображениям фруктов: «По щелчку», «При наведении указателя» и «При отводе указателя». Каждый из них запускает определенные действия, например, воспроизведение звука, отображение объекта или регулировка переменной и т. д. Чтобы это произошло, необходимо добавить три события (при щелчке, при наведении указателя и при отводе указателя) к изображению, а затем добавить действия к каждому из событий.

Событие «По щелчку»

Когда игроки щелкают на изображения фруктов, происходят следующие действия:

  • Появится текстовое поле (Строка_8_1), в котором пользователи могут ввести имя фрукта.

Для этого используйте действие «Показать объект», чтобы отобразить поле названия номер 8 (Строка_8_1), и используйте действие «Запуск шкалы времени», чтобы вызвать скрытие текстовых полей, созданных ранее.

Не забудьте отменить выбор опции «Скрыть после». В противном случае поле имя может исчезнуть еще до того, как пользователи смогут ввести текст.

  • Воспроизводится короткий звук (Mouse Click 1).

Просто используйте действие «Воспроизведение аудио» и выберите встроенный трек или импортируйте файл с компьютера.

  • Регулировка переменной.

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

Как добавить новую переменную?

Сначала нажмите кнопку «Добавить переменную» в записи «Регулировка переменной». Можно создать новую переменную на вкладке «Главная» > «Переменные» заранее и выбрать ее для настройки на этом шаге.

Далее во всплывающем окне нажмите кнопку «Добавить новую», укажите имя (status), тип (ЧИСЛО), начальное значение (0) и нажмите кнопку «Сохранить».

Затем выберите оператор (назначение) и задайте значение 8.

Для других изображений фруктов от номера один до семи можно просто выбрать переменную status из списка и установить соответственно значение от 1 до 7.

См. следующие статьи, чтобы узнать больше о переменных:

Событие «При наведении указателя»

Событие «При наведении указателя» требует двух действий. Один для подсветки изображения (Изображение_8), а другое – показать текст «Нажми меня!» (Нажми меня_8).

Фрукт, на который был дан правильный ответ, больше не получит подсветки. Поэтому действие подсветки требует условия, когда общее количество не равно 8.

Событие «При отводе указателя»

Текст «Нажми меня!» отображается до тех пор, пока пользователи не отведут указатель мыши от фруктов. Используйте действие «Скрыть объект: Нажми меня_8», чтобы сделать это.

2. Добавление событий и действий в поля названий фруктов

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

Событие «Если правильно»

Когда пользователи вводят правильный ответ в поле имя, выполняются следующие действия:

  • Событие «Если правильно» выполняет функцию JavaScript, которая обновляет кроссворд, заставляя имя фрукта отображаться в кроссворде.

Для этого сначала скопируйте и вставьте следующий код JavaScript на вкладку «Событие» проекта (кнопка ActivePresenter > «Проект» > «Свойства» > «Событие»):

if (!prez.updateCrossword) {
	prez.updateCrossword = function(name) {
		var names = name.split('_');
		if (names.length != 3 || (names[0] != 'Строка' && names[0] != 'Столбец')) {
			alert('Неправильное имя текстового поля: ' + name + '. Имя текстового поля должно быть что-то вроде Строка_1_1, Столбец_1_2');
			return;
		}
		var textbox = this.object(name);
		if (!textbox) {
			alert('Текстовое поле не имеет названия: ' + name);
			return;
		}
		var isRow = names[0] == 'Строка',
			rowCode = parseInt(names[1]),
			columnCode = parseInt(names[2]),
			textboxValue = textbox.text().toUpperCase(),
			i, n, charShape;
		for (i = 0, n = textboxValue.length; i < n; ++i) {			
         
          charShape=this.object(rowCode + '_' + columnCode);
			if (charShape)
				charShape.text(textboxValue.charAt(i));

			else
				alert('Фигура не имеет названия: ' + String.fromCharCode(rowCode, columnCode));
			if (isRow)
				++columnCode;
			else
				++rowCode;
		}
                
	};
} 

Затем используйте действие «Выполнить JavaScript» для выполнения сценария. Вставьте следующий скрипт в окно «Запись кода JavaScript»:

  • Спрятать поле имя. Используйте действие «Запуск шкалы времени», чтобы скрыть шкалу времени текстовых полей.
  • Показать Сообщение Правильно, если общее число баллов 8.
  • Показать группу звезд, если общее количество баллов равно 8.

Чтобы последние два действия произошли правильно, добавьте к ним условие (общее число равно 8).

Чтобы добавить условие, нажмите кнопку «Добавить условие» в записи действия. В появившемся диалоговом окне определите информацию, в которой apQuizScore является системной переменной, возвращающей общий балл, полученный пользователями.

Событие «Если неправильно»

Если ответ неверен, появляется сообщение «Неправильно», позволяя пользователям узнать, что они должны попробовать еще раз. Условие не требуется, просто добавьте действие «Показать объект» и выберите объект Сообщение Неправильно.

Создание кнопки «Помощь»

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

Шаг 1: создание кнопки «Помощь» и поясняющей информации

Сначала вставьте кнопку (вкладка «Взаимодействия» > «Кнопка»), измените ее заливку (без заливки) и линию (без линии), затем введите текст («Помощь») внутри нее. Поместите ее в угол слайда.

Затем создайте поясняющую информацию: вставьте фигуру, настройте ее так, как вам нравится, и введите текст.

Затем создайте значок закрытия: этот значок на самом деле является кнопкой, поэтому вставьте кнопку и заполните ее изображением красного крестика (панель «Свойства» > вкладка «Стили и эффекты» > «Заливка» > «Заливка изображением»).

Сгруппируйте поясняющую информацию и значок закрытия в одну группу (щелкните их правой кнопкой мыши > «Группировать»). Переименуйте группу (Группа Помощь) и поместите ее в правом нижнем углу слайда. Объекты в одной группе могут быть скрыты вместе одним действием.

Наконец, пусть группа имеет изначально скрытое состояние, чтобы скрыть ее, пока пользователи не нажмут кнопку «Помощь».

Шаг 2: заставьте кнопку «Помощь» работать, добавив события и действия

Необходимо добавить события и действия к кнопке «Помощь» и значку закрытия.

Для кнопки «Помощь» добавьте событие «По щелчку» и добавьте два действия. Один из них – воспроизведение короткого звука, другой – отображение группового объекта Группа Помощь.

Значок закрытия также требует события «По щелчку» и двух действий. Одно из них – воспроизведение звука, а другое – скрытие группового объекта Группа Помощь.

Экспорт игрового проекта

После завершения создания проекта экспортируйте его в формат HTML5.

Не забудьте выбрать режим «Обучение», «Практика» или «Тест». Не выбирайте режим «Демонстрация», так как он не позволяет взаимодействовать между пользователями и игровым контентом. Другими словами, демонстрационный режим делает игру доступной только для просмотра.

Совет: перед экспортом проекта доступен предварительный просмотр в веб-браузере. Просто нажмите кнопку «Предпросмотр HTML5» на вкладке «Главная» или «Экспорт».

Вот и все о создании кроссворда «Названия фруктов» с помощью ActivePresenter 7. Используйте это руководство, чтобы создать игру и пойти дальше в игровой индустрии электронного обучения.


Создание электронной интерактивной игры «Овощи»
Обзор форматов экспорта ActivePresenter

Читайте также:

 

Комментарии

Нет комментариев. Будь первым, кто оставит комментарий.
Уже зарегистрированы? Войти на сайт
Гость
17.06.2019