Простая игра на 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

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

Можете оставить комментарий, можете не оставлять, в общем развлекайтесь как хотите

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

* Ваше имя:

Ваш e-mail:

*