VIP campusboy 912 Posted January 24, 2015 VIP Report Share Posted January 24, 2015 Всем привет. Изучаю php и практикуюсь на всем, что попадется. Так, играя в settlres, решил сделать таймер бафов. Сейчас бафнул и в какое время эффект бафа закончится. Баф - это усилитель. В игре есть здания, которые на определенное время можно усилить (ускорить производство). Так появился вот такой таймер allmotion.hol.es/timebuffs/index.php . Его минус, что php не позволяет "увидеть" (я такого не нашёл) время на компьютере игрока, чтобы автоматом подгонять время, пришлось использовать date_default_timezone_set. Каждый сам себе выбирает время. Но вот задался целью оживить такой таймер наглядностью, а именно, чтобы время менялось онлайн, для этого надо использовать javascript. В нем я вообще не силен, но кое-как собрал вот такой пример: http://codepen.io/campusboy/pen/OPgjME/ Всё работает, но так как усилителей (бафов) много и они разные по продолжительности действия, я в функцию добавляю время (эффект усилителя). Для одного бафа этой конструкции достаточно, но их порядка 80. Подскажите, пожалуйста, как оптимизровать код, чтобы не было 80 повторов (я понимаю, что функция для того и нужна, чтобы не было повторов, но как сделать на javascript не знаю)? Самый удобный вариант, если бы писать: <div id="buff" class="60"></div> где в class я бы вводил минуты длительности бафа. Link to post Share on other sites
Heliax 8 Posted January 24, 2015 Report Share Posted January 24, 2015 Вот.. набросал на скору руку. Дальше сам. Надеюсь, принцип работы будет понятен. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Отслеживание бафов</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <style type="text/css"> .myControlSection {margin-bottom: 7px;} .myControlSection button {width: 100px; height: 40px; font-weight: 700; cursor: pointer;} .myControlSection .newBuffAppendButton {width: 260px; margin-left: 14px;} .buffUnit {width: 48px; height: 48px; border: 1px solid #000; border-radius: 3px;} .buffUnit span {margin-left: 3px;} .buffClass1 {background: #ffffcc;} .buffClass2 {background: #ffff33;} .buffClass3 {background: #ffcccc;} .buffClass4 {background: #ccff66;} .buffClass5 {background: #ffcc66;} .buffClass6 {background: #99ccff;} .buffClass7 {background: #ffcc00;} .buffClass20 {background: #99ffff;} </style> <script type="text/javascript"> var myBuffTimer, // Собственно, наш таймер. buffTimingArr = {}; // «Реестр» - для хранения инфы о бафах, организуем на базе объектов. // Если на сайте есть другие фреймворки кроме jQuery и они между собой конфликтуют, то замени все символы $ на jQuery // Наличие ошибок в JS хорошо показывает IE :-) Для отладки скриптов будет очень полезно. $(document).ready(function(){ // Управление. $('button#myStartButton').unbind('click').bind('click', function(){ myBuffInit(); // Инициализация. myTimerForCalculateBuffs(); // Стартуем таймер. }); $('button#myStopButton').unbind('click').bind('click', function(){ clearTimeout(myBuffTimer); // Останавливаем таймер. // Сбрасываем на странице значения в ноль. $('div.buffUnit').each(function(){ $(this).find('span').html('0'); }); }); $('button#myRestartButton').unbind('click').bind('click', function(){ clearTimeout(myBuffTimer); // Останавливаем таймер. myBuffInit(); // Заново инициализируем. myTimerForCalculateBuffs(); // Стартуем таймер. }); $('button.newBuffAppendButton').unbind('click').bind('click', function(){ var currentBuffCount = $("div.buffUnit").length, // Сколько уже бафов есть на странице. newBuffID = 'buff'+currentBuffCount+1, // Выделяем ID для нового бафа. buffTimeValue = Math.floor(Math.random() * 100)+10, // Генерируем его продолжительность (от 10 до 100 сек). buffClass = 'buffClass'+(Math.floor(Math.random() * 7)+1); // Какого цвета будет новый баф (от 1 до 7). buffTimingArr[newBuffID] = buffTimeValue+'|0'; // Внесём новый баф в «реестр», и выкатим его на страницу. $('div#myBuffContainer').append('<div id="'+newBuffID+'" class="buffUnit '+buffClass+'"><span>'+buffTimeValue+'</span><input type="hidden" value="'+buffTimeValue+'" /></div>'); //alert(buffTimeValue); }); }); // Инициализация: соберём инфу по каждому бафу в «реестр». function myBuffInit(){ var buffID, buffTimeValue; $('div.buffUnit').each(function(){ buffID = $(this).attr('id'); // ID бафа ... buffTimeValue = $(this).find('input').val(); // ... и его длительность. buffTimingArr[buffID] = buffTimeValue+'|0'; // Запоминаем инфу о бафе (0 - это служебка для таймера: сколько баф уже действует). $('div#'+buffID).show().find('span').html(buffTimeValue); // Отсветим его длительность на странице. }); } // Зацикленый таймер для пересчёта валидности бафов. function myTimerForCalculateBuffs(){ var buffID, buffTimerArr, buffMaxTime, buffCurrentTime; // Проверяем каждый баф в «реестре» - не закончился ли он. for(buffID in buffTimingArr){ buffTimerArr = buffTimingArr[buffID].split('|'); // Текущая инфа о длительности бафа. buffMaxTime = parseInt(buffTimerArr[0]); // Сколько баф должен действовать. buffCurrentTime = parseInt(buffTimerArr[1]); // Сколько баф уже действует. buffCurrentTime++; if(buffCurrentTime == buffMaxTime){ // Если время истекло, то ... delete buffTimingArr[buffID]; // ... забываем про него ... $('div#'+buffID).hide(300); // ... и делаем какое-либо нужное нам действие. }else{ // Если время бафа не истекло, то ... buffTimingArr[buffID] = buffMaxTime+'|'+buffCurrentTime; // ... запомним сколько он уже действует, и ... $('div#'+buffID).find('span').html(buffMaxTime-buffCurrentTime); // ... отсветим на странице обратный отсчёт. } } // clearTimeout(myBuffTimer); // На случай, если таймер будет глючить. // Авто-перезапуск таймера через 1 сек. myBuffTimer = setTimeout(function(){ myTimerForCalculateBuffs(); }, 1000); } </script> </head> <body> <div class="myControlSection"> <button id="myStartButton">Старт</button> <button id="myStopButton">Стоп</button> <button id="myRestartButton">Рестарт</button> <button class="newBuffAppendButton">Добавить новый баф</button> </div> <div id="myBuffContainer"> <div id="buff1" class="buffUnit buffClass1"><span>0</span><input type="hidden" value="10" /></div> <div id="buff2" class="buffUnit buffClass2"><span>0</span><input type="hidden" value="90" /></div> <div id="buff3" class="buffUnit buffClass3"><span>0</span><input type="hidden" value="30" /></div> <div id="buff4" class="buffUnit buffClass4"><span>0</span><input type="hidden" value="25" /></div> <div id="buff5" class="buffUnit buffClass5"><span>0</span><input type="hidden" value="45" /></div> <div id="buff6" class="buffUnit buffClass6"><span>0</span><input type="hidden" value="150" /></div> <div id="buff7" class="buffUnit buffClass7"><span>0</span><input type="hidden" value="15" /></div> <!-- И так далее, можно добавлять динамически: как посредством PHP, так и с помощью JS --> <div id="buff20" class="buffUnit buffClass20"><span>0</span><input type="hidden" value="200" /></div> </div> </body> </html> bufftest.php campusboy and keys3d 2 Link to post Share on other sites
Heliax 8 Posted January 24, 2015 Report Share Posted January 24, 2015 Чтобы избежать запуска нескольких копий таймера одновременно, нужно удалить кнопку Старт вместе с её обработчиком (её я воткнул для примера). Кнопку Рестарт переименовать в Старт/Рестарт (её обработчик как раз именно так и работает). campusboy 1 Link to post Share on other sites
VIP campusboy 912 Posted January 24, 2015 Author VIP Report Share Posted January 24, 2015 @Heliax, спасибо, дружище. Сейчас буду разбираться! Link to post Share on other sites
VIP campusboy 912 Posted January 24, 2015 Author VIP Report Share Posted January 24, 2015 Чтобы избежать запуска нескольких копий таймера одновременно, нужно удалить кнопку Старт вместе с её обработчиком (её я воткнул для примера). Кнопку Рестарт переименовать в Старт/Рестарт (её обработчик как раз именно так и работает). Я и не ожидал, что вы такой скрипт забабахали Жаль, это не то. У меня задача: вот сейчас 12:50. Мне надо знать, если я сейчас бафну услителем с эффектом 6 часов, через сколько усиление исчезнет, то есть в 18:50. А усилитель на 9 часов исчерпает себя в 21:50. И так 50 бафов. Только чтобы время тикало онлайн. Но за скрипт этот спасибо. Очень занятно разобраться в коде, возможно, я на его основе кое что сделаю, так же связанное с игрой. Снимаю шляпу за отзывчивость и труд! Link to post Share on other sites
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now