Выполнить по образцу.

В панели элементов щелкнуть один раз левой кнопкой мыши на компоненте textBox, потом щелкнуть один раз левой кнопкой мыши на форме:

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

Справа стали доступны настройки свойств для этого компонента (если окна свойств нет, то нужно нажать на клавиатуре клавишу F4). Если одним щелчком левой кнопкой мыши выбрать форму или любой другой компонент на форме, то станут доступны настройки для свойств выбранного компонента:

 3

Компонент textBox позволяет пользователю вводить текст и обеспечивает редактирование нескольких строк и маскирование символов пароля. Например, чтобы замаскировать ввод пароля, нужно для свойства PasswordChar компонента textBox прописать * или любой другой символ (компоненты – это объекты, поэтому их имена с маленькой буквы, а свойства компонентов – это свойства класса, к которым относятся эти компоненты, поэтому имена свойств – с большой буквы).

На вкладке свойств выбранного компонента нужно переключиться в раздел Поведение. Далее нужно найти PasswordChar и справа прописать символ звездочки (или любой другой символ):

Нажать F5, чтобы запустить отладку. Попробовать ввести символы в поле ввода и убедиться, что в нем появляются выбранные символы:

Далее: очистите свойство PasswordChar для компонента textBox (удалите *). Добавьте еще один textBox и кнопку (компонент button (при щелчке возникает событие)):

Измените значение свойства Text у компонента button (для этого нужно одним щелчком левой кнопкой мыши выделить кнопку и найти справа его свойство Text):

Измените значения свойства Text у компонентов textBox1, textBox2 и Form1, чтобы получилось следующее:

Для textBox2 в разделе Behavior (Поведение) свойств компонента установите для свойства ReadOnly значение true, чтобы пользователь не мог в это поле ничего писать:

Обратите внимание на изменение цвета этого компонента.

Не забывайте иногда нажимать Ctrl+Shift+S, чтобы сохранять проект.

Нажмите F5, чтобы запустить отладку. Протестируйте работу приложения: во второе текстовое поле невозможно что-либо ввести. Кнопка не реагирует на нажатие. Клавиша Enter тоже не выполняет никаких действий:

Закрыть окно приложения “Копирование” с помощью

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

1 способ: один клик левой кнопкой мыши на button1. В окне свойств кнопки выбрать раздел “События”

затем дважды кликнуть левой кнопкой мыши на событии Click:

2 способ: дважды кликнуть левой кнопкой мыши на расположенной на форме кнопке.

При установке события Click экран в Visual Studio переключается в режим Code, и создается новый метод:

Этому методу присваивается имя button1_Click(). Задача этого приложения в том, чтобы при щелчке на “я кнопка”, этот метод перемещал текст из верхнего поля в нижнее.

Поскольку для текста элемента управления необходимо ясно отображать его цели, обязательно следует переименовать метод из button1_Click в, например, CopyClick. Но ручное изменение названия метода приведет к потере ссылки на метод где-нибудь в коде, который был сгенерирован Visual Studio. Поэтому для выполнения модификаций кода используется меню Refactor. щелкните правй кнопкой мыши на button1_Click в окне кода, выберите “Переименовать”.

Появится окно следующего вида:

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

Только после этого нажать “Применить”.

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

Добавить к методу CopyClick следующую строку:

В процессе ввода текста программы включается функция автозавершения, которую нужно обязательно привыкать использовать. Если список автозавершения не появляется, можно нажать Ctrl+Space.

Нажать F5 для запуска отладки.

Ввести текст в верхнем текстовом поле и попробовать нажать Enter.

Копирование производится пока что только с помощью щелчка левой кнопкой мыши на кнопке.

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

перейти к свойствам и указать, что при нажатии пользователем клавиши Enter должна реагировать кнопка button1:

F5.

Ввести текст в верхнем текстовом поле и нажать Enter. Теперь получится:

1. Выполнить по образцу.

Создать новый проект Windows Forms, просто кликнув на кнопку

в главном меню. Внимательно выбрать тип проекта:

Расположить следующие компоненты на форме:

• Для Form1 установить значение свойства Text “Приветствие”.
• Для компонента label1 установить значение свойства Text “Введите Ваше имя”.
• Для компонента label2 очистить свойство Text.
• Для компонента button1 установить значение свойства Text “OK”.

Результат:

Вызвать обработчик события button1_Click. Правой кнопкой мыши на названии метода button1_Click и переименовать в “Hi”, написать тело метода:

2. Написать следующее приложение, используя настройки свойств компонентов:

На этапе конструирования формы установить для свойства visible компонента label4 значение false.

Изменить название метода button1_Click.

Для изменения фона формы нужно изменить свойство формы BackgroundImage.

