Простая игра на javascript – “Сломай стену”

Игра на javascript - простая и веселая

Приветствию вас читатели! В этом выпуске я решил показать создание ну уж очень простецкой игры на javascript .

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

Смысл этой игры состоит в разрушении стены, то есть перед вами есть стена, а вы должны её разрушить.

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

Под картинкой имеется полоса, так называемой, жизни (состояния) стены – данная полоса уменьшается при каждом клике.

Далее мы рассмотрим код и обговорим некоторые моменты..

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

В начале описаны следующие глобальные переменные:

  1. window.life = 100;   //Жизнь стены
  2. window.state = 0;   //Номер текущего состояния
  3. window.break_w = 0;   //Счетчик для определения момента смены картинки

wall_state – это массив, который содержит ссылки на все картинки, а картинки в свою очередь представляют разные состояния стены – всего около десяти (10) состояний.

function breakWall(num){

		//Если нажать на стену
	if(num == 1){		
	
			//Если стена разрушена
		if(life == 0){
			alert('Вы разрушили стену!');
			document.getElementById('bar').style.display = 'none';
			document.getElementById('return').style.display = 'block';
		}	
		
		else{
			life--;
			polosa.width -=4;
			break_w++;
			
			if(break_w == 5){
				state++;
				document.getElementById('image').src = wall_state[state];
				break_w = -5;
				
			}
		}
		
	}
	
		//Начать заново
	if(num == 0){
		life = 100;
		polosa.width = 400;
		break_w = 0;
		state = 0;
		document.getElementById('image').src = wall_state[state];
		document.getElementById('return').style.display = 'none';
		document.getElementById('bar').style.display = 'block';
		
	
	}
}

breakWall(num) – это единственная и основная функция и вот что она делает:

  1. При каждом клике уменьшает жизнь стены на один (-1)
  2. После первых пяти (5) кликов меняет состояние стены (меняет картинку)
  3. Каждые десять (10) кликов меняет картинку
  4. Если жизней нуль (life == 0), то игра закончена

Параметр функции num отвечает за действие, если 1 – мы нажали на стену, 0 – мы захотели начать игру сначала.

Ну вот и все, вот наглядный пример и исходный код этого примера..

Demo Вариант игры

Скачать пример

На этом всё, пока.


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

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

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

*

code

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