Javascriptでハノイアルゴリズムのタワーを視覚化する

Question

ラトリー私は学校プロジェクトに取り掛かっています。私の場合、パズルタワーズオブハノイの解法アルゴリズムを提示する必要があります。 HTML/CSSでの私の知識のために、私はそれらの+ Javascriptを使用してウェブページ上のステップを視覚化することは非常にうまくいくと考えました。

私は、基本的な再帰アルゴリズムと同様にサイトをセットアップしました。

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); 
    } 
} 

ページのレイアウト（CSSコード文句を言わない、ここで役立つ）：

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 

は、それから私は、私は何とかそれを視覚化しなければならなかったとして苦労し始めました。私は各タワーを配列に入れることを考えました：

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

実際に色を設定する機能。現時点では2つの事柄があります：必要ならば色を消さず、色を設定しません。なぜなら、私はswitch文を使いこなしてしまったからです。今

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; 
    } 

}); 

}

移動機能は、例えば、Aのために返された場合、 - > B、setColorsは次にTowerBを反復し、特定の色にすべての3つのブロックの背景色を設定すべきです。しかし、スイッチのステートメントは動作しませんと私は壊滅的なコンボですアイデアと時間が不足しています。

誰かが何を助けてくれるのか分かっているかもしれません。私は助けていただきありがとうございます！

よろしく..

Answer 1

あなたsetColorsの外観からはJavaScriptを使用してブロックに視覚的な変更を行っている機能。フロントエンドWeb開発の一般的なコンセプトは、これらのタスクをCSSに任せることです。

あなたのDIVがクラスblockとblck--bottomであることを確認しています。だから、むしろ、おそらくあなたは、以下のセレクタでスタイルシートを試みる可能性がJavaScriptを使用してより：

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

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

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

これとは対照的にしかし、あなたは、次のアプローチを取ることができますベースのビジュアルではありません、さらにアクションを実行する必要がある場合。

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 - */ 
    } 
}); 

しかし、あなたは本当にその後、スイッチケースの文を使用したい場合：

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; 
    } 
}); 

私はあなたのための方法をも提供していることに注意してください（jQueryのレス昔ながらのJavaScriptを使用して、同じタスクを実行する場合あなたはするであろう）。