Чтобы добавить картинку, нужно поместить на форму компонент PictureBox, щелкнуть правой кнопкой мыши на нем и “Выбрать изображение…”.

Программа должна реагировать на нажатие кнопки OK следующим образом:

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

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

1. Геймдизайнер досконально описывает необходимый функционал;
2. Дизайнер интерфейсов создает заготовку интерфейса в соответствии с полученным описанием;
3. Художник по интерфейсам занимается прорисовкой мелких деталей, оформляет игровые окна, кнопки и иные элементов по разработанным макетам.

Создание качественного игрового интерфейса требует соблюдения ряда психологических и фундаментальных (логических) принципов. Первые связаны с умственной работой и зрительным восприятием информации, а вторые отвечают за логичность структуры UI игры.

К числу психологических принципов относятся:

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

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

• не загромождать экран большим количеством различных элементов (кнопок, картинок, чек-боксов). Сложность механики игры не должна негативно отражаться на структурированности информации в интерфейсе;
• все элементы интерфейса должны быть единообразными — это позволит пользователю сократить время на выполнение игровой задачи и не совершать ошибок;
• игра должна поддерживать обратную связь с игроком через интерфейс, поэтому для объяснения временной недоступности того или иного элемента на экране должны отображаться подсказки;
• интерфейс должен содержать минимум текстовых фрагментов. Их стоит заменить иконками или пиктограммами (с поправкой на необходимость локализации игры). Подача информации должна быть привлекательной для игрока;
• избыточные элементы в оформлении интерфейса не должны уменьшать его функциональность и эргономичность, а также не должны увеличивать общий вес игры;
• следует расставлять акценты (выделение цветом, размером, анимацией) на важных для игрока элементах интерфейса.

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

Основные рекомендации по ползункам:

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

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

Основные рекомендации по их применению:

• Следует связать видимый UI с невидимым UI при помощи анимаций: в момент открытия всплывающего окна, вызванного нажатием пользователя на интерактивный элемент/кнопку, анимировать запуск окна из вызывающей его кнопки (например увеличивать всплывающее окно магазина из кнопки магазина, а при закрытии сворачивать окно магазина в кнопку). Благодаря этому пользователи будут лучше ассоциировать всплывающие окна с их инициаторами.
• Подложить под всплывающие окна полупрозрачный затемнённый фон: так как они часто требуют действий пользователя и могут занимать большую часть экрана, это должно помочь пользователям понять, что игровая сессия приостановлена, но в неё всё равно можно вернуться. Всплывающие окна должны быть расположены поверх затемнённого фона, чтобы пользователи могли видеть часть сессии под ним (затемнённый фон должен анимироваться постепенным появлением параллельно с открытием всплывающего окна и постепенным исчезновением параллельно с анимацией закрытия).

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

В игре "Подбери пару" игрок открывает один скрытый значок, а затем второй. Если значки совпадают, они остаются видимыми. Если нет, оба значка снова скрываются:

Выполнить по образцу.

Запустите Visual Studio, выберите Создание проекта, выберите язык C#, найдите Приложение Windows Forms (.NET Framework), нажмите Далее:

Откроется:

Создание макета

В этой части мы определим сетку для игры 4x4.

Обратите внимание: в заголовке формы написано Form1

А нам надо, чтобы там было название игры.

Нужно перейти к свойствам формы (справа), найти среди них свойство Text и вписать вместо Form1 – Подбери пару, затем нажать клавишу Enter:

Получится:

Слева находится Панель элементов:

Нужно найти в ней элемент управления

И мышкой перетащить его на форму

Получится:

Далее нужно перейти в окно настройки свойств – справа.

В верхней части окна свойств убедитесь, что у вас выбран именно этот компонент:

Раскройте с помощью кнопки

список значений для свойства BackColor:

Перейдите на вкладку Интернет и выберите цвет DarkSeaGreen:

Далее найдите свойство Dock, щелкните справа от него и выберите средний вариант – большой прямоугольник в центре:

Получится:

Найдите свойство CellBorderStyle, щелкните справа от него и выберите Inset:

Получится:

В правом верхнем углу нашей формы есть малюсенькая кнопочка в форме треугольника

Нужно на нее щелкнуть один раз и потом щелкнуть два раза на Добавить строку.

Потом тоже два раза щелкнуть на Добавить столбец.

Получится:

Далее нужно щелкнуть правой кнопкой мышки на первом столбце. Откроется меню.

Нужно выбрать пункт Правка строк и столбцов

Откроется такое окно:

Здесь для каждого столбца нужно выбрать Процент и прописать с клавиатуры значение 25:

Затем в этом же окне выбрать Показать: Строки

Теперь для каждой строки нужно выбрать Процент и так же прописать с клавиатуры значение 25:

