02｜變數、物件與陣列

先認識資料

let 用於之後可能重新指定的變數；const 不可重新指定。但 const 指向的物件或陣列，內部資料仍可修改。

常見資料有：數字 320、字串 'playing'、布林值 true / false。

let state = 'playing';
state = 'win';
const keys = {};
keys['ArrowLeft'] = true; // 修改物件內容，沒有重新指定 keys

物件：把同一個東西的資料放一起

x、y 是位置；w、h 是寬高；speed 是速度。冒號左邊是屬性名稱，右邊是值。

cannon.x 讀取砲台的 x 座標；也能用 cannon['x']。事件中的 keys[e.key] 則使用 e.key 的內容當作屬性名稱。

cannon = { x: W / 2, y: H - 60, w: 50, h: 56, speed: 320 };
cannon.x = 180;
cannon.speed = 400;

陣列：存放多個東西

陣列從編號 0 開始。遊戲把每架敵機存成一個物件，再把物件放入 enemies 陣列。

enemies = [
  { x: 100, alive: true },
  { x: 250, alive: true }
];
enemies[0].x = 120; // 第一架敵機
bullets = [];       // 空陣列，稍後才新增子彈

表單輸入通常是字串

.value 取得輸入內容。'10' + '20' 會串接成 '1020'；先用 Number() 轉成數字才相加。空白需先檢查，因為 Number('') 會得到 0。

const total = Number(inputA.value) + Number(inputB.value);

操作看看

按一下查看字串與數字的差別。

動手修改

讓砲台移動更快，並把第一架敵機改成已消失。

cannon.speed = 450;
enemies[0].alive = false;