Visualizzazione di un Algoritmo di Torri di Hanoi in Javascript

Question

Latley Sto lavorando a un progetto scolastico e devo presentare un algoritmo che è nel mio caso un algoritmo di risoluzione del puzzle Towers di Hanoi. Grazie alle mie conoscenze in HTML/CSS ho pensato che sarebbe stato abbastanza semplice usare quelli + Javascript per visualizzare i passaggi su una pagina web.

Ho ottenuto la configurazione del sito e l'algoritmo base ricorsivo.

function move(n, beg, aux, end) { 

if (n == 1) { 
    console.log(beg + '-->' + end + '\n'); 
    setTowers(beg, end); 
} else { 
    move(n - 1, beg, end, aux); 
    move(1, beg, aux, end); 
    move(n - 1, aux, beg, end); 
    } 
} 

layout della pagina (codice CSS non aiuterà qui):

section#main-app 
.app-wrapper 
    .tower-wrapper 
     .tower#twr--a 
      .block.blck--top 
      .block.blck--middle 
      .block.blck--bottom 
     .tower#twr--b 
      .block.blck--top 
      .block.blck--middle 
      .block.blck--bottom 
     .tower#twr--c 
      .block.blck--top 
      .block.blck--middle 
      .block.blck--bottom 

Poi ho iniziato a lottare come ho avuto di visualizzare in qualche modo. Ho pensato di mettere ogni torre in un array:

var twrElemsA = document.getElementById('twr--a').getElementsByClassName('block'); 
towerA = jQuery.makeArray(twrElemsA); 

Quindi la funzione per impostare effettivamente il colore. 2 cose per il momento: non cancellerà il colore se necessario e non imposterà affatto il colore perché ho incasinato l'istruzione switch/non so come farlo correttamente.

function setColors(target) { 

target.forEach(function (element) { 

    switch (element) { 
     case '<div class="block blck--top">': 
      $(element).css({ 
       'background-color': 'red' 
      }); 
      break; 

     case '<div class="block blck--middle">': 
      $(element).css({ 
       'background-color': '#51616F' 
      }); 
      break; 

     case '<div class="block blck--bottom">': 
      $(element).css({ 
       'background-color': '#394B5A' 
      }); 
      break; 
    } 

}); 

}

Ora, se la funzione spostamento ritorna per esempio A -> B, setColors dovrebbe poi iterare su TowerB e impostare lo sfondo-colori di tutti e tre i blocchi per un colore specifico. Ma la dichiarazione switch non funziona e ho esaurito le idee e il tempo che è una combo devastante.

Forse qualcuno sa cosa potrebbe aiutare qui. Apprezzo qualsiasi aiuto!

saluti ..

Answer 1

Dallo sguardo dei tuoi setColors funzione che si stanno facendo modifiche visivi per i blocchi utilizzando JavaScript. Il consenso generale nello sviluppo web di front end è di lasciare tali compiti ai CSS.

Nel tuo caso stai verificando che i tuoi DIV abbiano le classi block e blck--bottom. Quindi, piuttosto che usare JavaScript forse si potrebbe tentare un foglio di stile con il seguente selettore:

.block.blck--top { 
    background-color: '#51616F'; 
} 

.block.blck--middle { 
    background-color: '#51616F'; 
} 

.block.blck--bottom { 
    background-color: '#51616F'; 
} 

In contrasto con questo però, se è necessario eseguire ulteriori azioni che non sono visivi base si può prendere il seguente approccio.

function setColors(target) { 

target.forEach(function (element) { 

    if(element.classList.contains('blck--top')) 
    { 
     element.style['background-color'] = 'red'; 
     /* - Extra code here - */ 
    } 
    else if(element.classList.contains('blck--middle')) 
    { 
     element.style['background-color'] = '#51616F'; 
     /* - Extra code here - */ 
    } 
    else if(element.classList.contains('blck--bottom')) 
    { 
     element.style['background-color'] = '#394B5A'; 
     /* - Extra code here - */ 
    } 
}); 

Ma se davvero si desidera utilizzare istruzioni case interruttore poi:

function setColors(target) { 

target.forEach(function (element) { 

    switch (element.getAttribute('class')) { 
     case 'block blck--top': 
      $(element).css({ 
       'background-color': 'red' 
      }); 
      break; 

     case 'block blck--middle': 
      $(element).css({ 
       'background-color': '#51616F' 
      }); 
      break; 

     case 'block blck--bottom': 
      $(element).css({ 
       'background-color': '#394B5A' 
      }); 
      break; 
    } 
}); 

Si prega di notare che ho anche fornito un modo per eseguire le stesse operazioni utilizzando pianura vecchio JavaScript (jQuery-meno se desideri).