Нажать ОК. Получится:

Элемент управления TableLayoutPanel теперь представляет собой сетку "четыре на четыре" с 16 квадратными ячейками одинакового размера. Эти строки и столбцы задают места, в которых позже появятся значки.

Добавление и форматирование меток для отображения

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

Слева в панели элементов найдите Label и мышкой перетащите его в самую первую ячейку:

Получится:

Убедитесь, что у вас справа в свойствах отображается настройка свойств именно для label1:

Убедитесь, что в свойстве BackColor установлен цвет DarkSeaGreen. Если нет, то установите его так же, как вы это делали для формы ранее.

Далее там же найдите (в разделе Макет) свойство AutoSize, раскройте справа список и выберите False:

Далее там же чуть ниже найдите свойство Dock, раскройте список справа и выберите средний большой прямоугольник (это значение Fill):

Далее там же чуть выше найдите свойство TextAlign, раскройте список справа и выберите средний прямоугольник (это значение MiddleCenter):

Далее там же чуть выше найдите Font, щелкните на плюс - раскроется список.

Справа от Font щелкните на многоточие

Откроется окно, выполните следующую настройку трех параметров и нажмите ОК:

Далее там же справа в окне свойств найдите Text, впишите туда английскую букву e (или любую другую):

Получится:

Щелкните правой кнопкой мышки на квадрате и выберите Копировать. Или просто щелкните на квадрат и нажмите на клавиатуре Ctrl+C.

Затем нажимайте Ctrl+V 15 раз, чтобы заполнить квадратами все ячейки.

Макет готов. Получится:

Добавление значков

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

Вам понадобится использовать два оператора new для создания двух объектов. Первый – это объект класса Random, который случайным образом выбирает ячейки в элементе управления TableLayoutPanel. Второй объект является объектом List. В нем хранятся случайно выбранные символы.

Нажмите F7. В новой вкладке откроется окно редактора исходного кода:

Добавьте следующий фрагмент:

Объекты List можно использовать для отслеживания элементов различных типов. Список может содержать числа, значения true или false, текст и другие объекты. В игре "Подбери пару" объект list содержит 16 строк, по одной для каждой ячейки на панели TableLayoutPanel. Каждая строка представляет собой одну букву, соответствующую значкам в метках. Эти символы отображаются в шрифте Webdings в виде различных псевдокартинок.

Назначение каждому элементу управления Label случайного значка

При каждом запуске программы значки назначаются элементам управления Label в форме случайным образом с помощью метода AssignIconsToSquares(). Этот код использует ключевое слово foreach.

Добавьте метод AssignIconsToSquares(). Получится:

Метод AssignIconsToSquares() выполняет итерацию каждого элемента управления label в TableLayoutPanel. Он выполняет одни и те же операторы для каждого из этих элементов управления. Эти операторы запрашивают случайные значки из списка.

• Первая строка преобразует переменную control в метку с именем iconLabel.
•  Вторая строка представляет собой оператор if, проверяющий и обеспечивающий успешное выполнение преобразования.
•  Первая строка в операторе if создает переменную с именем randomNumber, содержащую случайное число, соответствующее одному из элементов списка значков. Здесь используется обращение к методу Next() через объект random класса Random. Метод Next() возвращает случайное число. Эта строка также использует свойство Count списка значков для определения диапазона, из которого выбирается случайное число.
• В следующей строке один из элементов списка значков назначается свойству Text метки.
• Следующая строка скрывает значки – она их перекрашивает в цвет фона. Эта строка пока будет закомментирована, чтобы можно было проверить оставшуюся часть кода, прежде чем продолжить работу.
•  Последняя строка инструкции if удаляет из списка значок, добавленный в форму.

Добавьте вызов этого метода AssignIconsToSquares():

Получится:

Нажмите на клавиатуре F5.

Запустится приложение. Оно пока никак не работает, но уже отображает значки:

Нажмите на крестик, чтобы закрыть окно приложения.

Игрок не должен видеть значки сразу все открытыми. Поэтому дальше нужно перейти в редактор кода и убрать два слэша из строки 32 (у вас может быть другой номер строки). Получится:

Нажмите F5, чтобы снова запустить приложение. Видно, что теперь все значки “спрятались”:

Добавление обработчиков событий в метки

Перейдите на вкладку с формой. Щелкните на первом квадрате. Затем нажмите на клавиатуре клавишу Ctrl и, не отпуская ее, щелкните на каждый квадратик. В итоге у вас должны появиться маленькие метки. После этого отпускаете клавишу Ctrl, мышкой не щелкайте.

Получится:

Далее надо снова обратиться к разделу Свойства (справа). Нужно щелкнуть на изображении молнии.

Откроется список:

Нужно дважды щелкнуть справа от Click.

