Игра головоломка на JavaScript!



Всем привет! В этом уроке я покажу, как можно создать игру головоломку на javascript!

Игра головоломка на JavaScript!

 

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

Итак, давайте начнем!

 

Описание игры

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

Чтобы все стало понятно, давайте рассмотрим просто пример на картинке:

Игровой интерфейс

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

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

4 9 / 7 = 7

То есть необходимо вставить 9 и 7 соответственно порядку полей. Если ввести неправильно, то ничего не произойдет.



На самом деле, бывает, что головоломку можно решить несколькими способами, давайте рассмотрим такой пример:

1 ? ? 2 = 9

её можно решить, как:

1 8 / 2 = 9

или

1 1 - 2 = 9

И то, и то будет правильно.

Никаких кнопок нет, все предельно просто, заполняешь поля правильно – переходишь к следующему уровню, заполняешь неправильно – остаешься на месте и думаешь над головоломкой.

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

 

Реализация

Реализовать подобную игру довольно таки несложно. Какие элементы игры нам понадобятся? А понадобятся нам 6 текстовых полей (input) и 1 блок, в который мы будет выводить номер текущего уровня, а также информацию о том, что игрок прошел все уровни и победил.

Давайте рассмотрим HTML верстку:

	<div id="wrap">
		<input class="num" maxlength="1" id="n1">
		<input class="num" maxlength="1" id="n2">
		<input class="num" maxlength="1" id="n3">
		<input class="num" maxlength="1" id="n4">
		<input disabled="disabled" value="=">
		<input class="num" maxlength="1" id="n5">
	</div>
	<div id="level">Уровень: 1</div>

Как видите, у нас есть общий блок с id wrap, в котором и находятся 6 полей. При этом, 5 из 6 полей имеют класс “num” – это необходимо для того, чтобы отличить те поля, которые можно задействовать в игровом процессе от поля, в котором всегда находится знак “=” (равно).

Также, у полей есть такой атрибут, как “maxlength”, он равен 1 и необходим для того, чтобы ограничить количество вводимых символов в поле, то есть в одно поле можно ввести только 1 знак.

После блока с идентификатором “wrap” идет div с id level – в нем будет выводиться информация о текущем уровне, а также о победе игрока. По умолчанию задан первый уровень.

Теперь давайте рассмотрим CSS стили:

#wrap{
    width: 924px;
	height: 150px;
    margin: 0 auto;
}
#wrap input{
    width: 150px;
    height: 150px;
    float: left;
    font-size: 100px;
	text-align: center;
}
#level{
    background: #3c8fb7;
    width: 200px;
    text-align: center;
    margin: 40px auto;
    color: #fff;
    font-size: 26px;
    padding: 6px;
    cursor: default;
}
  • #wrap – стили для общего блока с полями, блоку задана ширина (с учетом рамки каждого из полей), высота, а также, блок выровнен по центру;
  • #wrap input – стили для всех текстовых полей;
  • #level – стили для блока, в котором выводится информация о текущем уровне.

Итак, осталось самое интересное! Давайте рассмотрим и разберем JavaScript (JQuery) код:

$(document).ready(function(){

	var level = 1;
	var maxLevel = 5;
	var n1 = $('#n1');
	var n2 = $('#n2');
	var n3 = $('#n3');
	var n4 = $('#n4');
	var n5 = $('#n5');

	n2.val(4).attr('disabled','disabled');
	n3.val('-').attr('disabled','disabled');
	n4.val(9).attr('disabled','disabled');
	n5.val(5).attr('disabled','disabled');	

	$('#wrap .num').keyup(function (){

		if( eval( n1.val() + n2.val() + n3.val() + n4.val() + '==' + n5.val() ) && n1.val() != '' && n2.val() != '' && n3.val() != '' && n4.val() != '' && n5.val() != '' ){

			level++;

			if( level > maxLevel){
				$('#level').text('Игра окончена, вы победили!');
			}else{

				$('#level').text('Уровень: ' + level);

				if( level == 2 ){
					$('#wrap .num').removeAttr('disabled').val('');
					n1.val(4).attr('disabled','disabled');
					n2.val(5).attr('disabled','disabled');
					n5.val(5).attr('disabled','disabled');
				}
				if( level == 3 ){
					$('#wrap .num').removeAttr('disabled').val('');
					n1.val(4).attr('disabled','disabled');
					n3.val('/').attr('disabled','disabled');
					n5.val(7).attr('disabled','disabled');
				}
				if( level == 4 ){
					$('#wrap .num').removeAttr('disabled').val('');
					n1.val(1).attr('disabled','disabled');
					n4.val(2).attr('disabled','disabled');
					n5.val(9).attr('disabled','disabled');
				}
				if( level == 5 ){
					$('#wrap .num').removeAttr('disabled').val('');
					n4.val(9).attr('disabled','disabled');
					n5.val(9).attr('disabled','disabled');
				}
			}
		}
	});
});

Сначала мы объявляем переменные:

  • level – будет хранить текущий уровень;
  • maxLevel – переменная хранит максимальное количество уровней и пригодится нам на этапе определения того, что игрок прошел все уровни;
  • n1 – n5 – переменные для удобного обращения к текстовым полям в дальнейшем.

Далее идут 4 строчки, которыми мы задаем условия для первого уровня:

	n2.val(4).attr('disabled','disabled');
	n3.val('-').attr('disabled','disabled');
	n4.val(9).attr('disabled','disabled');
	n5.val(5).attr('disabled','disabled');

Пример таков:

Первая клетка пустая 4 - 9 = 5

или по-другому:

? 4 - 9 = 5

Например, n2.val(4) означает, что вторую слева клетку мы заполняем четверкой (напомню, клетка со знаком “=” не учитывается), а .attr(‘disabled’,’disabled’) означает, что клетка является неактивной (недоступна для редактирования).

Внимание: числа можно писать без кавычек, а вот все остальные символы необходимо обрамлять кавычками (одинарными или двойными), например:

n3.val('/')

или

n5.val("-")

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

Здесь мы проверяем равенство левой части (все что до “=”) правой (с помощью функции eval), а также проверяем поля на пустоту, то есть данное условие будет выполнено только тогда, кода все поля, которые можно заполнить, будут заполнены, а также равенство будет верным.

Если это условие сработало, значит игрок дал верный ответ и можно увеличить уровень на единицу операцией level++.

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

Также, стоит сказать о строке кода:

$('#wrap .num').removeAttr('disabled').val('');

Данной строкой мы делаем все 5 полей (которые можно использовать для заполнения) активными, а также очищаем их содержимое.

Для первого уровня мы такое не делали, так как вначале у нас все поля пустые и активные.

Вот, в принципе и все! Ничего сложного нет.

Для добавления бо́льшего количества уровней просто измените число в переменной maxLevel, а также, в обработку полей, добавьте конструкцию кода вида:

if( level == Номер уровня ){
Правила для уровня;
}

О том, как составлять правила (заполнять поля), я говорил выше.

Теперь можете посмотреть реальный пример игры головоломки, а также скачать её к себе на компьютер (всего 1 файл!).

На этом у меня всё, желаю вам удачи, пока!



Похожие публикации:

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>