Build an Incremental Game with Vue.js: MVP Tutorial (Part 2)

Creating an Incremental Game: From MVP to Basic Gameplay

This article outlines the initial steps in developing an incremental game, focusing on creating a Minimum Viable Product (MVP) using Vue.js, HTML, and CSS. It assumes some prior knowledge of CSS and JavaScript.

MVP Philosophy and Project Setup

The core idea is to build an MVP, allowing for easier adjustments to the game's approach if needed. The initial focus is on basic layout and core game mechanics rather than extensive UI design.

The project structure includes:

• index.html: The main HTML file.

• js/index.js: Where the main Vue.js application logic resides.

• css/stars.css: For styling the game.

HTML Structure and Theme

The HTML file uses a basic document structure, which can be quickly generated using Emmet in Visual Studio Code (typing "doc" and pressing Enter). The game's theme is "Mobile Money," where the player manages a mobile incremental game company and aims to maximize profits.

The HTML includes:

• Title set to "Mobile Money".

• Link to the stars.css stylesheet.

• Import of Vue.js.

• A main container with the ID "app" to house the Vue application.

Integrating Vue.js

Vue.js is integrated by either directly copying the CDN link or, preferably, downloading the Vue.js file and including it locally to avoid dependency on external servers. The downloaded file is then linked in the index.html file.

Vue.js App Initialization

The Vue.js application is initialized within index.js using the following structure:

const app = new Vue({
    data: {
        // Data variables will go here
    },
    methods: {
        // Functions will go here
    },
    el: '#app' // Specifies the HTML element with ID "app" as the mounting point
});

The data object will hold the game's variables, methods will contain the functions, and el specifies the HTML element where the app will be mounted.

Defining Game Data: Player Object

To keep the code organized, player-related data is stored in a separate player object. This object includes:

• money: The player's current money, initialized to 10.

• Marketing Team: An array of Marketing Team members

• Artist Team: An array of Artist Team members

• Loot Box Team: An array of Loot Box Team members

For Marketing Team, Artist Team and Loot Box Team:

• cost: The cost of the associated generator.

• multiplier: A multiplier value initialized to 1.

• amount: The starting amount of associated generator, initialized to zero.

This player object is then set as a variable within the Vue.js data object.

Structuring the Game Interface

The game interface is divided into containers:

• Currency Container: Displays the available resources (money, graphics, etc.).

• Producers Container: Displays the available generators (marketing, artists, loot box team).

The currency container has separate sections for marketing, artists, and loot box team currencies. Similarly, the producers container has sections for marketing generators, artists generators, and loot box team generators.

Creating a Generator Element

A Vue.js v-for loop is used to generate elements for each generator in the player.marketing array. Inside each generator element, data such as cost, name, and multiplier are displayed using Vue.js's data binding syntax ({{ }}).

For example:

<div class="marketing generator">
    <span class="marketing name">{{ marketing.name }}</span>
    <span class="amount">Amount: {{ marketing.amount }}</span>
    <span class="multiplier">Multiplier: {{ marketing.multiplier }}</span>
    <span class="cost">Cost: {{ marketing.cost }}</span>
</div>

Basic Styling

Basic CSS styling is applied to the containers and elements to create a functional layout. This includes using display: flex for flexible arrangement, setting widths and heights, and adding borders for visual clarity. The CSS focuses on creating a basic structure for the MVP and is intended to be improved upon later.

Implementing the Buy Functionality

A "Buy" button is added to each generator element. Clicking this button triggers a buyMarketingGenerator method in the Vue.js instance. The index of the generator is passed to the method using $index.

The buyMarketingGenerator method checks if the player has enough money to purchase the generator. If so, it deducts the cost from the player's money, increases the generator's amount, and updates the UI. The generator cost increases after each purchase.

Game Loop Implementation

A game loop is implemented using setInterval to continuously update the game state. This loop calculates the amount of currency generated based on the amount and multiplier of the generators. The lastUpdate variable and a time difference calculation are used to ensure consistent generation rates, regardless of frame rate fluctuations.

Number Formatting

A simple formatting function is introduced to display large numbers in a more readable format (e.g., using abbreviations like "K," "M," "B").

Expanding to Other Generators

The code for the marketing generator is duplicated and adapted to create artist and loot box team generators. This includes updating the data bindings, method calls, and array names to reflect the different generator types.

Next Steps

The article concludes by acknowledging that the project is more of a Vue.js introduction than a polished MVP. Future steps include adding more generators, refining the UI, and implementing additional game mechanics.