WEEK 11 (final project)
For this week, we propose, design, and begin implementing our final class project. The assignment asks for a short description (1–3 sentences) and a list of at least 5–10 knowns and unknowns about the project.
My Final Project Proposal
For my final project, I’m creating a gacha-style character pulling game built with
p5.js. Players can perform single pulls or 10-pulls to reveal randomized characters of
different rarities. Each pull displays fully illustrated card artwork, and the player gradually
builds a collection over time.
Knowns
- I am using p5.js for drawing, layout, animation, and the card reveal system.
- Characters have rarities (Common, Uncommon, Rare, Epic, Super Rare, Legendary).
- Pulls use a weighted randomness system.
- The game supports both Single Pull and 10-Pull modes.
- I track the player's collection and count duplicates.
- All character art is loaded as PNG card images stored in
/public/cards. - The UI for pulling is built with regular HTML buttons (not p5 buttons).
- The canvas is responsive and centered using Bootstrap.
- The layout mimics professional gacha UIs.
Unknowns
- What sort of animation effects to use on rare or legendary pulls.
- Whether to add sound effects for reveals.
- Whether to include a detailed card information popup on click.
- If I want multiple banners with different character pools.
- Whether to save the collection using localStorage.
- How large the final character pool will be.
- Whether to include animated backgrounds or particle effects.
- Possible UI refinements for the “collection” panel.
- If I want to add a pity meter for guaranteed high-rarity pulls.
Week 11 – Gacha Game (p5.js)
Click Single Pull or 10-Pull to reveal beautifully illustrated characters, each with their own rarity and artwork.
Week 11 Summary
A polished gacha-style character pulling game built with p5.js.
Includes sprite artwork, rarity-based randomness, a growing collection system, and a
responsive UI. This project demonstrates animation, image loading, interactivity,
state management, and custom visual design.