將球移動到球場上 - 現代 JavaScript 教學

返回課程

將球移動到球場上，並點選。如下所示

需求

球的中心應在點選時出現在指標下方（如果可能，不要超出球場邊緣）。
歡迎使用 CSS 動畫。
球不得超出球場界線。
當頁面捲動時，任何東西都不應該中斷。

註解

程式碼也應該適用於不同的球和場地大小，不受任何固定值約束。
使用屬性 event.clientX/event.clientY 來取得點擊座標。

開啟一個沙盒來執行任務。

首先，我們需要選擇一個定位球的方法。

我們無法對它使用 position:fixed，因為捲動頁面會將球從場地移開。

所以我們應該使用 position:absolute，並讓 field 本身定位，以使定位真正穩固。

然後，球將相對於場地定位

          #field {
  width: 200px;
  height: 150px;
  position: relative;
}

#ball {
  position: absolute;
  left: 0; /* relative to the closest positioned ancestor (field) */
  top: 0;
  transition: 1s all; /* CSS animation for left/top makes the ball fly */
}
        

接下來，我們需要指定正確的 ball.style.left/top。它們現在包含相對於場地的座標。

以下是圖片

我們有 event.clientX/clientY – 點擊的相對於視窗的座標。

若要取得點擊的相對於場地的 left 座標，我們可以減去場地的左邊緣和邊框寬度

let left = event.clientX - fieldCoords.left - field.clientLeft;

通常，ball.style.left 表示「元素（球）的左邊緣」。因此，如果我們指定該 left，則球的邊緣（而非中心）會在滑鼠游標下方。

我們需要將球向左移動一半寬度，向上移動一半高度，才能使其置中。

因此，最後的 left 會是

          let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2;
        

垂直座標使用相同的邏輯計算。

請注意，當我們存取 ball.offsetWidth 時，必須知道球的寬度/高度。應該在 HTML 或 CSS 中指定。

在沙盒中開啟解決方案。