moduł - układanka słowna

0

Witam,
Chcę zrobić układankę słowną, poniżej podaję skrypt. Na tym przykładzie jest jeden wyraz do złożenia, a jak zaimplementować większy zasób (kilka słów), ale tak, żeby losowało kolejną układankę np. z 5 i można było przejść do niej za pomocą np. przycisku "kolejny wyraz"?
Nie umiem tego zrobić, czy ktoś mógłby pomóc?
Z góry dziękuję.

$(function() {
    var word = "KOMPUTER",
        rand = [],
        puzzle = $("#puzzle").hide();
    
    
    var letters = word.split("");
    var jumble = letters.slice().sort(function(){return 0.5-Math.random()});
    
    
    $.each(jumble,function(index,letter){
      $("<section></section>").html(letter).appendTo(puzzle);
    });
            
    puzzle.sortable({
      items: "section",
      stop: function(event, ui) {

        var ordered = true;        
        $(this).find("section").each(function(i, el){
          ordered = (letters[i] === $(el).html()) ? ordered : false;     
        }); 
        if(ordered)
          $("#result").show();
      }
    }).show();    
  });
4

Przerób swój kod tak, żeby to co robi teraz - robił jako funkcja, w której jako parametr będziesz podawał słowo do grania. Następnie dorobisz do tego obsługę reszty.

Z porad dla świeżaka:

  • odseparuj kod - zrób tak, żeby logika gry była w jednym miejscu, wyświetlanie w drugim, obsługa akcji w trzecim itd itd
  • staraj się aby funkcje, które będziesz tworzył - zajmowały się tylko jedną rzeczą (tzw SRP - single responsibility principle). Obecnie Twój kod robi wszystko naraz - takie troszkę spaghetti.
4

Używasz jQuery w 2022 roku? Okej. Ale o ile jeszcze używanie sortable czy do manipulacji na DOM ma jakiś sens, to ta linijka:

$.each(jumble,function(index,letter){

nic ci nie daje, skoro tablice w JS mają od lat metodę forEach:

jumble.forEach(function (letter, index) {
   //....
});

albo używając arrow function:

jumble.forEach((letter, index) => {
   //....
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Poza tym: zamiast używać var, lepiej używać const i let, które są bardziej intuicyjne(ponieważ mają zakres na blok, a nie całą funkcję) i mają więcej ograniczeń (tj. ograniczenia należy tu postrzegać pozytywnie, jako pomoc dla programisty, żeby pisał poprawny kod).
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

Na tym przykładzie jest jeden wyraz do złożenia, a jak zaimplementować większy zasób (kilka słów), ale tak, żeby losowało kolejną układankę np. z 5 i

Ale gdzie leży problem? Po prostu wydziel funkcję do losowania.
Tzn. rozumiem chyba, co chcesz osiągnąć, ale nie rozumiem problemu, dlaczego ci się to nie udaje.
Być może łatwiej będzie to przepisać na nowo, z myślą, że od razu mają być funkcje do losowania kolejnego wyrazu i resetowania stanu.

0

@LukeJL: Wspaniale! Zawsze rżniesz ważniaka, czy tylko jak świeżak przyjdzie? Twoja odpowiedź zupełnie nie na temat, nie pytałam Ciebie o ocenę tego kodu, poprosiłam o pomoc w jego rozwinięciu. W zasadzie część problemu już rozwiązałam, więc i tym się nie kłopocz :)

4

Po prostu udzielam informacji.

Plus próbując udzielić odpowiedzi konkretnie na pytanie, próbowałem doprecyzować pytając o szczegóły, z czym masz dokładnie problem (Ale gdzie leży problem, rozumiem chyba, co chcesz osiągnąć, ale nie rozumiem problemu, dlaczego ci się to nie udaje.), żeby móc ci pomóc. Bez tego mogę tylko napisać wydziel funkcję do losowania. (...) łatwiej będzie to przepisać na nowo, z myślą, że od razu mają być funkcje do losowania kolejnego wyrazu i resetowania stanu., bo faktycznie to by było najsensowniejsze podejście.

1 użytkowników online, w tym zalogowanych: 0, gości: 1