Получится:

Добавьте остальную часть кода:

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

Нажмите на крестик, чтобы закрыть окно приложения.

Добавление ссылок на элементы управления Label

Добавьте ссылки на метки. Должно получиться:

Эти операторы не приводят к отображению элементов управления Label на форме, поскольку вы не указываете ключевое слово new. Когда программа запускается, и firstClicked, и secondClicked имеют значение null.

Найдите эту строку в коде и удалите ее.

Вместо нее надо дописать другой код:

Нажмите F5. Кликайте на разных ячейках, чтобы увидеть, что получается: появится только первый открытый значок, остальные значки останутся невидимыми. Т.е. программа уже отслеживает первую метку, которую выбрал игрок. Поэтому ссылка firstClicked не равна null. Когда выражение if обнаруживает, что firstClicked не равна null, оно выполняет следующие инструкции.

Нажмите на крестик, чтобы закрыть окно приложения.

Добавление таймера

Вернитесь на вкладку конструктора формы. В панели элементов (слева) найдите Timer, щелкните на нем мышкой, затем щелкните или протяните мышкой на форме с квадратиками.

Внизу появится timer1, щелкните на нем один раз:

Справа в свойствах проверьте, что отображаются свойства именно для таймера:

Нажмите значок

Найдите свойство Interval и напишите там справа значение 750:

Слева внизу на форме (где располагается таймер) щелкните два раза на этом значке:

 Откроется метод, впишите код:

Обработчик события Tick выполняет три действия:

1. Останавливает таймер, вызывая метод Stop() через наш объект timer1.
2. Использует две ссылочные переменные firstClicked и secondClicked, чтобы снова сделать невидимыми значки двух меток, которые выбрал игрок.
3. Сбрасывает значения ссылочных переменных firstClicked и secondClicked на null.

Добавьте код в начало и конец метода:

и

Этот код проверяет, включен ли таймер, задает ссылочную переменную secondClicked и запускает таймер.

Теперь текст метода выглядит так:

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

Код в конце метода задает ссылочную переменную secondClicked для отслеживания второго элемента управления Label. И затем присваивает значку ярлыка черный цвет, чтобы сделать его видимым. Затем таймер запускается в однократном режиме, т.е. ожидает 750 миллисекунд, и после этого вызывает одно событие Tick. Обработчик события Tick таймера скрывает два значка и сбрасывает ссылочные переменные firstClicked и secondClicked. Теперь форма готова к тому, чтобы игрок выбрал другую пару значков.

Нажмите F5. Щелкните по ячейке, и значок станет видимым. А теперь щелкните на другой ячейке. Значок появиться на короткое время, а затем оба значка в любом случае исчезнут.

Теперь программа может отслеживать выбор первого и второго значков. А также использует таймер для приостановки перед исчезновением значков.

Отмена исчезновения совпавших пар значков

Если игрок подобрал пару, то игра должна перезагрузиться, чтобы больше не отслеживать метки, использующие ссылочные переменные firstClicked и secondClicked. Однако она не должна сбрасывать цвета для двух совпадающих меток. Эти метки должны и дальше отображаться.

Добавьте код:

Первый оператор if проверяет, совпадает ли значок в первой метке, которую выбрал игрок, со значком во второй метке. Если значки одинаковы, программа выполняет три оператора. Первые два оператора сбрасывают ссылочные переменные firstClicked и secondClicked. После этого они перестают отслеживать метки. Третий оператор – оператор return, который пропускает оставшиеся в методе операторы,  позволяя не выполнять их.

Нажмите F5. Если вы выбрали пару, которая не совпадает, произойдет событие таймера Tick, и оба значка исчезнут. Если выбрать совпадающую пару, будет выполнен оператор if. Оператор return заставляет метод пропустить код, который запускает таймер. При этом значки остаются видимыми.

Теперь программа почти готова. Осталось добавить сообщение о том, что игрок выиграл.

Проверка выигрыша

Добавьте код:

В этом методе используется еще один цикл foreach, чтобы пройти по каждой метке в TableLayoutPanel. Он проверяет цвет значка каждой метки, чтобы убедиться, что он совпадает с фоном. Если цвета совпадают, значок остается невидимым. В этом случае программа использует оператор return, чтобы пропустить оставшуюся часть метода.

Если цикл прошел через все метки без выполнения оператора return, значит всем значкам в форме была подобрана пара. Программа показывает MessageBox и вызывает метод Close(), чтобы закрыть окно приложения.

Убедитесь, что программа делает проверку на победу сразу после отображения второго значка. Найдите строку, где задается цвет второму значку, который был выбран, и напишите вызов метода CheckForWinner() сразу после этой строки.

Игровое приложение готово.

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

Пример:

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

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