觀看前的建議
如果你還沒觀看過之前的部分，建議先看完再看這一集。在前一部分，我們製作了視圖基礎，但讓我困擾的是有很多重複的代碼，這是不好的代碼。
本集目標
在本集中，我們將優化代碼，實際上實現其他生產層或其他列，並製作「購買新層」按鈕。本集不會進行任何佈局更改，但遊戲將更具可玩性。我已經編寫了部分代碼，以避免在製作視頻時出現任何奇怪的問題。我基本上已經完成了，但現在為了視頻的目的，我會再做一次。
創建 Generator 類
首先，我們有一個 Generator 對象，但我們想為它創建一個類，這樣就不必寫很多重複的代碼。我們將創建一個 Generator 類。
在原始視頻中，我對類的工作原理解釋得不好，所以我添加了這部分來進一步解釋。基本上，類有點像對象，但不同之處在於你可以輕鬆地創建新的類。例如，這裡有一個 Car 類，你可以通過 new Car 創建一輛新車，然後給它傳遞參數。在視頻中，我使用了 props，它基本上是一個對象，但這裡我們只傳遞一個字符串，即汽車的名稱。所有汽車都從 40 升汽油和 100,000 公里里程開始。這裡有一個下劃線，基本上是一種安全或隱私措施，以防止原始內容被直接修改，但在視頻中我沒有這樣做。如果你想這樣做，你可以，但我沒有這樣做，因為你需要為它寫這些 getters 和 setters，它們是這樣工作的。你還可以為類定義函數，例如這裡的 drive 函數，它可以行駛一定的公里數，如果燃料不足，它會返回並不做任何事情，然後從汽車中減去一些燃料並增加里程。你基本上可以這樣調用它：將汽車保存到一個變量中，然後調用變量點函數名稱，你可以這樣獲取屬性。類有一個原生構造函數，它接受 props，這些 props 基本上是我們給它的其他 props，所以 this.name = props.name，其他的也是一樣。
添加 getter 和購買函數
接下來，我們將添加一個 getter，用於判斷是否可以購買。get canBuy 函數將檢查成本是否小於或等於玩家的金錢。然後，我們需要一個購買函數，用於購買這些生成器之一。如果可以購買，我們將減少玩家的金錢。
處理乘數增加
我們還可以實現當購買 25 或 100 個時乘數增加的功能。如果購買的數量能被 100 整除，乘數將乘以 5；如果能被 25 整除，乘數將乘以 3。
計算每秒生產量
我們需要計算每秒的生產量。生產量將是數量乘以乘數，如果是後面的層級，我們將除以 5，以防止後面的層級一開始就生產得太快。
創建生成器的函數
我們需要創建一個函數來生成這些生成器。這個函數將接受一個參數 type，用於表示生成器屬於哪一列（營銷、藝術家或藍盒團隊）。我們還需要一個函數來根據類型返回列。
生成生成器名稱
我們還需要一個函數來生成生成器的名稱。我們將使用 switch 語句根據類型選擇不同的名稱列表。如果名稱用完了，我們將在名稱後面加上羅馬數字。
創建視圖組件
我們將為生成器創建一個視圖組件。我們將在 js 文件夾中創建一個子文件夾 components，並在其中創建一個名為 generateForPurchase 的組件。視圖組件需要一個模板，我們可以使用反引號來創建多行字符串。
添加到索引文件
我們需要將視圖組件添加到索引文件中。我們還需要傳遞生成器作為屬性。
製作生產循環
現在我們只有第一個營銷生成器在生產金錢，我們希望第二個營銷生成器生產第一個營銷生成器。我們將製作一個函數來生產前一個生成器。
製作添加生成器按鈕
我們將製作一個按鈕，用於添加更多的層級。我們可以將其製作成一個組件。按鈕將檢查玩家是否有足夠的資源來購買新的生成器。
測試和調試
我們需要測試我們的代碼，看看是否有任何錯誤。我們可能會遇到一些問題，例如無法讀取未定義的屬性或未註冊組件。我們需要解決這些問題，直到遊戲能夠正常運行。
下一集計劃
在下一集中，我們將改進遊戲的可用性。我們可能會將按鈕合併成一個大按鈕，使其更漂亮，並根據是否可以購買更改顏色。我們還可能添加一次購買多個的功能，並使遊戲更具美感和可玩性。
{# 
{# 
{# 
{#