Overview

Mini Game Central is a browser-based arcade hub built to deliver quick, engaging mini-games through a clean and responsive interface.

It was designed and developed as part of a personal creative coding project focused on interactive user experience, front-end development skills, and visual engagement.

‍

Target Audience

Casual web users looking for fun, lightweight, and accessible games without the need for downloads or accounts. Ideal for short breaks or sparking creativity through play.

‍

Goals

1. Create a centralized, user-friendly interface for hosting multiple mini-games.
2. Prioritize responsive design to ensure seamless access across desktop and mobile devices.
3. Implement consistent visual artistry and organization across games and modals.
4. Simplify game navigation to encourage replayability.

Features

1. Game Cards: Each game is displayed with an animated tile that draws attention but doesn’t overwhelm.
2. Modal System: Custom modal windows guide users through game start and end states with clear call-to-actions.
3. Responsive Layout: Built with media queries and flexbox/grid techniques to support all screen sizes, from mobile phones to large desktops.
4. Game Variety: Includes games like Hangman and other simple arcade-style experiences with easy-to-learn mechanics.

‍

Creative Process

Wireframing & Layout

• I started with low-fidelity wireframes to establish the homepage layout and user flow from browsing to playing and restarting a game. The key was simplicity: one click from homepage to gameplay.

Visual Design

• Color palette: A high-contrast, vibrant set of colors for game tiles to add personality.
• Typography: Bold, easy-to-read fonts to enhance accessibility.
• Icons & Animations: CSS hover effects bring tiles to life, creating a "fan" or expansion animation that adds energy to the homepage without being disorienting.
• Game Variety: Includes games like Hangman and other simple arcade-style experiences with easy-to-learn mechanics.

Interactivity & UX

• The hover animations stretch game tiles to the right and dynamically shift surrounding tiles—creating a fan-out effect. The intention was to mimic physical movement in a digital space to make exploration feel tactile.

Tech Stack

1. HTML5 & CSS3: Semantic structure and modern responsive design.
2. JavaScript/jQuery: DOM manipulation, event handling, and simple game logic.
3. GitHub Pages: Hosting the static site with version control via GitHub.

‍

Challenges

• Responsive Design Conflicts: Ensuring hover animations did not break the grid layout on smaller screens required careful restructuring with flex-wrap and media queries.
• Modal Trapping: Preventing interaction outside of modals required custom jQuery logic to disable background events until a user clicks a button.
• JavaScript: Making sure the games function with little to no error.

‍

Results

Mini Game Central is a fun, interactive project that reflects my ability to combine visual design with JavaScript-based game logic. The platform is currently live and open to further additions, including more games, themes, and accessibility improvements.