Приветствую вас друзья! В этом небольшом уроке я покажу, как можно сделать примитивную игру на javascript!
В предыдущей статье о летающем объекте я сказал, что покажу процесс создания игры на ловкость, сказал – делаю.
В конце статьи имеется пример и исходные файлы урока!
Как-то давненько делал подобие игры, в которой нужно разрушить стену, тоже можно почитать.
Сегодняшняя игра будет совсем простая! Немного опишу её.
Перед нами будет иметься прямоугольная область, и в ней будет летать птица (орел), которую нельзя задевать мышкой – рассмотрим все правила игры:
- У нас имеется ограниченное количество жизней
- Время пойдет (начнется игра) только тогда, когда мы наведем мышку на игровую область
- Птица может летать где угодно
- Каждое касание птицы – минус одна жизнь
- Каждый выход за пределы – минус две жизни
На экран у нас будет выводиться оставшееся количество жизней (по умолчанию их 10), а также время в секундах, смысл игры – продержаться как можно дольше!
Итак, давайте взглянем на HTML код:
<div class="wrap">
<img id="fly_object" src="fly_object.jpg">
</div>
<div id="result"></div>
<div id="time">Секунд: 0</div>
У нас имеется игровая область – “wrap”, а в ней картинка с id – “fly_object” – наша птичка!
Ниже идут два блока:
- В “result” сначала выводим количество оставшихся жизней, а когда проигрываем, то выводим соответствующий текст, а также время
- В “time” мы выводим идущее время (в секундах)
CSS стили:
.wrap{
width: 500px;
height: 500px;
margin: 0 auto;
background: #fff;
padding: 20px;
border: 6px dashed #ccc;
}
#fly_object{
width: 180px;
height: 115px;
margin: 0 auto;
display: block;
border: 0;
}
#result,#time{
position: fixed;
top: 20px;
left: 40px;
font-size: 28px;
color: #444;
}
#time{
top: 60px;
}
Стили не нуждаются в пояснении, поэтому переходим к программного коду!
Jquery код:
$(document).ready(function(){
window.life = 10; //Количество жизней
window.time = 0; //Время в секундах
window.set_time = 0; //Флаг запущенного времени
window.result = $('#result'); //Результат
result.html('Количество жизней ' + life);
//Отвечает за случайное перемещение объекта
function fly_object(){
var top = Math.round(Math.random() * (400 - 1) + 1);
var right = Math.round(Math.random() * (650 - 1) + 1);
var bottom = Math.round(Math.random() * (700 - 1) + 1);
var left = Math.round(Math.random() * (500 - 1) + 1);
$('#fly_object').animate({'margin': + top + 'px ' + right + 'px ' + bottom + 'px ' + left + 'px'},300);
}
setInterval(fly_object, 100); //Запускаем объект в полет
//Срабатываем при касании с объектом
$('#fly_object').mouseenter(function(){
if( life > 1){
life--;
result.html('Количество жизней ' + life);
}else{
$('#result').html('Вы проиграли!<br>' + $('#time').html() );
$('.wrap').hide();
$('#time').hide();
}
});
//Срабатываем при выходе за зону
$('.wrap').mouseleave(function(){
if( life > 2){
life -= 2;
result.html('Количество жизней ' + life);
}else{
$('#result').html('Вы проиграли!<br>' + $('#time').html() );
$(this).hide();
$('#time').hide();
}
});
//Считаем кол-во секунд
function fly_time() {
time++;
$('#time').html('Секунд: ' + time);
}
//Запускаем время как только навели на игровую область
$('.wrap').hover(function(){
if( set_time == 0 ){
setInterval(fly_time, 1000);
set_time = 1;
}
});
});
В программе используется два интервала – один для хода времени, другой для случайного перемещения птицы.
Думаю, имеющиеся комментарии сразу дают понять, за что отвечает та или иная функция.
Данную игру можно усложнить, например, сделать, так, чтобы каждые 10 секунд наш орел двигался быстрее, то есть чем дольше играешь, тем становится сложнее уворачиваться.
Demo пример
Скачать исходники
Пишите любые вопросы (например, если что-то непонятно в коде) и предложения – обязательно разберем!
На этом у меня всё, подписывайтесь на обновления, до новых встреч, удачи!
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.