Суббота, 27 Апреля 2024, 17:30

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 1
  • 1
Форум игроделов » Программирование » Скриптовые языки программирования » Не срабатывает часть JS кода jquery (Web игра "Кто хочет стать миллионером")
Не срабатывает часть JS кода jquery
GameDev2Дата: Понедельник, 11 Сентября 2023, 17:59 | Сообщение # 1
почетный гость
Сейчас нет на сайте
Никогда не имел дело разновидностями API для программирования JS в web, поэтому для меня странно, почему не срабатывает часть кода в найденном мною шаблоне игры:

Код

  resetGame() {
    $(".modal").fadeOut()
    $("#game").fadeOut()

    setTimeout(
      function(){$(".welcome").fadeIn(600)}
    ,1000)

    this.enableCallFriendLifeline = true
    this.enableAskAudienceLifeline = true
    this.enableFiftyFiftyLifeline = true
    this.stageLength = 1;
    this.answeredQuestion = [];

    this.gameLength = $(".stages button").length
    this.pLen = this.gameLength
    this.amount = $(".stages button").eq(this.pLen-1).html();
        
    $("img:hover").css("background-color","rgb(250, 121, 0) !important")
    $(".fifty").attr({"src":"images/fifty.png","onClick":"game.fifty()"}).css("cursor","pointer")
    $(".callFriend").attr({"src":"images/call.png","onClick":"game.call_a_friend()"}).css("cursor","pointer")
  }
}


Возможно зависит от jquery.js или vanilla.js типа написания строк, но не срабатывает ни так, ни так...

Т.е. при проигрыше или победе идет вызов resetGame, но использованные подсказки и текущее положение вопроса (справа по очкам в столбике) так и остаются не сброшенными. Я в эту функции вставлял другие действия, они срабатывали, т.е. вероятно, проблема именно в написании, нужно как-то по-другому писать "this.enableCallFriendLifeline = true" для jquery.

Конечно, можно найти решение, просто перезагружать страницу, но хотелось бы понять, в чём проблема.



Сообщение отредактировал GameDev2 - Понедельник, 11 Сентября 2023, 18:00
OscillographДата: Понедельник, 11 Сентября 2023, 19:45 | Сообщение # 2
был не раз
Сейчас нет на сайте
Цитата GameDev2 ()
проблема именно в написании

Склонен согласиться, потому что не вижу оператора ";" в конце первых и последних строк.

Upd.: Да и в конце многих других строк этот оператор отсутствует. Думаю, что он нужен, ведь его смысл в JavaScript -- отделять команды друг от друга.


Сообщение отредактировал Oscillograph - Понедельник, 11 Сентября 2023, 19:54
GameDev2Дата: Понедельник, 11 Сентября 2023, 19:55 | Сообщение # 3
почетный гость
Сейчас нет на сайте
Цитата Oscillograph ()
в конце многих других строк этот оператор отсутствует. Думаю, что он нужен, ведь его смысл в JavaScript -- отделять команды друг от друга.


Что-то он ни на что не влияет. Значит, необязателен... чисто для опрятности кода.
OscillographДата: Понедельник, 11 Сентября 2023, 21:15 | Сообщение # 4
был не раз
Сейчас нет на сайте
Поужинал -- и полез с инспектором DOM на страницу игры. Сравнивая с процитированной функцией, вот что нашёл:
1) в разметке документа подсказка "Звонок другу" имеет класс "call", а не "callFriend";
2) функция не обновляет иконку подсказки "Помощь зала", у которой класс "aud";
3) функция не стирает стиль использованной подсказки и зачем-то вешает лишний обработчик события "onClick" на элемент.

Исходя из этого, переписал последние три строки так:
Код
    $("img:hover").css("background-color","rgb(250, 121, 0) !important")
    $(".fifty").attr({"src":"images/fifty.png"});
    $(".fifty").removeAttr("style");
    $(".call").attr({"src":"images/call.png"});
    $(".call").removeAttr("style");
    $(".aud").attr({"src":"images/aud.png"});
    $(".aud").removeAttr("style");


Хотя resetGame() и обновляет свойства объекта, в которых хранится текущий счёт, но ничего не меняет на странице -- это делается в функции rightAnswer(), обрабатывающей ответ игрока. Скопировал соответствующие строки в новую функцию updateStagesAndScore():
Код
updateStagesAndScore() {
    $(".current").removeClass("current");
    $(".stages button").eq(this.pLen).addClass("current");
    $(".score").html("Score: " + this.amount)
  }

