Суть игры: произвольная фигура (circle, square, triangle, rhombus) движется слево направо в игровом поле 80% от ширины браузера. Когда игрок нажимает на фигуру она исчезает, очки добавляются к счету (от 0 до 100 очков, в зависимости от того, насколько далеко фигура успела сместится от левого края). Следующая произвольная фигура начинает движение. Пока получилось так (неправильно и совсем по-дилетантски):
$("#circle").animate({ left: '100%' }, 7000 );
$("#rhombus").hide();
$("#circle").click(function(){
$(this).hide();
$("#rhombus").show().animate({ left: '100%' }, 7000 );
$('#count').html(+$('#count').html()+1);
});
body {
text-align: center;
background: #F0EFEE;
color: #777;
}
#count {
position: fixed;
display: inline-block;
float: left;
padding: 10px 20px;
background: #fff;
font: 1.5rem/1 monospace;
border-radius: .25rem;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
z-index:20;
left:20px;
top:15px;
}
.linear {
display: inline-block;
position: relative;
margin: 20px 16px 20px 20px;
width: 80%;
height: 400px;
background:white;
}
#left {
background: #F0EFEE;
width: 10%;
height: 100%;
top:0;
left:0;
position: fixed;
z-index:15;
}
#right {
background: #F0EFEE;
width: 11%;
height: 100%;
top:0;
left:89%;
position: fixed;
z-index:15;
}
#circle {
position: absolute;
width: 45px;
height: 45px;
left: 0;
top: 150px;
border-radius: 50%;
background: #F6AC31;
}
#rhombus {
border-style: solid;
border-color: transparent transparent #00BFFF transparent;
border-width: 0 15px 15px 15px;
height: 0;
width: 30px;
left: 0;
top: 150px;
position: absolute;
}
#rhombus:after {
content: "";
position: absolute;
top: 15px;
left: -15px;
width: 0;
height: 0;
border-style: solid;
border-color: #00BFFF transparent transparent transparent;
border-width: 40px 30px 0 30px;
}
https://jsfiddle.net/gc0jv3s8/1/
Ответ
Обычно стоит разбивать логику на вспомогательные и оборачивать это в функции (методы) для выделения общей логики по работе с элементами с одинаковым поведением..
Например вот несколько оберток в виде функций:
getRandomInt - дает рандомный выбор элементов из массива. На данный момент он состоит из двух: ['circle', 'rhombus'];. Но можешь добавлять неограниченное их количество (в соответствии с их существованием, конечно).
init - для любой начальной инициализации. На данный момент там прячутся все фигуры, чтобы не было видно. Хотя это можно сделать в CSS, но данная функция призвана показать, что возможны и должны быть сделаны какие-либо действия до основной игры.
spawn - собственно делает порождение элементов:
берет рандомный индекс из массива элементов
определяет его идентификатор. Так как мы знаем его индекс в массиве, то его идентификатор будет равен # плюс имя, которое мы достали из массива по индексу.
запускает саму анимацию
навешивает слушателя клика на элемент с данным идентификатором. on - прикрепляет событие к элементу. Причем прикрепляет это к динамически созданному элементу. Хотя в данном случае это не обязательно....Хотя....Обязательно!))
При клике на выбранный элемент
открепляем событие клика (off). Зачем нам плодить событие?
останавливаем анимацию (stop)
возвращаем элемент в начальную позицию
прячем
заново запускаем генерацию spawn
Пример кода смотрим ниже:
var elements = ['circle', 'rhombus'];
function init() {
$('.linear > i').hide();
}
function spawn() {
var elNum = getRandomInt(0, elements.length);
var elId = "#"+(elements[elNum]);
$(elId).show().animate({ left: '100%' }, 7000 );
$(document).on('click', elId, function(){
$(document).off('click', elId);
$(this).stop( true, true ).css('left', 0).hide();
$('#count').html(+$('#count').html()+1);
spawn();
});
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
init();
spawn();
body {
text-align: center;
background: #F0EFEE;
color: #777;
}
#count {
position: fixed;
display: inline-block;
float: left;
padding: 10px 20px;
background: #fff;
font: 1.5rem/1 monospace;
border-radius: .25rem;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
z-index:20;
left:20px;
top:15px;
}
.linear {
display: inline-block;
position: relative;
margin: 20px 16px 20px 20px;
width: 80%;
height: 400px;
background:white;
}
#left {
background: #F0EFEE;
width: 10%;
height: 100%;
top:0;
left:0;
position: fixed;
z-index:15;
}
#right {
background: #F0EFEE;
width: 11%;
height: 100%;
top:0;
left:89%;
position: fixed;
z-index:15;
}
#circle {
position: absolute;
width: 45px;
height: 45px;
left: 0;
top: 150px;
border-radius: 50%;
background: #F6AC31;
}
#rhombus {
border-style: solid;
border-color: transparent transparent #00BFFF transparent;
border-width: 0 15px 15px 15px;
height: 0;
width: 30px;
left: 0;
top: 150px;
position: absolute;
}
#rhombus:after {
content: "";
position: absolute;
top: 15px;
left: -15px;
width: 0;
height: 0;
border-style: solid;
border-color: #00BFFF transparent transparent transparent;
border-width: 40px 30px 0 30px;
}
На самом деле дорабатывать и улучшать тут можно еще много. Но как черновик для начала - достаточно.
Вообще хочу напомнить, что для анимации (особенно для игры) скорее лучше использовать setInterval, а то и вовсе requestAnimationFrame. И скорее не элементы DOM дерева, а canvas и WebGL.
Комментариев нет:
Отправить комментарий