feat: Add 2048-Game Mathematical Tile Slider (#4441)

[saiusesgithub]

🔢 Overview

This Pull Request introduces 2048-Game, an intensely mathematical sliding tile puzzle. The player utilizes directional inputs to compress a 4x4 grid, merging matching values to exponentially increase their score.

Built natively in a single file, this project demonstrates deep proficiency in array transposition, complex mathematical algorithms, and state-change validation.

Closes #4441

✨ Core Technical Implementations

1. Matrix Transposition & Compression Algorithms

• Row Shifting: To process a directional slide (e.g., "Left"), the engine extracts each row, filters out the empty "zero" values to compress the tiles, and then pushes zeros back to the end to maintain the 4x4 structure.
• Vector Rotation: To handle vertical slides (Up/Down) using the exact same row-compression algorithm, the engine mathematically transposes the 2D matrix (swapping rows and columns), processes the shift, and then transposes it back.

2. Algorithmic Merging Logic

• Adjacent Value Comparison: During the compression phase, the algorithm checks if index i is strictly equal to index i + 1. If true, i is multiplied by 2, i + 1 is zeroed out, and the global score is updated.
• State Change Validation: Before authorizing the spawn of a new random tile (a 2 or a 4), the engine deep-compares the stringified pre-move matrix against the post-move matrix. If no tiles actually shifted or merged, the move is deemed invalid and no new tile is spawned.

3. Hardware-Accelerated Rendering

• Data Attributes: Utilizes CSS [data-value="..."] attribute selectors to dynamically map background colors and font sizes to the tiles based purely on their mathematical value.
• Smooth Transitions: Employs CSS transform: translate and transition properties to animate the sliding and popping effects on the GPU rather than relying on JavaScript for pixel calculations.

🚀 Performance Optimizations

• Single-File Architecture: Zero external framework dependencies; 100% Vanilla JS and CSS Grid inside index.html.

[github-actions]

🎉 Thanks for the PR, @saiusesgithub!

We really appreciate you taking the time to contribute to OpenPlayground! 💙

---

🚀 Full-Stack Support is Here!

You can now contribute Full-Stack projects! Whether it's MERN, Python (FastAPI/Django), Go, Rust, or any other stack, you can share it in our organized full-stack section! 🏗️

🔗 Explore Full-Stack Repository

---

⭐ Love this project?

Please give us a star! It helps the project grow and reach more developers! 🌟

🔗 https://github.com/YadavAkhileshh/OpenPlayground

---

✅ PR Checklist

Before we review, please ensure:

• Your code follows the project's coding standards
• All file changes are accurate and intentional
• You've tested your changes locally
• Any review comments have been addressed

---

🚀 Looking for More Ideas & Resources?

Check out Linkshala — your one-stop destination for:

• 🧩 New project ideas
• 📚 Learning resources
• 🎮 Games & creative inspiration
• 💡 Developer tools & utilities

🔗 https://linkkshala.vercel.app

---

We'll review your PR as soon as possible. Keep up the great work! ✨