javascript - 1 - Key Move Ball

前篇: javascript - 0 - github.io - hello world

--

小技巧: 如果 javascript 沒有更新, 可以清除瀏覽器快取資料

--

程式網頁: https://neojou.github.io/src/js-move_ball.html

接續前篇, 這次我們畫一個小球, 按鍵時小球會移動, 但小球不會超出容器範圍. 

首先我們用 CSS 畫一個小球

js-move_ball.html

在 style 這邊有用 CSS 畫一個 container 容器, 和一個藍色小球 ball

在 javascript 中

key_move_ball.js

1. 用 document.getElementById() 來得到 容器的長寬

   const containerWidth = document.getElementById("container").offsetWidth;

   const containerHeight = document.getElementById("container").offsetHeight;

2.  用 document.addEventListener() 來捕捉按鍵事件.

    event key 和 event code 的差別可以參考這篇 - 網誌

3. 設定球的位置: 

    const ball = document.getElementById("ball");

    ball.style.left = ballX + "px";

    ball.style.top = ballY + "px";

    style left 和 top 為 字串型態, 所以末尾加上 px

這樣就可以移動又不會超出邊界了