JavaScript 與 CSS 基礎教學：簡易遊戲製作
大家好，歡迎來到 1.5 集，這次我們將進行 JavaScript 和 CSS 的基礎教學。這會是一個比較隨興的教學，我會示範如何不使用任何框架來創建一個超級簡單的遊戲。在下一集（第 2 集），我們將使用框架來製作一個遊戲。
準備工作
首先，你需要一個 IDE（整合開發環境）來編寫程式碼。我強烈建議使用 Visual Studio Code。你可能已經知道如何 Google 搜尋並下載它。
接下來，創建一個資料夾，然後在 Visual Studio Code 中打開該資料夾。我們將需要三個基本檔案：
-
index.html -
main.js -
styles.css
index.html 將會是放置元素的地方，main.js 將會是遊戲的功能，而 styles.css 將會是遊戲的外觀。
建立基本檔案
首先，我們從 index.html 開始。Visual Studio Code 有一個非常有用的功能叫做 Emmet。如果你輸入 ! 或 doc，然後按下 Enter，它會自動生成 HTML 的基本結構。你可以在 <title> 標籤中為網頁命名，例如 "我的遊戲"。
然後，你需要將 main.js 和 styles.css 導入到 index.html 中，因為它們還沒有被導入。可以使用 <link> 標籤導入樣式表：
<link rel="stylesheet" href="styles.css">
在底部，我們需要添加 <script> 標籤來導入 JavaScript 檔案：
<script src="main.js"></script>
創建點擊遊戲
現在我們已經準備好了，我們來製作一個超級簡單的點擊遊戲。基本上，點擊一個按鈕，數字就會增加。
首先，創建一個按鈕：
<button>點擊我</button>
然後，創建一個 <div> 元素來顯示點擊次數：
<div>點擊次數：0</div>
我們需要為這個 <div> 元素指定一個 ID，以便稍後可以從 JavaScript 訪問它：
<div id="clicks">點擊次數：0</div>
JavaScript 程式碼
在 main.js 中，我們需要添加一個變數來追蹤點擊次數，並將其初始化為 0：
let clicks = 0;
然後，我們創建一個函數，該函數將點擊次數增加 1：
function increaseClicks() {
clicks += 1;
}
在 index.html 中，我們需要將這個函數連結到按鈕的 onclick 事件：
<button onclick="increaseClicks()">點擊我</button>
接下來，我們需要在每次點擊時更新 <div> 元素中的點擊次數。在 increaseClicks() 函數中，添加以下程式碼：
document.getElementById('clicks').textContent = '點擊次數：' + clicks;
簡單的累積增長
現在我們已經做了一個簡單的點擊遊戲。我們來做一些更複雜的事情。首先，移除部分程式碼，以便開始建立新的遊戲。
我們需要一個東西來顯示我們的貨幣。創建一個 <div> 元素，並給它一個 ID：
<div id="currency">你有 10 元</div>
然後，創建一個容器來放置產生器或按鈕。我們將給這個容器一個類別：
<div class="generators-container"></div>
在容器中，我們將添加十個產生器。
陣列與迴圈
我們需要追蹤我們的金錢和產生器。我們將使用陣列來保存產生器。陣列基本上是變數的列表。
let generators = [];
我們將使用迴圈來填充陣列。這是一個 for 迴圈的例子：
for (let i = 0; i < 10; i++) {
// 程式碼
}
在迴圈中，我們將創建產生器。
物件與產生器
產生器將是一個物件。物件有點像列表，但對於每個變數，你都有一個鍵。
let generator = {
cost: 10,
amount: 0,
multiplier: 1
};
我們將把這個產生器推入到 generators 陣列中：
generators.push(generator);
更新使用者介面
我們需要一個函數來更新圖形使用者介面 (GUI)。
function updateGUI() {
// 程式碼
}
我們需要為每個產生器指定一個 ID，以便我們知道我們要更新哪個產生器。
我們將使用另一個 for 迴圈來更新所有產生器。
格式化數字
我們需要一個簡短的格式化函數，因為我們不想看到巨大的數字。
function format(number) {
// 程式碼
}
產生器生產
我們將創建一個函數，使較低層級的產生器產生更高的層級。
function productionLoop(diff) {
// 程式碼
}
主迴圈
我們將創建我們的主迴圈。
function mainLoop() {
// 程式碼
}
CSS 樣式
現在我們已經做完了 JavaScript 程式碼，我們將轉到 CSS 樣式。
我們將首先製作產生器類別。
.generator {
/* 樣式 */
}
Flexbox 是一個值得學習的工具。
購買產生器
現在來設計當點擊產生器時會發生的事。
function buyGenerator(index) {
// 程式碼
}
紅色警告
現在，若無法負擔，讓按鈕變為紅色。
{# 
{# 
{# 
{#