MyHashira Zodiac Game

Overview

The MyHashira Zodiac Game is an interactive experience inspired by the anime "Demon Slayer." The game merges the familiar concept of zodiac signs with the anime's Hashira characters (the most powerful demon slayers) by assigning users a Hashira character based on their date of birth they input.

The experience is designed to be both entertaining and shareable, offering fans a fun way to connect with the anime while engaging with personalized content.

Opportunity

Demon slayer anime fans enjoy talking about and cosplaying their favorite characters, but they often miss the depth behind the character's nature and temperament.

I saw an opportunity to create something more meaningful: an experience that not only entertains but also draws from the symbolic structure of zodiac traditions. I did some research on the Character's character which was written and decided by the anime writers.

The goal was to design a game that connects fans to characters in a personal, memorable, and culturally rich way.

Approach

• Concept Design: Researched and explored how zodiac traits could align with Hashira characters, ensuring each match felt symbolic rather than random.

• Visual & Interaction Design: Designed the layout, wireframes, and interface with anime-inspired aesthetics, focusing on clarity, engagement, and thematic consistency.

• Prototyping: Designed user flows to map out how players would input their birthdate and receive results.

• Website Development: Using the prototype as reference, i built a functional website to bring the concept to life, ensuring smooth interaction and responsiveness across devices.

Design

Low-Fidelity Wireframe

To begin, I created low-fidelity wireframes that mapped out the core flow of the game. The idea is to have it as a one-page website with overlaying pop-ups. At this stage, the focus was on functionality and structure on all screen sizes rather than visual styling.

High-Fidelity Wireframe

After validating the low-fidelity sketches, I started the high-fidelity wireframes that emphasized visual design and interaction details. At this stage, the goal was to bring the experience closer to its final look and feel while still leaving room for iteration.

Web Development

Using the high-fidelity wireframes and prototype as reference, I translated the design into a functional website using HTML, CSS, and JavaScript. The goal was to create an interactive and responsive experience that worked as a single-page website with overlaying popups.

HTML

The HTML provided the structural foundation and the information of the game. This is where I defined the core elements including:

• The overall structure and information on the game
• The date input form
• The Rules and information on every individual Hashira

CSS

I used CSS for styling and layout. I applied CSS Grid display to arrange the Hashira characters in a circular formation just like how it is seen in the wireframe as well as the color palette and typography.

Responsive Design using Media Queries
To ensure accessibility and responsive design across devices, I implemented CSS media queries for desktop screen, tablet screen, and mobile screen.

Javascript

JavaScript was the backbone of the game’s interactivity.

• It captured the date of birth input from the user and applied logic to determine which Hashira character aligned with their zodiac placement. I implemented a switch function that evaluated the birth month (and in some cases the day) to decide the outcome. The image shows the code for the logic.
• It dynamically renders the results on the same page, updating text, images, descriptions, and sound effects without needing a page reload.

Web Hosting and Deployment

Once the web development was complete, I focused on making the game accessible online so users could experience it directly. I chose Vercel for deployment because of its seamless integration with GitHub and its optimization for front-end projects.

All development files (HTML, CSS, JavaScript, and assets) were stored and organized in a GitHub repository. I connected the repository to Vercel so that every push to the main branch automatically triggered a new build and deployment.

Outcome and Results

The MyHashira Zodiac Game successfully evolved from a creative concept into a fully deployed interactive web experience.

The result is a responsive, interactive website that merges Demon Slayer anime fandom with zodiac storytelling, showing the ability to take a concept through design, development, and deployment while creating an engaging experience for users.

Reflection

Building the MyHashira Zodiac Game was both fun and challenging, it pushed me to think beyond just visuals and really focus building upon my web developing skills on how design and code work together.

This project strengthened my confidence in bridging design and development and also reinforced my ability to create engaging user experiences while applying real-world skills in responsiveness, interactivity, and engagement.