Приветствию вас читатели! В этом выпуске я решил показать создание ну уж очень простецкой игры на javascript .
В прошлой своей статье о том, как сделать progress bar на JavaScript, я сказал, что покажу использование прогресс бара на реальном примере, а именно в небольшой игрушке.
Смысл этой игры состоит в разрушении стены, то есть перед вами есть стена, а вы должны её разрушить.
Нажимая на стену, можно заметить как она, якобы, разрушается, а за ней появляется картина природы.
Под картинкой имеется полоса, так называемой, жизни (состояния) стены – данная полоса уменьшается при каждом клике.
Далее мы рассмотрим код и обговорим некоторые моменты..
Итак , скажу сразу, что выкладывать код всего скрипта я не буду, так как плагин, который выводит программный код (как в редакторе), может слегка притормаживать, что влияет на скорость загрузки всей страницы, представлю только небольшие, так скажем, порции кода, а весь код полностью вы сможете скачать в конце поста.
В начале описаны следующие глобальные переменные:
- window.life = 100; //Жизнь стены
- window.state = 0; //Номер текущего состояния
- 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)
- После первых пяти (5) кликов меняет состояние стены (меняет картинку)
- Каждые десять (10) кликов меняет картинку
- Если жизней нуль (life == 0), то игра закончена
Параметр функции num отвечает за действие, если 1 – мы нажали на стену, 0 – мы захотели начать игру сначала.
Ну вот и все, вот наглядный пример и исходный код этого примера..
Demo Вариант игры
Скачать пример
На этом всё, пока.
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.