Простая игра на 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 Вариант игры  Скачать пример

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


Раздел: Программирование

Дата последнего изменения: 2019-01-17 09:03:46

Просмотров: 12929

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

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Видео галерея на JavaScript!
Падающий мяч на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript

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

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*