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) {
// 程式碼
}
紅色警告
現在,若無法負擔,讓按鈕變為紅色。