七夕送礼：为男神亲手打造跳动的JS冒泡排序动画！

2024-01-27 08:39:03

七夕节献礼：用JS冒泡排序算法为男神制造怦然心动的动画！

七夕佳节，鹊桥相会，在浪漫的节日里，怎能少了用爱与代码表达心意的礼物？对于程序员男神来说，一份会“动”的算法动画，无疑是七夕节最令人心动的惊喜。我们用JavaScript，为男神亲手打造跳动的冒泡排序动画，让他在算法的律动中感受你的爱意。

冒泡排序算法：

冒泡排序是一种简单的排序算法，它的原理是：比较相邻的两个元素，如果前一个元素大于后一个元素，则交换这两个元素的位置。重复这个过程，直到没有元素需要交换为止。

JavaScript冒泡排序动画：

function bubbleSort(arr) {
  let len = arr.length;
  for (let i = 0; i < len - 1; i++) {
    for (let j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        // 交换元素
        let temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}

// 创建一个无序数组
let arr = [5, 3, 1, 2, 4];

// 调用冒泡排序算法
let sortedArr = bubbleSort(arr);

// 将排序过程可视化
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const width = canvas.width;
const height = canvas.height;

// 计算每个元素的宽度
const elementWidth = width / arr.length;

// 绘制无序数组
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, width, height);
for (let i = 0; i < arr.length; i++) {
  ctx.fillStyle = 'blue';
  ctx.fillRect(i * elementWidth, height - arr[i] * (height / 10), elementWidth, arr[i] * (height / 10));
}

// 逐步执行冒泡排序算法并绘制动画
for (let i = 0; i < len - 1; i++) {
  for (let j = 0; j < len - 1 - i; j++) {
    if (arr[j] > arr[j + 1]) {
      // 交换元素
      let temp = arr[j];
      arr[j] = arr[j + 1];
      arr[j + 1] = temp;

      // 绘制交换后的数组
      ctx.fillStyle = 'white';
      ctx.fillRect(0, 0, width, height);
      for (let k = 0; k < arr.length; k++) {
        ctx.fillStyle = 'blue';
        ctx.fillRect(k * elementWidth, height - arr[k] * (height / 10), elementWidth, arr[k] * (height / 10));
      }
    }
  }
}