Video thumbnail for So you want to make an incremental - Part 1.5: Basic JS and CSS

基礎JavaScript與CSS教學:從零開始製作簡單增量遊戲(第一部分:1.5)

Summary

Language:

Quick Abstract

想學遊戲開發?這個 JavaScript 和 CSS 基礎教學將帶你從零開始,打造一個簡單的點擊遊戲!本摘要將涵蓋使用 Visual Studio Code 建立 HTML、CSS 和 JavaScript 文件,以及實作點擊事件、變數追蹤、和遊戲邏輯。輕鬆入門,為未來使用框架開發遊戲打下堅實基礎。

  • 快速上手: 使用 HTML、CSS 和 JavaScript 創建一個簡單的遊戲。

  • 關鍵檔案: 建立 index.htmlmain.jsstyles.css 三個檔案來控制遊戲結構、功能和外觀。

  • 點擊事件: 設定按鈕點擊後增加計數器的功能。

  • 貨幣系統: 建立貨幣顯示介面,以及自動產生貨幣的機制。

  • 物件導向: 使用 JavaScript 物件來表示產生器,包含成本、數量和增益效果等屬性。

  • 樣式調整: 使用 CSS 美化遊戲介面,包括按鈕樣式、文字對齊和顏色設定。

  • 動態更新: 使用 JavaScript 函數來實時更新遊戲介面,例如貨幣數量和產生器狀態。

  • 簡易經濟: 設計產生器的成本和收益,讓玩家可以逐步提升產能。

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.jsstyles.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) {
  // 程式碼
}

紅色警告

現在,若無法負擔,讓按鈕變為紅色。

Was this summary helpful?