製作遊戲系列：從 MVP 到 Vue 介紹
在開始這個影片之前，建議你先觀看這個系列的第一部分，並為你自己的遊戲進行預規劃。在這個影片中，我假設你至少對 CSS 和 JavaScript 有一些了解。但如果你沒有，這個教學的 1.5 部分就是為此而設的。
認識 MVP（最小可行產品）
歡迎來到這個系列的下一部分。我們將討論 MVP，即最小可行產品。這基本上就是我們現在要製作的東西。它是一種處理程式碼的敏捷方式。如果你因為某種原因意識到你不喜歡你的遊戲方法，你可以很容易地改變它，因為你只做了最小可行產品。
專案架構搭建
我們現在不會做太多的 UI，基本上只是一些基本的布局，不會太花哨。我們將專注於設置視圖和基本遊戲。
-
首先，我們需要
index.html。 -
然後，我們將創建我們的腳本資料夾，實際上它被稱為
JS。 -
接著，創建一個 CSS 資料夾。
-
在
JS資料夾中，我們將這個檔案命名為index.js，這將是我們的主應用程式所在的地方。 -
在 CSS 資料夾中，我們將創建
styles.css。
遊戲主題與基本設定
我之前提到過我的想法，你現在應該也有自己的想法了。我想到的遊戲主題是「行動錢幣」。在遊戲中，你是一家製作行動增量的公司，你需要從中賺取盡可能多的錢。
-
我們在
index.html中添加遊戲標題，這將是網頁的標題。 -
接下來，我們需要導入我們的樣式表和
index.js。
引入 Vue.js
我們需要獲取 Vue.js。你可以在 Google 上搜索「Vue 入門」。
-
你可以選擇複製並粘貼 CDN 連結到你的程式碼中，這樣你就有了 Vue。
-
但我更喜歡下載檔案並將其添加到你的電腦中，這樣你就不依賴他們的伺服器了。我們去下載網址，複製連結，然後在
JS資料夾中創建一個vue.js檔案，粘貼內容並保存。 -
然後在
index.html中導入vue.js。
創建 Vue 應用
我們需要創建我們的主容器，它需要有一個 ID，我們將其命名為 app。
- 在
index.js中，我們需要先導入 Vue，然後創建我們的應用。
import Vue from './vue.js';
const app = new Vue({
el: '#app',
data: {
player: {
money: 10,
marketing: [],
artists: [],
lootBoxTeam: []
}
},
methods: {}
});
設定玩家初始變數
為了保持 index.js 的程式碼乾淨，我們將為玩家創建另一個檔案。我們將把所有與玩家有關的東西保存到這個玩家物件中，這樣我們就可以很容易地保存它。
-
玩家有初始金錢 10。
-
我們有三個團隊：行銷、藝術家和開箱團隊。每個團隊都有一個空陣列。
-
我們為每個團隊的成員設定一些屬性，如成本、乘數和數量。
創建遊戲界面
我們將創建我們的主容器，上面是貨幣容器，下面是生產者容器。
-
在貨幣容器中，有三個團隊的貨幣顯示。
-
在生產者容器中，有三個團隊的生成器。
使用 Vue 指令渲染界面
我們可以使用 Vue 的 v-for 指令來循環渲染每個團隊的生成器。
<div v-for="(marketing, index) in player.marketing" :key="index" class="marketing-generator">
<h3>{{ marketing.name }}</h3>
<span class="amount">{{ marketing.amount }}</span>
<span class="multiplier">{{ marketing.multiplier }}</span>
<span class="cost">{{ marketing.cost }}</span>
<button @click="buyMarketingGenerator(index)">購買</button>
</div>
實現購買功能
我們需要在 Vue 的 methods 中實現購買功能。
methods: {
buyMarketingGenerator(index) {
if (this.player.money < this.player.marketing[index].cost) {
return;
}
this.player.money -= this.player.marketing[index].cost;
this.player.marketing[index].amount++;
this.player.marketing[index].cost = this.player.marketing[index].cost * (1 + 0.25 * (this.player.marketing[index].tier + 1));
}
}
創建遊戲循環
我們需要創建一個遊戲循環來更新遊戲狀態。
function gameLoop(app) {
const diff = (Date.now() - app.player.lastUpdate) / 1000;
app.player.money += app.player.marketing[0].amount * app.player.marketing[0].cost * diff;
app.player.lastUpdate = Date.now();
}
app.mounted = function () {
this.player.lastUpdate = Date.now();
setInterval(() => gameLoop(this), 50);
};
格式化數字
我們需要創建一個格式化函數來格式化遊戲中的數字。
function format(amount) {
const parts = amount.toString().split('.');
const intPart = parts[0];
const decPart = parts[1] || '';
if (intPart.length < 3) {
return amount.toFixed(2);
} else {
const e = Math.floor(Math.log10(amount));
const coefficient = amount / Math.pow(10, e);
return coefficient.toFixed(2) + 'e' + e;
}
}
app.methods.format = format;
完成遊戲界面
我們需要複製並粘貼生成器的代碼，為其他兩個團隊創建生成器。
-
我們需要修改購買按鈕的方法名稱。
-
我們需要測試遊戲，確保一切正常。
總結
這個影片主要是 Vue 的介紹，我們製作了一個簡單的遊戲，數字可以正常增加。但這個遊戲還有很多需要改進的地方，比如界面美化、更多的遊戲功能等。希望你喜歡這個影片，記得吃飯和繁榮。再見！
{# 
{# 
{# 
{#