Character Selection Screen
Character Selection Screen in HTML, CSS, and Javascript
Workflow for Project Execution:
Character Conceptualization: Created a roster of eight distinct characters, each endowed with unique names, intricate backstories, and distinct personalities.
Character Design and Visualization: Translated the character concepts into visual representations, leveraging the identified details as a basis for design.
Prototype Development (HTML and CSS): Implemented initial prototypes of the characters' visuals using HTML and CSS, ensuring a solid foundation for further development.
JavaScript Character Selection Implementation: Employed various coding approaches in JavaScript to implement a solid character selection mechanism, combining Javascript with CSS3 animations for optimized performance.
User Interface Design and Input Enhancements: Crafted an intuitive and visually appealing user interface (UI) to optimize user interaction - and implemented arrow key controls and keyboard shortcuts to provide users with efficient and accessible navigation options.
Voice Integration: Enriched the characters' interactive nature by seamlessly incorporating voice features, aligning the audio with their respective appearances and personality traits.
Immersive Background Design: Designed a captivating background image to enhance the overall user experience, fostering immersion and engagement.
Character Classification (Class Icons): Added distinctive class icons to categorize each character, aiding users in identifying and connecting with their preferred choices.
Skill Set Integration (Character Abilities): Integrated four unique skills for each character, complete with accompanying icons, diversifying gameplay and enhancing character depth.
Refinement and Enhancement: Conducted meticulous refinement, optimizing code quality, fine-tuning animations, and overall improving the project's user experience
Watch the full video
Visit my website