01｜程式放哪裡、如何執行

HTML、CSS、JavaScript 分別做什麼？

HTML 放畫布與按鈕，CSS 決定外觀，JavaScript 處理操作、計算與繪圖。遊戲的 JavaScript 放在頁面底部的 <script> 裡，因此執行時畫布已經存在。

先取得元素，再操作它

document 代表目前網頁；getElementById() 用 id 找元素。變數名稱可自行取，但引號內的 id 必須與 HTML 一致。

ctx 是用來在畫布上畫圖的工具，不是 HTML 元素。// 是單行註解，/* … */ 是區塊註解。

const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height; // 同一行宣告兩個常數

第一個互動：按鈕改文字

下面是可以另存為 HTML 的完整小例子。textContent 設定純文字；addEventListener 登記「事件發生時要做的事」。函式寫法在單元 4 解釋。

<!doctype html>
<html lang="zh-Hant"><meta charset="utf-8">
<button id="hello">按我</button><p id="message">尚未按下</p>
<script>
const button = document.getElementById('hello');
const message = document.getElementById('message');
button.addEventListener('click', () => {
  message.textContent = 'Hello！';
});
</script></html>

操作看看

尚未按下

常見錯誤與除錯

找不到 id 時會得到 null，不能接著操作它。名稱要完全相同，也要確認程式在元素建立後才執行。

按 F12 開啟開發者工具的 Console，查看錯誤行號；可加入 console.log(W, H); 查看數值。若把程式移到外部檔，使用下列載入方式。

<script src="game.js" defer></script>

動手修改

把按鈕按下後的文字改成「準備開始遊戲！」。

message.textContent = '準備開始遊戲！';