И добавил эту новую функцию в resetGame() аккурат после того, как очищается счёт в объекте игры:
Код
    this.gameLength = $(".stages button").length;
    this.pLen = this.gameLength;
    this.amount = $(".stages button").eq(this.pLen-1).html();
    this.updateStagesAndScore();

В результате, теперь после рестарта игры состояние подсказок обновляется до исходного, и счёт сбрасывается. Но до 100$ O_o
Это из-за того, что в свойство amount пишется внутренний HTML помеченного классом "current" тега button из контейнера stages. Чтобы сброс был до 0, нужно как-то менять логику учёта и отображения очков.



Сообщение отредактировал Oscillograph - Понедельник, 11 Сентября 2023, 22:35
GameDev2Дата: Вторник, 12 Сентября 2023, 12:30 | Сообщение # 5
почетный гость
Сейчас нет на сайте
Большое спасибо за разбор! Буду потихоньку проверять.

Сделал все манипуляции... вроде обновляется. Но теперь за первый правильный ответ дается не 100, а 0 очков.
OscillographДата: Вторник, 12 Сентября 2023, 13:03 | Сообщение # 6
был не раз
Сейчас нет на сайте
Похоже, что под вечер я стал путаться в описании того, что же на самом деле сделал :)
То последнее изменение в rightAnswer(), где исчезло вычитание единицы, -- лишнее, а вот где оно должно было быть, так это в функции resetGame() (и в constructor, наверное?):)
После добавления невидимой кнопки ведь как получилось: теперь в контейнере ".stages" не 15 элементов, а 16 -- и это число минус единица сохраняется при запуске игры в свойство gameLength. Это значение используется для инициализации свойства pLen на старте.
Обновляется же свойство pLen в rightAnswer() и указывает на индекс того элемента, который считается пройденным игроком. Индексы считаются от 0, поэтому, если в rightAnswer() из pLen не вычитать единицу, то на старте он указывает на кнопку с индексом 15 -- то есть, на ту самую невидимую шестнадцатую, у которой внутренний HTML равен "$0". И именно этот "$0" сохраняется в свойство amount, используемое updateStagesAndScore() при отображении счёта для игрока.
Вот поэтому в rightAnswer() эту "минус единицу" менять не нужно было.

На всякий случай, здесь репозиторий, где у меня вчера это работало правильно.


Сообщение отредактировал Oscillograph - Вторник, 12 Сентября 2023, 13:11
GameDev2Дата: Вторник, 12 Сентября 2023, 20:30 | Сообщение # 7
почетный гость
Сейчас нет на сайте
Я подключил простой таймер к игре:

Код
      <div class="timer-wrapper">
        <p id="timer"></p>
      </div>
<script src="scripts/timer.js"></script>


В файле timer.js:
Код

let timer; // пока пустая переменная
let x =5; // стартовое значение обратного отсчета
countdown(); // вызов функции

function countdown(){  // функция обратного отсчета
  document.getElementById('rocket').innerHTML = x;
  x--; // уменьшаем число на единицу
  if (x<0){
    clearTimeout(timer); // таймер остановится на нуле
    this.displayTimerMessage()
  }
  else {
    timer = setTimeout(countdown, 1000);
  }
}


Он должен, когда таймер покажет "0", запустить вывод сообщения проигрыша по времени.

Сообщение о проигрыше я прописал в main.js:

Код
  displayTimerMessage() {
   $('.timer-wrapper').fadeIn(800);
    setTimeout(function(){$('#timer').html("Время вышло!")},500)
    setTimeout(function(){$('#timer').html(`К сожалению, вы проиграли.<br>Вы набрали лишь ${this.amount} очков.`)}, 1800)
    setTimeout(() => {
      $('.timer-wrapper').fadeOut(800, () => {
        $('#timer').html("")
        this.resetGame()
      })
    }, 12300)
  }


Однако ничего не срабатывает, по окончанию отсчёта, сообщение не выводится.

Как-то странно там выводятся сообщения, не могу понять - надо, что-то ещё раньше запустить, либо остановить?


Сообщение отредактировал GameDev2 - Вторник, 12 Сентября 2023, 20:31
TLTДата: Вторник, 12 Сентября 2023, 20:34 | Сообщение # 8
Сейчас нет на сайте
Цитата GameDev2 ()
так и остаются не сброшенными

У тебя нет ничего, что нужно запоминать, так почему бы просто не запустить процедуру обновления страницы (перехода на главную) после победы - location.reload() - у тебя всё обновится и не нужно будет возвращать положение очков, использованных подсказок и пр. Просто и понятно.


