バブルソートなどのやり方

クリックしたとこのx、y座標を取って来て
x座標を小さい順に並べて配列に入れて、そこでx座標に対応するy座標を配列に入れる方法がわかりません。
よろしかったら教えて頂きたいです。

  let target = document.getElementById('canvasInput');
      x_array = new Array(4);
      y_array = new Array(4);
     k = 0;
  target.addEventListener('click', function (e){
      var offsetX0 = e.offsetX; // =>要素左上からのx座標
      var offsetY0 = e.offsetY; // =>要素左上からのy座標
      x_array[k] = offsetX0;
      y_array[k] = offsetY0;
      k++;
      console.log(x_array)
      console.log(y_array)

      if (k == 4) {
        i = 0, j = 0, temp = 0;
        for (i = 0; i < 3; i++) {
          for (j = 3; j > i; j--) {
            if (x_array[j - 1] > x_array[j]) {
              temp = x_array[j - 1];
              x_array[j - 1] = x_array[j];
              x_array[j] = temp;
              // if (y_array[j - 1] > y_array[j]) {
              //   temp = y_array[j - 1];
              //   y_array[j - 1] = y_array[j];
              //   y_array[j] = temp;
              }
            }
          }
        }

行動規範の内容に同意します

回答1件

ベストアンサー

js
1              temp = x_array[j - 1];
2              x_array[j - 1] = x_array[j];
3              x_array[j] = temp;

↑ここでyも一緒に入れ替えればいいような気がするのですが、ダメですか？

js
1              temp = x_array[j - 1];
2              temp_y = y_array[j - 1];
3              x_array[j - 1] = x_array[j];
4              y_array[j - 1] = y_array[j];
5              x_array[j] = temp;
6              y_array[j] = temp_y;