Sign in to follow this  
Followers 0
campusboy

Доработка таймер на javascript

5 posts in this topic

Всем привет. Изучаю php и практикуюсь на всем, что попадется. Так, играя в settlres, решил сделать таймер бафов. Сейчас бафнул и в какое время эффект бафа закончится. Баф - это усилитель. В игре есть здания, которые на определенное время можно усилить (ускорить производство). Так появился вот такой таймер allmotion.hol.es/timebuffs/index.php . Его минус, что php не позволяет "увидеть" (я такого не нашёл) время на компьютере игрока, чтобы автоматом подгонять время, пришлось использовать date_default_timezone_set. Каждый сам себе выбирает время. Но вот задался целью оживить такой таймер наглядностью, а именно, чтобы время менялось онлайн, для этого надо использовать javascript. В нем я вообще не силен, но кое-как собрал вот такой пример:

Всё работает, но так как усилителей (бафов) много и они разные по продолжительности действия, я в функцию добавляю время (эффект усилителя). Для одного бафа этой конструкции достаточно, но их порядка 80. Подскажите, пожалуйста, как оптимизровать код, чтобы не было 80 повторов (я понимаю, что функция для того и нужна, чтобы не было повторов, но как сделать на javascript не знаю)?
Самый удобный вариант, если бы писать:
<div id="buff" class="60"></div>

где в class я бы вводил минуты длительности бафа.

 

Share this post


Link to post
Share on other sites

Вот.. набросал на скору руку. Дальше сам. Надеюсь, принцип работы будет понятен.
 



<!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

keys3d and campusboy like this

Share this post


Link to post
Share on other sites

Чтобы избежать запуска нескольких копий таймера одновременно, нужно удалить кнопку Старт вместе с её обработчиком (её я воткнул для примера). Кнопку Рестарт переименовать в Старт/Рестарт (её обработчик как раз именно так и работает).

campusboy likes this

Share this post


Link to post
Share on other sites

 

 


Чтобы избежать запуска нескольких копий таймера одновременно, нужно удалить кнопку Старт вместе с её обработчиком (её я воткнул для примера). Кнопку Рестарт переименовать в Старт/Рестарт (её обработчик как раз именно так и работает).

Я и не ожидал, что вы такой скрипт забабахали  :) Жаль, это не то. У меня задача: вот сейчас 12:50. Мне надо знать, если я сейчас бафну услителем с эффектом 6 часов, через сколько усиление исчезнет, то есть в 18:50. А усилитель на 9 часов исчерпает себя в 21:50. И так 50 бафов. Только чтобы время тикало онлайн. Но за скрипт этот спасибо. Очень занятно разобраться в коде, возможно, я на его основе кое что сделаю, так же связанное с игрой. Снимаю шляпу за отзывчивость и труд!  :rolleyes:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.