JavaScript實現冒泡排序可視化

時間 2019-11-09

標籤 javascript 實現冒泡排序可視化欄目 JavaScript 简体版

原文原文鏈接

說明

上次寫了 JavaScript實現冒泡排序，只是簡單的說了冒泡排序算法是什麼，怎麼實現，此次來實現將冒泡排序的過程展示出來。html

解釋

先來個簡單的版本，看效果圖
前端

實現這個效果，思路是這樣的
一、先將須要排序的數組，進行冒泡排序，記錄每一步的內容，存放在一個數組中
二、利用canvas，實現一個 darw 方法，能將一步的內容畫到頁面上
三、實現動畫效果，利用定時器，每隔一段時間，調用 darw 方法，畫出一步到頁面上 vue

實現這個效果仍是須要會一點點canvas的，好比知道怎麼畫個長方形，怎麼寫幾個字，換個顏色，若是不會的話，請到這裏去看看。算法

代碼vuex

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    #main {
      width: 600px;
      height: 200px;
      position: relative;
    }
  </style>
</head>

<body>

  <div id="main">
    <canvas id="myCanvas" width="600" height="200"> </canvas>
  </div>
  <script>
    function bubbleSort(arr) {
      // 冒泡排序算法，對數組進行排序，同時記錄每一步操做，保存在一個數組中
      function sort() {
        // virtualArr 用來存放 每個步內容的數組
        var virtualArr = [arr.slice()];
        var max = arr.length;
        for (var i = 0; i < max; i++) {
          var done = true;
          for (var j = 0; j < max - i; j++) {
            if (arr[j] > arr[j + 1]) {
              var temp = arr[j];
              arr[j] = arr[j + 1];
              arr[j + 1] = temp;
              done = false;
              virtualArr.push(arr.slice());
            }
          };
          if(done){
            break;
          };
        }
        return virtualArr;
      }

      // 繪畫，調用一次就畫出一步的圖像 
      function darw(arr){
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        // 獲取 canvas畫板的高度(肯定每一個長方形的 y 值時須要)
        var maxWidth = canvas.height;
        // 每一個長方形的寬度
        var width = 20;
        // 每一個長方形之間的間隔
        var space =20;

        // 清空畫布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 設置字體
        ctx.font = "18px serif";
        // 在頁面上，畫出一步的內容
        for (var i = 0; i < arr.length; i++) {
          ctx.fillStyle = '#61C5FE';
          // x 的 值等於 第i個長方形 * （長方形的寬+每一個長方形的間隔）
          // y 的 值等於  畫板的高度 - 第i的元素的值
          ctx.fillRect(i * (width+space), maxWidth - arr[i], width, arr[i]);
          ctx.fillStyle = '#240be4';
          // maxWidth - arr[i]-5，這裏多- 5，是爲了能讓文字，在長方形上方一點顯示，看的明顯些
          ctx.fillText(arr[i], i * (width+space), maxWidth - arr[i]-5);
        }
      }

      // 動畫 
      function animation() {
        // 調用sort 方法，返回包括每一步內容的數組
        var virtualArr = sort();
        var interval =500;
        // 遍歷獲得的數組，每隔500ms，調用darw 方法，畫出一步內容
        virtualArr.forEach((item, index) => {
            setTimeout(() => darw(item), index * interval);
        });  
      }

      animation();
    }
    var arr = [50,40,20,10,10];
    bubbleSort(arr);
  </script>
</body>
</html>

看上面的代碼，能看出，實現效果主要靠的是三個函數
一、sort，實現冒泡排序，返回包括每一步的數組
二、darw ，畫出一步的內容
三、animation ，實現動畫效果，定時調用darw 方法canvas

上面實現的是比較簡單的一版，下來看一版更加漂亮的，這是我在Codepen上找到的，改了些代碼後，是這樣了，看圖
segmentfault

這一版比上一版要好看不少，可是思路其實同樣，都是須要一個包含每一步內容的數組，遍歷數組，定時執行操做，實現動畫效果。不一樣的地方就在於，這一版把每一步分的更細了，每一步都有不一樣的類型。數組

這一版是使用vue作的，在vuex中的mutations定義了 6個方法來實現效果
一、reset，重置，
二、swap，交換，實現圖中兩個綠色div，進行位移，
三、activate，激活，實現圖中兩個紅色div，變成綠色，
四、deactivate，釋放，實現圖中兩個綠色div，恢復成紅色，
五、lock，鎖定，實現找到一個最大值後，將它變成藍色，
六、done，完成，返回 true 表示排序完成。
點這裏下載代碼，代碼里加了很詳細的註釋，很是容易看懂。函數