Дао, выраженное словами, не есть истинное Дао.
OscillographДата: Вторник, 12 Сентября 2023, 21:20 | Сообщение # 9
был не раз
Сейчас нет на сайте
Вот этот момент смущает:
Цитата GameDev2 ()
В файле timer.js:
Код
. . .
function countdown(){  // функция обратного отсчета
. . .
    this.displayTimerMessage()
. . .

Если правильно помню, this в JS -- это ссылка на объект, которому принадлежит использующий её метод. То есть, если функция не принадлежит классу Game, то с помощью this она не получит доступ к его методу displayTimerMessage().
Зато к displayTimerMessage() может получить доступ та функция, которая создаёт объект game -- в main.js она зовётся initGame(). Думаю, что из неё можно вырастить что-то полезное, в том числе использующее таймеры.


Сообщение отредактировал Oscillograph - Вторник, 12 Сентября 2023, 21:27
LinkaДата: Среда, 13 Сентября 2023, 01:00 | Сообщение # 10
GameDeva
Сейчас нет на сайте
Интересный шаблон, но есть и более продвинутые для квизов движки. У этого после 50/50 даже можно выбрать удаленный вариант ответа - это баг или фича? А после выбора ответа он не подсвечивается и не горит, как в традиционных вариантах "Миллионера". В общем, без этого как-то слабенько.

Если что, то ставьте мне + в репутацию! ;)
GameDev2Дата: Среда, 27 Сентября 2023, 15:26 | Сообщение # 11
почетный гость
Сейчас нет на сайте
Кто может, пожалуйста, помогите сделать, чтобы исключенные варианты ответа после 50/50 нельзя было выбирать (пустое поле) и чтобы выбранный ответ горел после клика на него до следующего вопроса.
flatingoДата: Четверг, 28 Сентября 2023, 09:02 | Сообщение # 12
участник
Сейчас нет на сайте
а я вот думаю, почему собственно jquery? разве его сейчас кто-то использует? почему не react? там же много UI китов, например MUI или Ant Design есть

когда-то я уйду в web3
TLTДата: Вторник, 03 Октября 2023, 14:27 | Сообщение # 13
Сейчас нет на сайте
Прикольный исходник. Тоже возьму его для своего проектика, гляну, что к чему...

Дао, выраженное словами, не есть истинное Дао.
TLTДата: Суббота, 07 Октября 2023, 13:45 | Сообщение # 14
Сейчас нет на сайте
Цитата GameDev2 ()
сделать, чтобы исключенные варианты ответа после 50/50 нельзя было выбирать (пустое поле)


Для этого в файле main.js в куске changeQuestionStageData(data)

выдели проверкой этот код:

Код
/** 50/50 check */
     $(".opt").click((e) => {
        this.selected = e.target.textContent.slice(0,1)
        $(".modal").fadeIn(300);
        $(".warning").fadeIn(300)
      })
/** 50/50 check */


Тогда выбрать убранные нельзя будет.


Дао, выраженное словами, не есть истинное Дао.
GameDev2Дата: Понедельник, 09 Октября 2023, 12:26 | Сообщение # 15
почетный гость
Сейчас нет на сайте
Цитата TLT ()
выдели проверкой этот код

В том-то и проблема, что в игре не заложена возможность узнать, какие варианты активны, а какие - нет. Я и не знаю, как это можно реализовать. Кто может, помогите.
OscillographДата: Понедельник, 09 Октября 2023, 13:33 | Сообщение # 16
был не раз
Сейчас нет на сайте
Помимо варианта заложить эту возможность можно рассмотреть и более простой: проверять длину текста в ответе.
Если присмотреться к функции, которая удаляет тексты ответов, то можно заметить, что длина такого "пустого" ответа составляет всего два символа: "А:", например.
Соответственно, всё, что длиннее двух символов, можно считать разрешённым для выбора. Вот, собственно, и всё, что достаточно проверять.
TLTДата: Четверг, 12 Октября 2023, 17:17 | Сообщение # 17
Сейчас нет на сайте
GameDev2, помог сделать игру на основе этого кода. Если что-то из реализованного нужно (звуки, например) - обращайся, помогу.

Дао, выраженное словами, не есть истинное Дао.
Форум игроделов » Программирование » Скриптовые языки программирования » Не срабатывает часть JS кода jquery (Web игра "Кто хочет стать миллионером")
  • Страница 1 из 1
  • 1
Поиск:

Все права сохранены. GcUp.ru © 2008-2024 Рейтинг
Закупку стройматериалов в Ярославле можно сделать на сайте https://postavka-76.ru/. Есть доставка.