在Javascript中可视化河内塔算法

Visualing a Towers of Hanoi Algorithm in Javascript

本文关键字：内塔 算法 可视化河 Javascript      更新时间：2023-09-26

Latley 我正在做一个学校项目，我必须提出一个算法，在我的情况下，它是河内塔的解谜算法。由于我在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);

然后是实际设置颜色的功能。 目前有两件事： 如果需要，它不会擦除颜色，也不会设置颜色，因为我搞砸了 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，并将所有三个块的背景颜色设置为特定颜色。但是switch语句不起作用，我用完了想法和时间，这是一个毁灭性的组合。

也许有人知道这里有什么帮助。我感谢任何帮助！

问候。。

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

请注意，我还为您提供了一种使用普通旧JavaScript（如果您愿意的话，无需JQuery）执行相同任务的方法。

相关文章：