Case Study Page

project thumbnail

Avatar: The Last Airbender Duels

A browser RPG battle game based on the world of Avatar: The Last Airbender

Year

2024

Type

School Project

Role

Solo Developer

Project goal

The goal was to create a project of choice using the principals of object-oriented programming. The specifications were to create a custom class and then instantiate objects using that class and the new operator. The object that is created by the constructor function had to contain at least 2 properties and 2 methods and be able to take in parameters/arguments.

Technologies Used

I used HTML and SASS for the website structure and styling, JavaScript for the functionality, and GreenSock for animations.

How it was created

My inspiration for ATLA Duels came from an Avatar: The Last Airbender themed Discord bot that I enjoyed using during the pandemic. Unfortunately, the bot went offline in 2022 and was indefinitely shut down by the developer. Because of this, I decided to challenge myself to create something similar but with my own twist.

I started off by sourcing information, images, and gifs that I could use for the project. Once I had all the assets, I started planning out the structure of the game, with all the different screens that I would need. With that done, I then began figuring out a colour palette and finding a suitable font family for the website. After finalizing this, I completed the wireframes and started planning out the custom classes that I would need along with the logic that I would follow when coding out the actual functions in JavaScript.

With the pseudocode finalized, I began coding the basic structure of the website with HTML and styling it with SASS. After that, I coded the functionality using JavaScript. Once I finished styling all of the components, I then added some subtle animations with GreenSock.

project imageproject imageproject imageproject imageproject imageproject imageproject imageproject imageproject image

Thanks for checking out my case study.

Here are some of my other projects & work.

If you like what you see and think I'd be a good fit for your next project, I'd love to chat!