SumSquish is a desktop-only puzzle game inspired by the classic 2048, developed entirely with vanilla JavaScript, HTML, and CSS. I set out to recreate the addictive gameplay of 2048 while designing a fresh, custom interface that highlights both my coding and visual design skills. The game features a dynamic 4×4 grid where players use keyboard arrow keys to slide numbered tiles. When two tiles with the same value collide, they merge into a single tile with their combined sum, and the player’s score increases accordingly.
I implemented all the core mechanics from scratch, including tile movement, merging logic, random tile generation, and score tracking. The project gave me hands-on experience with DOM manipulation, event handling, and game state management in JavaScript. I also focused on writing clean, maintainable code and structuring the project for scalability and readability.
The interface for SumSquish is minimal and modern, with custom CSS styling to make the tiles visually distinct and the gameplay clear. Although the game is currently desktop-only, I designed the layout to be easily adaptable for future mobile responsiveness. This project serves as a showcase of my front-end development abilities, creative problem-solving, and attention to user experience.
Goals:
- Recreate the engaging mechanics of the 2048 puzzle game using only vanilla JavaScript, HTML, and CSS.
- Build a fully functional, interactive game that demonstrates my front-end development skills.
- Design a clean, modern interface that enhances usability and visual appeal.
- Deepen my understanding of JavaScript concepts such as DOM manipulation, event listeners, and game logic.
- Optimize the game for smooth animations and responsive feedback to create an enjoyable user experience.
- Structure the codebase for readability and potential future enhancements, such as mobile support or new features.
Challenges:
- Implementing the tile movement and merging logic from scratch required careful planning and debugging to handle all possible edge cases.
- Ensuring that each move triggered the correct animations and score updates without lag or glitches demanded precise control over event handling and timing.
- Managing the game state, including detecting win and loss conditions, proved challenging as the complexity of the logic increased.
- Creating a visually appealing and intuitive interface with only CSS, while keeping the design minimal and accessible, took several iterations.
- Restricting the game to desktop controls meant focusing on keyboard accessibility and ensuring consistent performance across browsers.
- Balancing game difficulty and playability involved fine-tuning random tile generation and movement delays to match the addictive feel of the original.
