Bad Kitty Comic Game- an interactive comic creation game!

Sun English

0

Fullstack Engineer

AWS

CSS

JavaScript

Services/Stack

Frontend:
Vanilla JavaScript: For direct DOM manipulation to handle user interactions and updates to the game interface (e.g., rendering selections, handling canvas drawings).
HTML5 Canvas: Used for allowing users to draw on the second page of the comic.
CSS: For styling the game interface.
Netlify hosting
Backend:
Node.js
Render hosting
Storage:
Amazon Web Services/AWS was used as image storage for QR code integration.

Game Features:

Responsive Design: The application is fully responsive, providing an optimized experience across devices (tablet, desktop, and large mobile devices(landscaped Iphone Pros, etc.)).
Dynamic Storytelling: The game adapts based on user choices, creating a unique storyline for each player.
Save: Users can save their comic pages (using AWS)

User Instructions

-How to Play:
Choose options on the first page to shape the story.
Draw on the canvas on the second page to illustrate story.
Save the comic as images using the QR code feature.

Planned Features

Social Media Integration: Allow users to share comics on social platforms.
REACT/JSX/Redux: Switch code to utilize React and Redux
REACT Library: Create library for components to make easier comic creation in the future

Updates

Release version 1.0: Game realeased in conjunction with Virginia Children's Book Festival at Longwood Center of Visual ArtsReleased Oct 16th, 2024
Patch version 1.1: Based on witnessing the game being played by multiple people. Completely overhauled UX so that game flow follows the natural path of the story. Much easier to play and follow.Released Oct 17th, 2024
Patch version 1.12: Small UX update to smooth transitions and increase ease of play.Released Oct 18th, 2024
Like this project
0

Posted Jan 2, 2025

A responsive comic game with dynamic storytelling, save features, planned social media integration, and a React library for simplified comic creation.

Likes

0

Views

2

Clients

Longwood University

Tags

Fullstack Engineer

AWS

CSS

JavaScript

Sun English

✨ UX-Focused Fullstack Engineer & PM Extraordinaire

CareMap- giving power back to communities.
CareMap- giving power back to communities.
LCVA Portal (iOS) and ArtRecc (AI reccommendation tool)
LCVA Portal (iOS) and ArtRecc (AI reccommendation tool)
SpaceCase- user friendly storage on blockchain!
SpaceCase- user friendly storage on blockchain!