Как создать игру на глазомер на javascript (jquery)?

Здравствуйте дорогие друзья! В этом уроке я покажу, как можно создать простенькую, но интересную игру, на глазомер!

Как и всегда, в конце данного урока по javascript можно будет скачать все исходные файлы (скрипты, стили, html страницу)!

Суть игры очень просто: перед вами будут появляться два квадрата разного цвета (не всегда разного), вам, на глаз, нужно определить какой из этих квадратов больше – они могут быть и одинакового размера!

Требования к игре

1. Должны генерироваться 2 квадрата случайного размера и случайного цвета
2. Ответ осуществляется нажатием на одну из 3 кнопок
3. Должно подсчитываться и выводиться на экран – количество правильных и  неправильных ответов

Из чего будет состоять интерфейс игры?

1. Два квадрата
2. Три кнопки для ответа
3. Две строки с результатами ответов

Рассмотрим HTML код:

<div class="wrap">

        <h2>Какой квадрат больше?</h2>
        
        <div id="one">1</div>
        <div id="two">2</div>
        
        
        <div id="interface">
                <p square=1 class="myButton">1 квадрат</p>
                <p square=2 class="myButton">2 квадрат</p>
                <p square=3 class="myButton">Равны</p>
                <div id="plus">Правильных ответов: 0</div>
                <div id="minus">Неправильных ответов: 0</div>
        </div>
        
</div>

Имеется 2 div блока (квадраты), в области интерфейса 3 тега – “P” (3 кнопки), и два дива – это результаты.

Рассмотрим CSS код:

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

.wrap h2{
text-align: center;
color: #444;
padding-bottom: 20px;
}

#one,#two{
font-size: 20px;
padding: 10px 0 0 10px;
color: #fff;
position: absolute;
margin: 0 0 20px 220px;
}

#two{
margin: 0 0 20px 600px;
}

#interface{
margin: 200px 0 0 300px;
display: block;
font-size: 20px;
color: #444;
}

Рассмотрим и разберем JQuery код:

$(document).ready(function(){
        
        window.one = $('#one');
        window.two = $('#two');
        
        window.plus = 0;
        window.minus = 0;
        
        window.random_one = Math.round(Math.random() * (110 - 100) + 100);
        window.random_two = Math.round(Math.random() * (110 - 100) + 100);

        one.css({'width':random_one,'height':random_one,'background':'#' + random_one});
        two.css({'width':random_two,'height':random_two,'background':'#' + random_two});
        
        $('#interface p').each(function(){
                
                $(this).click(function(){

                        if( ( $(this).attr('square') == 1 && random_one > random_two ) || ($(this).attr('square') == 2 && random_two > random_one) || ($(this).attr('square') == 3 && random_one == random_two) ){
                                plus++;
                                $('#plus').text('Правильных ответов: ' + plus);
                        }else{
                                minus++;
                                $('#minus').text('Неправильных ответов: ' + minus);
                        }
                
                        random_one = Math.round(Math.random() * (110 - 100) + 100);
                        random_two = Math.round(Math.random() * (110 - 100) + 100);

                        one.css({'width':random_one,'height':random_one,'background':'#' + random_one});
                        two.css({'width':random_two,'height':random_two,'background':'#' + random_two});                
                });

        });
        
});

Сначала мы объявляем нужные константы :

• 2 квадрата (one и two)
• Две константы для подсчета верных и неверных ответов (plus и minus соответственно)
• 2 случайных числа в диапазоне от 100 до 110

Каждое из 2 случайных чисел одновременно будет и высотой, и шириной, и цветом наших квадратов!

Максимально возможная разница между двумя квадратами равна 10px, если хотите усложнить игру, то можно уменьшить, например, до 5 пикселей и тогда на глаз определить большую фигуру будет намного сложнее.

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

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

Теперь вы можете взглянуть на demo пример и скачать все файлы этого урока! На этом у меня всё, до новых публикаций, пока!

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