refactor: ♻️ refactor code

Author: chaoyen1111

js/main-en.js

@@ -19,16 +19,18 @@
   // 凱比機器人和中間的圓形 logo 定位
   const kebbi = document.getElementById('svgKebbi');
   const circle = document.querySelector('.circle');
+  function imgPosition() {
   const ww = content.offsetWidth;
   const wh = content.offsetHeight;
-  const ox = (ww - kebbi.offsetWidth) / 2;
-  const oy = (wh * 0.8 - kebbi.offsetHeight) / 2;
-  kebbi.style.left = `${ox}px`;
-  kebbi.style.top = `${oy}px`;
+  kebbi.style.left = `${(ww - kebbi.offsetWidth) / 2}px`;
+  kebbi.style.top = `${(wh * 0.8 - kebbi.offsetHeight) / 2}px`;
   circle.style.width = `${ww * 0.4}px`;
   circle.style.height = `${ww * 0.4}px`;
   circle.style.left = `${(ww - circle.offsetWidth) / 2}px`;
   circle.style.top = `${(wh * 0.8 - circle.offsetHeight) / 2}px`;
+  }
+
+  imgPosition();
 
   // 預設值
   let list = {
@@ -292,10 +294,10 @@
         // 邊界在中心的周圍 1/3 小車寬/高的距離
         const kxCenter = kx + carSize.width / 2;  // 車子中心點 x 座標
         const kyCenter = ky + carSize.height / 2; // 車子中心點 y 座標
-        const leftSide = ww * 0.5 - carSize.width / 3;  // 左邊界，小於這個值，判定車子移動到左邊
-        const rightSide = ww * 0.5 + carSize.width / 3; // 右邊界，大於這個值，判定車子移動到右邊
-        const topSide = oy + carSize.height / 6;        // 上邊界，小於這個值，判定車子移動到上面
-        const bottomSide = oy + 5 * carSize.height / 6; // 下邊界，小於這個值，判定車子移動到下面
+        const leftSide = content.offsetWidth * 0.5 - carSize.width / 3;  // 左邊界，小於這個值，判定車子移動到左邊
+        const rightSide = content.offsetWidth * 0.5 + carSize.width / 3; // 右邊界，大於這個值，判定車子移動到右邊
+        const topSide = (content.offsetHeight * 0.8 - kebbi.offsetHeight) / 2 + carSize.height / 6;        // 上邊界，小於這個值，判定車子移動到上面
+        const bottomSide = (content.offsetHeight * 0.8 - kebbi.offsetHeight) / 2 + 5 * carSize.height / 6; // 下邊界，小於這個值，判定車子移動到下面
 
         if (kxCenter < leftSide) {
           if (!send.left) {
@@ -353,8 +355,8 @@
       drag = false;
       kebbi.classList.remove('target');
       kebbi.classList.add('reset');
-      kebbi.style.left = `${ox}px`;
-      kebbi.style.top = `${oy}px`;
+      kebbi.style.left = `${(content.offsetWidth - kebbi.offsetWidth) / 2}px`;
+      kebbi.style.top = `${(content.offsetHeight * 0.8 - kebbi.offsetHeight) / 2}px`;
     }
 
     function updateCarSize() {
@@ -379,11 +381,6 @@
   }
 
   // 處理中間圖片跟隨視窗大小移動位置
-  window.addEventListener('resize', () => {
-    kebbi.style.left = `${(window.innerWidth - kebbi.offsetWidth) / 2}px`
-    kebbi.style.top = `${(window.innerHeight - kebbi.offsetHeight - document.getElementById('monsterBlock').offsetHeight) / 2}px`
-    circle.style.left = `${(window.innerWidth - circle.offsetWidth) / 2}px`;
-    circle.style.top = `${(content.offsetHeight * 0.8 - circle.offsetHeight) / 2}px`;
-  });
+  window.addEventListener('resize', imgPosition);
 
 }();

js/main.js

@@ -19,16 +19,18 @@
   // 凱比機器人和中間的圓形 logo 定位
   const kebbi = document.getElementById('svgKebbi');
   const circle = document.querySelector('.circle');
-  const ww = content.offsetWidth;
-  const wh = content.offsetHeight;
-  const ox = (ww - kebbi.offsetWidth) / 2;
-  const oy = (wh * 0.8 - kebbi.offsetHeight) / 2;
-  kebbi.style.left = `${ox}px`;
-  kebbi.style.top = `${oy}px`;
-  circle.style.width = `${ww * 0.4}px`;
-  circle.style.height = `${ww * 0.4}px`;
-  circle.style.left = `${(ww - circle.offsetWidth) / 2}px`;
-  circle.style.top = `${(wh * 0.8 - circle.offsetHeight) / 2}px`;
+  function imgPosition() {
+    const ww = content.offsetWidth;
+    const wh = content.offsetHeight;
+    kebbi.style.left = `${(ww - kebbi.offsetWidth) / 2}px`;
+    kebbi.style.top = `${(wh * 0.8 - kebbi.offsetHeight) / 2}px`;
+    circle.style.width = `${ww * 0.4}px`;
+    circle.style.height = `${ww * 0.4}px`;
+    circle.style.left = `${(ww - circle.offsetWidth) / 2}px`;
+    circle.style.top = `${(wh * 0.8 - circle.offsetHeight) / 2}px`;
+  }
+
+  imgPosition();
 
   // 預設值
   let list = {
@@ -287,15 +289,14 @@
         const kx = kebbi.offsetLeft; // 車子 left
         const ky = kebbi.offsetTop;  // 車子 top
         const carSize = getCarSize();
-
         // 注意，小車一開始的中心點 y 座標，不等於畫面的中心點 y 座標。
         // 邊界在中心的周圍 1/3 小車寬/高的距離
         const kxCenter = kx + carSize.width / 2;  // 車子中心點 x 座標
         const kyCenter = ky + carSize.height / 2; // 車子中心點 y 座標
-        const leftSide = ww * 0.5 - carSize.width / 3;  // 左邊界，小於這個值，判定車子移動到左邊
-        const rightSide = ww * 0.5 + carSize.width / 3; // 右邊界，大於這個值，判定車子移動到右邊
-        const topSide = oy + carSize.height / 6;        // 上邊界，小於這個值，判定車子移動到上面
-        const bottomSide = oy + 5 * carSize.height / 6; // 下邊界，小於這個值，判定車子移動到下面
+        const leftSide = content.offsetWidth * 0.5 - carSize.width / 3;  // 左邊界，小於這個值，判定車子移動到左邊
+        const rightSide = content.offsetWidth * 0.5 + carSize.width / 3; // 右邊界，大於這個值，判定車子移動到右邊
+        const topSide = (content.offsetHeight * 0.8 - kebbi.offsetHeight) / 2 + carSize.height / 6;        // 上邊界，小於這個值，判定車子移動到上面
+        const bottomSide = (content.offsetHeight * 0.8 - kebbi.offsetHeight) / 2 + 5 * carSize.height / 6; // 下邊界，小於這個值，判定車子移動到下面
 
         if (kxCenter < leftSide) {
           if (!send.left) {
@@ -353,8 +354,8 @@
       drag = false;
       kebbi.classList.remove('target');
       kebbi.classList.add('reset');
-      kebbi.style.left = `${ox}px`;
-      kebbi.style.top = `${oy}px`;
+      kebbi.style.left = `${(content.offsetWidth - kebbi.offsetWidth) / 2}px`;
+      kebbi.style.top = `${(content.offsetHeight * 0.8 - kebbi.offsetHeight) / 2}px`;
     }
 
     function updateCarSize() {
@@ -379,11 +380,6 @@
   }
 
   // 處理中間圖片跟隨視窗大小移動位置
-  window.addEventListener('resize', () => {
-    kebbi.style.left = `${(window.innerWidth - kebbi.offsetWidth) / 2}px`
-    kebbi.style.top = `${(window.innerHeight - kebbi.offsetHeight - document.getElementById('monsterBlock').offsetHeight) / 2}px`
-    circle.style.left = `${(window.innerWidth - circle.offsetWidth) / 2}px`;
-    circle.style.top = `${(content.offsetHeight * 0.8 - circle.offsetHeight) / 2}px`;
-  });
-  
+  window.addEventListener('resize', imgPosition);
+
 }();