Тема: Jquery UI установка таймеру у пазли
Вітаю! Потрібно зробити гру в пазли, встановивши таймер setInterval на кнопку та при ручному перетягуванні пазлів, тобто, кубів з одного блоку у інший. Функція перевірки також є. Але перетягування працює зараз з помилкою, тому що таймер має спрацювати один раз, а виходить, що спрацьовує при кожному разі перетягування 16 штук пазлів. Методи sortable, fraggable, droppable.
html:
<div class="timer"> <span id="timer">01:00</span></div>
<div class="btns">
<button id="start">Start game</button>
<button id="check">Check result</button>
<button id="new">New game</button>
</div>
<div class="container">
<div id="piece-container" class="image-box"></div>
<div id="puzzle-container" class="image-box"></div>
</div>
js:
function timer (){ //функція запуску таймера
$('#timer').text('00' + ':' + counter);
counter--;
{
if (counter <= 0) {
clearInterval(intervalID)
alert('It\'s a pity, but you lost')
$('#check').attr('disabled', true)
$('#timer').text('00'+':'+'00')
}
//console.log(counter)
if(counter < 10) {
$('#timer').text('00' + ':' + '0' +counter);
}
}
$('#start').on('click', function() {
intervalID = setInterval(timer, 1000);
$(this).attr('disabled', true)
})
$('#puzzle-container').droppable({
})
$('.piece').draggable({
})
$('.image-box').sortable({
connectWith: '#piece-container, #puzzle-container',
containment: '#puzzle-container',
cursor: 'move',
scroll: false,
delay: 100 //тут можна щось додати
})
function swipe () {
$('.piece').each(function(index, el){
if($(this).index < 1) {
$(el).on('mouseover', function(){
$('#start').trigger('click') //або додати автоматичне спрацьовування кнопки
$('#start').attr('disabled', true)
//intervalID = setInterval(timer, 1000)
})
}
})
}