Incremental Game Dev Part 3: Classes, Components & Generators in Javascript

Improving an Incremental Game: Code Refactoring and Feature Implementation

This article details the process of enhancing an incremental game by refactoring code, implementing production layers, and adding a "buy new layer" button. While no layout changes are made in this iteration, the game becomes significantly more playable. A pre-coded version was created to avoid potential issues during the video recording, but the process is being replicated and explained here.

Refactoring the Generator Code

The initial generator implementation involved repetitive code. To address this, the generator is transformed into a class.

• Creating a Generator Class: A Generator class is created to encapsulate generator properties and functions. This avoids code duplication and promotes better organization.

• Understanding Classes: A class serves as a blueprint for creating objects. New instances of a class (e.g., new Car()) can be easily generated. Classes can have properties (like name, gasoline, mileage) and methods (functions) associated with them (like drive()). The underscore prefix on properties (e.g., _gasoline) conventionally indicates a degree of privacy.

• Class Constructor: The class constructor takes properties (props) as input and initializes the generator's attributes (e.g., this.name = props.name).

• canBuy Getter: A getter is added to determine if a generator can be purchased (get canBuy). It checks if the generator's cost is less than or equal to the player's money.

• buy Function: A buy function is implemented to handle the purchase of a generator. If the player can afford it, the function deducts the cost, increases the generator's amount, and adjusts the multiplier based on the number of generators owned. Multipliers increase production: after every 25 generators are purchased, production is multiplied by 3. The multiplier is multiplied by 5 after every 100 generators are purchased.

• productionPerSecond Calculation: This calculates the production rate of a generator. It multiplies the generator's amount by its multiplier. A division factor is applied to later-tier generators to prevent them from producing too quickly at the start. Each generator tier increases the divisor by a factor of 5, beginning at 5.

• createGenerator Function: This function generates new generators of a specific type. It takes a tier and a type (e.g., "marketing", "artist", "Load Box Team") as parameters.

  • getColumnFromType Function: Determines the column number based on the generator type using a switch statement. Marketing=1, Artist=2, and Load Box Team=3.

  • generateGeneratorName Function: Generates a unique name for the generator based on its type. When all names in the relevant array are exhausted, a Roman numeral is added to differentiate iterations of the same generator.

Creating a Generator Purchase Component

To further reduce redundant code, a view component is created for the generator.

• Creating generatorPurchase.vue: A new Vue component, generatorPurchase.vue, is created.

• Component Template: The template includes the generator's name, cost, and a "Buy" button.

• Props: The component accepts a generator prop, which contains the generator's data.

• Integrating the Component: The generatorPurchase component is integrated into the main view, replacing the previous HTML markup.

Implementing the Production Loop

This section focuses on making each generator produce resources for the next.

• producePreviousGenerator Function: This function iterates through the generators and makes each generator produce resources for the next tier. It starts from the second tier and updates the amount of the previous generator based on the current generator's production per second.

• Applying Production: This function is called for each type of generator (marketing, artist, load box), linking their production. Marketing produces money, Artists produce graphics, and Load Box Team accelerates the other two generators based on the number of Load Box Team generators.

Implementing the "Add Generator" Button

Adds functionality for purchasing new layers of generators.

• addGeneratorButton.vue: A new Vue component is created for the "Add Generator" button.

• Target and Cost: The component receives a "target" type string and calculates the cost of the next generator tier.

• Function to get the Cost: A function is needed to get the cost of the generator. This function will take in the generator type as a parameter.

• Button Logic: When clicked, the button checks if the player has enough resources to purchase the next tier. If so, it creates a new generator of the specified type and adds it to the appropriate array.

• Integrating the Button: The addGeneratorButton component is added to the main view, with specific targets. The target prop will be one of the generator types.

Debugging and Testing

The process involves debugging and fixing errors that arise during implementation, such as:

• Loading Order Issues: Ensuring that files are loaded in the correct order to avoid "undefined" errors.

• Missing Templates: Adding the required template to the addGeneratorButton component.

Next Steps

The next steps involve improving usability and aesthetics:

• Consolidating Buttons: Combining multiple buttons into a single, larger button.

• Visual Improvements: Enhancing the visual appeal of the interface.

• Color Coding: Changing the button color based on affordability.

• Bulk Buying: Adding the ability to buy more than one generator at a time.

• Game Balancing: Further refining the game's balance and progression.