Лопни шарики на время - игра на javascript - урок по программированию.

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

Как и в других играх на javascript, в конце урока имеются исходные файлы и demo пример!

Итак, сначала опишу, в чём суть игры!

Перед вами будут разноцветные шарики (трех цветов) и будет определенное время, за которое вам нужно выполнить задание! Задание будет примерно такого типа: “лопнуть 10 зеленых, 10 красных и 10 фиолетовых шариков за 30 секунд “.

Правила игры

Правила очень просты:

Нельзя лопать больше шариков, чем это установлено в задании, то есть если нужно лопнуть 10 красных шариков, то, лопнув, например, 11 шаров – вы проиграете.
Нужно уложиться в отведенное время.

Особенности игры

Давайте рассмотрим основные особенности игры, которые нам необходимо учесть при написании кода:

Шарики трех цветов – зеленые, красные и фиолетовые
Игра начинается по нажатию на кнопку – “Начать”
Проигрыш, если лопнуть больше, чем в задании
Проигрыш, если вышло время
Имеются уровни
Чем быстрее вы завершите предыдущий уровень, тем больше времени у вас будет в следующем (время сохраняется)
Каждый раз усложнять игру, добавляя больше шариков, но при этом и увеличивать время
Играть можно до бесконечности

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

<div class="wrap">
        
        <p id="start">Начать</p>
        <task>Задание: лопнуть 5 фиолетовых, 5 зеленых и 5 красных шариков!<br>Текущий уровень: 1</task>
        <time>Осталось секунд: 20</time>
        
        <div class="green"></div>
        <div class="green"></div>
        <div class="purple"></div>
        <div class="purple"></div>
        <div class="red"></div>
        <div class="red"></div>
        <div class="green"></div>
        <div class="red"></div>
        <div class="purple"></div>
        <div class="purple"></div>
        <div class="red"></div>
        <div class="purple"></div>
        <div class="red"></div>
        <div class="green"></div>
        <div class="purple"></div>
        <div class="purple"></div>
        <div class="red"></div>
        <div class="green"></div>
        <div class="red"></div>
        <div class="green"></div>
        <div class="green"></div>
        <div class="red"></div>
        <div class="purple"></div>
        <div class="red"></div>
        <div class="green"></div>
        <div class="purple"></div>
        <div class="purple"></div>
        <div class="purple"></div>
        <div class="red"></div>
        <div class="purple"></div>
        <div class="red"></div>
        <div class="green"></div>
        <div class="purple"></div>
        <div class="purple"></div>
        <div class="red"></div>
        <div class="purple"></div>
        <div class="red"></div>
        
</div>

У нас имеется обертка – “wrap”, в ней мы расположили кнопку старта игры, блок с заданием (task) и блок со временем (time).

Также, выведем блоки div (шары) у каждого из которых задан нужный класс, соответствующий определенному цвету.

CSS стили:

.wrap{
width: 900px;
margin: 0 auto;
background: #fff;
padding: 20px 0;
}

task,time{
display: none;
clear: both;
font-size: 20px;
color: #444;
padding: 10px 20px 30px 20px;
}

#start{
text-align: center;
color: #444;
font-size: 25px;
cursor: pointer;
}

.green,.purple,.red{
width: 100px;
height: 100px;
float: left;
background: url('/wp-content/uploads/green.jpg') no-repeat;
}

.purple{
background: url('/wp-content/uploads/purple.jpg') no-repeat;
}

.red{   
background: url('/wp-content/uploads/red.jpg') no-repeat;
}

Как видите, каждому классу прописан свой фон (картинка в той же директории, что и файлы стиля)..

Теперь давайте рассмотрим и разберем основные моменты JQuery кода:

$(document).ready(function(){
        
        window.green = 5;
        window.purple = 5;
        window.red = 5;
        window.time = 20;
        window.level = 1;
        window.factor = 10;

        function start(){
                
                $('.wrap div').each(function(){
                        
                        $(this).click(function(){

                                color = $(this).attr('class');
                                $(this).hide();
                                
                                if( color == 'green' ) green--;
                                if( color == 'purple' ) purple--;
                                if( color == 'red' ) red--;
                                
                                if( green == 0 && purple == 0 && red == 0 ){
                                        time += factor;
                                        green += factor;
                                        purple += factor;
                                        red += factor;
                                        factor += 2;
                                        level++;
                                        
                                        $('.wrap div').unbind('click');
                                        
                                        for (var i = 0; i < factor * 4; i++){
                                                
                                                var random = Math.round(Math.random() * (3 - 1) + 1);
                                                
                                                if( random == 1) color = 'green';
                                                if( random == 2) color = 'purple';
                                                if( random == 3) color = 'red';
                                                        
                                                $('.wrap').append('<div class="' + color + '"></div>');
                                        }
                                        
                                        start();
                                }
                                                        
                                if( green < 0 || purple < 0 || red < 0 ) time = 0;
                                $('task').html('Задание: лопнуть ' + purple + ' фиолетовых, ' + green + '  зеленых и ' + red + ' красных шариков!<br>Текущий уровень: ' + level);
                        });
                });
        }
        
    function sort_ball() { 
     selected = $('.wrap div');
                if( time > 0 ){
                        time--;
                        $('time').html('Осталось секунд: ' + time);
                }else $('time').html('Вы проиграли!');
    }
     
        $('#start').click(function(){
                $('task,time').css('display','block');
                $(this).hide();
                setInterval(sort_ball, 1000);
                start();
        });
});

Сначала мы описываем константы:

window.green (red,purple) – начальное количество зеленных (красных, фиолетовых) шаров, которые необходимо лопнуть
time = 20 – это количество секунд, которое отводится на выполнение задания на первом уровне сложности
window.level = 1 – соответственно отвечает за текущий уровень
window.factor = 10 – это коэффициент, который будет увеличивать сложность (увеличивать количество шаров, которые необходимо лопнуть), а также это число будем умножать на 4 и генерировать новые шарики.

Далее идет описание функции – start(), которую мы запускает после нажатия на соответствующую кнопку.
В ней мы проходим по всем div блокам (шарикам) и определяем лопнувшие шары, уменьшая их количество (скрывая).

Когда мы выполнили задание, происходит увеличение времени и шаров на значение коэффициента.

Также, мы увеличиваем само значение коэффициента на 2 и переходим на следующий уровень (level++).

После этого, с помощью функции unbind, мы снимаем обработку событий (клика мышью) со всех элементов – дивов, делаем это для того, чтобы при повторном пуске функции start и при генерации новых шаров, они (новые шары) попали в выборку.

Генерация новых элементов случайного (одного из 3) цвета происходит так: генерируем случайное число от 1 до 3 и в зависимости от этого выбираем цвет шара (каждая цифра соответствует своему цвету).

Функция sort_ball() срабатывает каждую секунду (благодаря установленному интервалу) и уменьшает оставшееся время на 1.

Если время больше 0, то выводим это время, иначе выводим сообщение о том, что игра проиграна.

Теперь вы можете посмотреть на реальный пример и скачать все исходные файлы!

На этом у меня, всё, до новых уроков, пока!

Demo пример

Скачать исходники

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.