Добавить обратный отсчет в мой скрипт подсчета очков (javascript/jquery)

У меня есть следующий скрипт в файле js:

// Ad score
var score = 0;
//$('#score').text(score);
function foundMatchingBlocks(event, params) {
      params.elements.remove();
      score += 100;
      $('#score').text(score);
};

Теперь при каждом совпадении к счету var добавляется 100 баллов. Это все работает. Теперь я хочу немного расширить это. Как только страница загрузится, я хочу запустить обратный отсчет, чтобы уменьшить количество баллов (начиная со 100) с 1 баллом в секунду в течение 60 секунд. Таким образом, минимальное количество баллов, которое может получить пользователь, равно 40. Когда кто-то получает баллы, счетчик должен сбрасываться и начинать обратный отсчет снова.

Пример:

  1. Загрузка страницы (таймер начинается со 100)
  2. У пользователя есть совпадение через 10 секунд (добавляется +90 баллов)
  3. Счетчик сбрасывается и снова отсчитывается от 100
  4. Пользователь нашел совпадение через 35 секунд (добавляется +65 баллов)
  5. и т. д. и т. д.

Проблема в том, что я понятия не имею, как это сделать :( Надеюсь, кто-нибудь может мне помочь с этим.

Все исправлено, всем спасибо за помощь!!!


javascript jquery countdown
person Maurice    schedule 09.07.2011    source источник
comment
Я только что отредактировал свой пример: второй фрагмент также должен был вызывать gameOver() вместо someFunction()...   -  person ElonU Webdev    schedule 10.07.2011

Ответы (3)


arrow_upward
0
arrow_downward

Может быть, что-то вроде:

// Ad score
var score = 0;
var pointsAvailable = 100;

//$('#score').text(score);
function foundMatchingBlocks(event, params) {
      params.elements.remove();
      score += pointsAvailable;
      $('#score').text(score);
      pointsAvailable = 100;
};

$(document).ready(function() {doTimer();});

function doTimer() {
  setTimeout('reducePoints()',1000);
}

function reducePoints() {
  if(pointsAvailable>40) {
    pointsAvailable--;
  }
  doTimer();
}
person psynnott    schedule 09.07.2011
comment
Привет, спасибо за ваш ответ, ваше решение работает, но в нем есть небольшая ошибка. Не сбрасывает очки, доступные после найденного совпадения. На данный момент это происходит: через 10 секунд: 90 очков, еще через 10 секунд: 80 очков, еще через 10 секунд: 70 очков и т. д. Таким образом, идет отсчет от последнего счета. Он всегда должен отсчитывать от 100 после каждого совпадения, так что я думаю, что где-то сброс? Но где? Спасибо еще раз - person Maurice; 10.07.2011
comment
Обновлено. Теперь он сбрасывается до 100 после матча. - person psynnott; 10.07.2011
comment
Отлично работает, небольшая просьба: есть ли способ посмотреть количество добавленных баллов? Я использовал .html('+' + pointsAvailable) до вашего обновления, чтобы увидеть результат, но после обновления всегда будет отображаться 100 - person Maurice; 10.07.2011
comment
Вы сможете сделать это сразу после строки score.text в foundmatchingblocks. - person psynnott; 11.07.2011

arrow_upward
3
arrow_downward

Общая картина такова, что вам нужно хорошо познакомиться с тайм-аутами и интервалами в javascript. Это справочная страница, к которой я постоянно возвращаюсь, когда мне нужно освежить память: http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

Для вашей конкретной задачи вы, вероятно, захотите использовать интервал, который срабатывает каждые 1000 миллисекунд, чтобы вычислить посекундное снижение балла, и отдельный тайм-аут для сбоя, который сбрасывается каждый раз, когда пользователь завершает свою задачу.

Вот несколько советов по работе с тайм-аутами и интервалами, которые обычно приводят к дополнительным вопросам:

Когда вы устанавливаете тайм-аут, всегда фиксируйте возвращаемое значение (я думаю, что это в основном случайное целое число). Сохраните его в какую-нибудь глобальную переменную для удобства.

var failureTimer; // global var high up in your scope

failureTimer = setTimeout ( "gameOver()", 100000 ); // 100 seconds * 1000ms

Затем, в зависимости от того, какой метод вызывается, когда игрок завершает свою задачу, вы вызываете это:

clearTimeout (failureTimer); // resets the timer and gives them another 100 seconds

failureTimer = setTimeout ( "gameOver()", 100000 ); // yes call this again, to start the 100 sec countdown all over again.

Второй проблемой, с которой вы, скорее всего, столкнетесь при работе с тайм-аутами и интервалами, является то, как передать параметры в такие функции, как gameOver() в моем примере выше. Вы должны использовать анонимные функции, как описано здесь:

Передать параметры в функцию setInterval

Для получения дополнительной информации об анонимных функциях это хороший обзор:

http://helephant.com/2008/08/23/javascript-anonymous-functions/

Удачи тебе с твоим проектом! Дайте знать, если у вас появятся вопросы.

person ElonU Webdev    schedule 09.07.2011
comment
Вы должны передавать ссылку на функцию, а не строку, в setTimeout. - person Na7coldwater; 10.07.2011
comment
Строковая версия будет работать, но проблема с использованием строки или ссылки на функцию заключается в том, как передать параметры в функцию. Вот почему я дал рекомендацию использовать анонимные функции ниже в своем ответе. - person ElonU Webdev; 10.07.2011
comment
Хорошо, я признаюсь, что на самом деле я не прочитал весь ваш ответ. Но для кода, который вы разместили, setTimeout( gameOver, 10000 ) сработал бы так же хорошо (не говоря уже о небольшом повышении производительности, поскольку "gameOver()" не нужно было бы компилировать). - person Na7coldwater; 10.07.2011

arrow_upward
1
arrow_downward

Вот код без использования таймеров. Вызывайте startCountdown() каждый раз, когда вы хотите повторно инициализировать обратный отсчет. Вызовите getAvailableScore(), если хотите получить текущую доступную оценку. Вам придется решить, что делать, когда доступный счет становится равным нулю.

var beginCountDownTime;

function startCountdown() {
    beginCountDownTime = new Date();
}

function getAvailableScore {
    var now = new Date();
    var delta = (now.getTime() - beginCountDownTime.getTime()) * 1000;  // time elapsed in seconds
    var points = 100 - (delta / 60);
    return(Math.round(Math.max(points, 0)));  // return integer result >= 0
}
person jfriend00    schedule 09.07.2011