-
-
Page 1 – Welcome Page Caption: “Welcome to Emoji Tic Tac Toe Arena! Get ready for a fun, emoji-filled battle!”
-
Page 2 – Player Selection Page Caption: “Choose your emoji and enter your player name to start the game!”
-
Page 3 – Game Mode Selection Page Caption: “Pick your game mode and difficulty — Player vs Player or Player vs AI!”
-
Page 4 – Gameplay Page Caption: “Let the match begin! Watch emojis come alive as you play Tic Tac Toe.”
-
Page 5 – Winner / Congratulations Page Caption: “Congratulations! Celebrate your victory with confetti and fun animations!”
Emoji Tic Tac Arena
A vibrant, emoji-powered twist on classic Tic Tac Toe — built with React, TypeScript, and CSS animations for the Sprout 2025 Hackathon.
Live Demo
Inspiration
We wanted to turn a simple childhood game into something expressive, polished, and delightful — transforming boring Xs and Os into playful emojis that pop with personality and style.
What it does
Players choose emoji avatars and face off in classic Tic Tac Toe matches — either against another player or an AI opponent. The game features themed backgrounds, sound effects, glowing animations, and confetti celebrations for each win.
How we built it
We built the project using:
- React + TypeScript
- Modern CSS (for glassmorphism UI + animations)
- Node.js for dev environment
- Minimax algorithm for the “Hard” AI mode
- Netlify for deployment
Challenges we ran into
- Designing a clean and responsive UI for both desktop and mobile.
- Fine-tuning the AI difficulty using the minimax algorithm.
- Managing emoji rendering across different platforms and browsers.
- Building engaging animations while keeping performance smooth.
Accomplishments we're proud of
- Fully working PvP and AI gameplay.
- Seamless emoji selector with category filtering.
- Custom themes and persistent scoreboard.
- Responsive design and polished game flow from start to finish.
What we learned
- Fine-tuning UI/UX for player engagement.
- Working with React state management and animations.
- Deploying full projects with Netlify.
- Balancing game logic, AI, and visual effects in a small app.
What's next for Emoji-Tic-Tac-Toe-Arena
- Add online multiplayer support.
- Introduce emoji leaderboards.
- Allow users to upload their own emoji sets.
- Expand themes and audio options.
Built With
- animation
- browser
- css
- css3
- gemini
- html5
- javascript
- local
- netlify
- node.js
- react
- storage
- typescript
- web
