Приветствую вас дорогой читатель! В этом уроке я расскажу, как создать игру – словодел на javascript!
Все вы, наверняка, когда-нибудь играли или сталкивались с этой игрой, если вы слышите о ней впервые, то напомню смысл игры.
Перед вами квадратная игровая панель в клеточку, каждая клетка содержит какую-нибудь букву. Вам необходимо составлять слова из имеющихся букв так, чтобы слово составляло прямую линию (по горизонтали или вертикали), либо ломанную.
Нельзя, чтобы слово (или часть слова) было составлено по диагонали.
Интерфейс и логика
Интерфейс игры будет состоять из левой и центральной колонок. В левой колонке мы будем выводить информацию о неправильном ответе или о победе, а также, будем выводить список найденных слов.
Пример левой колонки:
В центральной колонке расположим текстовое поле, в котором и будет формироваться слово, кнопку для проверки найденного слова и, конечно же, игровое поле 4 на 4 клетки с буквами.
Угадывать слова можно как нажимая последовательно на буквы, так и введя с клавиатуры нужное слово в текстовое поле.
Центральная колонка выглядит так:
Теперь давайте подробно рассмотрим, как реализована данная игра!
Реализация
Итак, как и во всех уроках, рассмотрим верстку, стили и программный код, после каждой из этих частей будет описание основных моментов.
HTML верстка
<div class="column">
<div id="error"></div>
<div id="words">Найденные слова:</div>
</div>
<div id="result">
<input>
<button class="oganesyan">Проверить</button>
</div>
<div class="slovodel">
<div>А</div>
<div>Г</div>
<div>Р</div>
<div>А</div>
<div>Н</div>
<div>О</div>
<div>С</div>
<div>Б</div>
<div>Т</div>
<div>А</div>
<div>Т</div>
<div>О</div>
<div>Е</div>
<div>Н</div>
<div>Ь</div>
<div>Н</div>
</div>
Блок с классом column – это левая колонка, в ней мы разместили еще два блока с идентификаторами error и words.
В блоке error будет выводиться текст ошибки, если пользователь составил слово, которое уже было найдено, либо слово, которого нет. Также, в этом блоке будет выведена фраза о победе, когда игрок отгадает (найдет) все слова.
В блоке words будут выводиться все найденные слова.
В блоке с id result находится текстовое поле и кнопка. В поле будет вводиться слово, а по клику на кнопку, это слово будет проверяться.
В блоке с классом slovodel расположены 16 div блоков с буквами, каждый из блоков представляет собой клетку.
Теперь давайте рассмотрим код, отвечающий за внешний вид игры.
CSS стили
.slovodel{
width: 288px;
height: 310px;
margin: 0 auto;
}
.slovodel div{
width: 70px;
height: 70px;
border: 1px solid #ccc;
cursor: pointer;
float: left;
text-align: center;
line-height: 70px;
font-size: 40px;
}
.column{
float: left;
margin-left: 10%;
}
#result input{
border: 0;
border-bottom: 1px solid #ccc;
text-transform: uppercase;
}
#result,#error,#words{
margin: 20px auto;
display: block;
width: 320px;
text-transform: uppercase;
}
Здесь стоит сказать про следующие стили:
- .slovodel – стили для игрового поля (квадрата 4 на 4 клетки);
- .slovodel div – стили клетки;
- #result input – стили текстового поля, куда вводится слово.
Теперь давайте перейдем к основному – логике нашей игры!
Javascript (JQuery)
Логика игры заключается в том, что у нас имеется список заранее подготовленных слов (массив), которые можно найти на имеющейся игровой панели.
Когда пользователь вводит слово и нажимаем на кнопку проверки, мы проверяем это слово и смотрим, есть ли оно в нашем списке. Если нет, то выводим ошибку, если есть, то добавляем это слово в колонку найденных слов и удаляем его из нашего списка (из массива), чтобы игрок не мог отгадать одно и то же слово несколько раз.
Это было краткое описание алгоритма, теперь давайте рассмотрим непосредственно код:
Сначала идет функция in_array, в которую мы передаем введенное пользователем слово, и также массив, в котором будет искать это слово.
В цикле for проходим по всем элементом массива и, если в массиве имеется строка, совпадающая с введенным словом, то удаляем это слово из массива и возвращаем истину.
Если слова (строки) в массиве нет, то возвращаем ложь.
Далее идет массив word_array, в котором перечислены все слова, которые только можно найти на нашей заранее подготовленной игровой доске (картинка с конкретными буквами имеется выше).
После инициализации массива идет обработка клика на клетка (на букву). Здесь мы очищаем блок с текстом об ошибке, а также, добавляем введенную букву в текстовое поле.
Ну и последним шагом мы проверяем введенное в поле слово. Здесь все просто – если введенное слово имеется в списке (если in_array возвращает истину), то добавляем введенное слово в список найденных слов (в левую колонку).
Также, проверяем массив на пустоту – если он пуст, значит, найдены все слова и игрок победил.
Если игрок ввел неверное слово, то выводим ошибку в виде текста, о том, что такого слова нет, либо оно уже было найдено.
После каждого нажатия на кнопку проверки, вне зависимости от введенного слова, очищаем текстовое поле.
Как видите, ничего сложного нет.
Данный урок опубликован для понимания того, как это можно сделать. Исходную игру можно улучшить, например, создав двумерный массив, чтобы можно было хранить ответы для нескольких игровых полей, то есть можно составить соответствие элемента двумерного массива с игровым полем.
Если вы просто хотите изменить данный пример, то все что вам нужно сделать – это изменить буквы в клеточках и слова в массиве word_array, больше ничего изменять не нужно!
Вот так выглядит реализованная игра, исходный файл которой вы можете скачать.
Demo пример
Скачать исходник
Надеюсь, данный урок по javascript будет для вас полезен, на этом все, желаю удачи, пока!
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.