Latest Game Feature

Tree.js

Over the past couple of weeks, I’ve been working on a class that inherits the Character class. It is used in the 3rd level of my game “Jungle” where an interaction with the lumberjack npc triggers a chopping animation. Below is the process on how I made this file and implimented it into the level.

Tree Class Implementation:

The Tree class extends the Character class, inheriting its properties and methods. We start by defining the basic properties of the tree

Handling the Tree Chopping:

The “chopTree” method is responsible for handling the chopping of the tree. When this method is called, it updates the tree’s state to “isChopped”, resets the frame index and counter, and switches the visible canvas from the idle canvas to the chop canvas.

Drawing the Tree:

The draw method is responsible for rendering the tree on the canvas. It calculates the frame position in the sprite sheet based on the current state (idle or chopped) and draws the appropriate frame on the corresponding canvas.

Updating the Tree:

The update method is called to update the tree’s state. It calls the draw method to render the tree based on its current state.

Integrating the Tree into gameleveljungle.js:

The tree is initialized with its properties, including the sprite image, scale factor, animation rate, and initial position.

Handling Interactions:

The “handleLumberjackQuiz” method handles the interaction with the lumberjack. When the player presses the ‘e’ or ‘u’ key, the quiz is triggered. If the player answers “yes,” the tree is chopped down.

Diagram

A visualization of how all these files work together would help us understand how this feature is set up

Conclusion:

By managing the tree’s state and handling the chopping animation, we create a more interactive gameplay experience. The Tree class and GameLevelJungle.js file work together to ensure seamless interactions and animations.