Tile Slide

Slide, solve, and conquer - Can you slide your way to victory? :D

Comment 35

Tile Slide

Inspiration

I love puzzle games that combine strategy, timing, and a hint of creativity. I wanted to make a simple game, I was inspired by indie games where the mechanics were simple yet the fun was boundless. So, I set out to build Tile Slide, a 6×6 tile-based puzzle with unique tile behaviors, designed and developed entirely by me in just four days, thanks to the assistance provided by Amazon Q. The speed of development wouldn’t have been possible without the help of Amazon Q Developer, which guided me through AWS integrations and provided valuable code snippets.

What It Does

Tile Slide challenges you to maneuver a set of tiles across a 6×6 grid. The main tile types include:

  • Arrow Tiles: Click to slide them in their specified direction, pushing other tiles along the way.
  • Broken (Cracked) Tiles: These can be pushed, or removed entirely by clicking on them, giving you an opportunity to clear space.
  • Block Tiles: These can only be moved if an Arrow Tile pushes them.
  • Wall Tiles: Completely immovable obstacles that force you to plan your paths carefully.
  • Hole/Target Tiles: Your objective is to get all movable tiles onto these holes to complete each level.

The puzzle aspects revolve around leveraging Arrow Tiles strategically, avoiding immovable Walls, and deciding when to remove Broken Tiles. All animations, user interface elements, and interactions are carefully designed for a pleasant and intuitive player experience.

How We Built It

I built Tile Slide using a combination of HTML, CSS (compiled from SCSS for better organization), and JavaScript. The front end is hosted on AWS Amplify, backed by multiple AWS services:

  • Amazon S3: I store game assets (images, sound files) in S3 for quick, reliable access.
  • AWS Amplify: Amplify seamlessly hosts my site. though I went with S3 bucket, I also explored GitHub integration for continuous deployment.
  • IAM: I configured user permissions and roles to secure my Lambda functions, DynamoDB databases, and API endpoints.
  • Amazon API Gateway: Manages the REST endpoints that my game calls to fetch and store data.
  • AWS Lambda: Handles the logic for creating and retrieving leaderboard entries, triggered via the API Gateway.
  • Amazon DynamoDB: Stores player scores data for the leaderboard feature.
  • Amazon CloudWatch: Monitors all API requests, logs errors, and helps me quickly troubleshoot.
  • AWS Polly: Generated the voice-over for my demo video, adding a professional but very natural sounding narration to showcase the gameplay.

Amazon Q Developer Usage

Throughout the development, Amazon Q Developer played a pivotal role in getting Tile Slide up and running so quickly:

  • Brainstorming Game Ideas & Features: I used Q to refine the puzzle concept, explore additional tile types, and imagine new mechanics.
  • Suggesting AWS Services: Q offered step-by-step advice on configuring services like API Gateway, Lambda, and DynamoDB. I was able to get all services configured within one hour.
  • CSS to SCSS Conversion: By prompting Q, I quickly converted my CSS into SCSS, condensing my styles and improving maintainability.
  • Template Generation: Q generated boilerplate HTML for modals, buttons, and layout components, saving me time on repetitive tasks.
  • Color Themes & UI Elements: Q suggested appealing color schemes that aligned nicely with the puzzle theme.
  • Code Review & Debugging: With the /review command, Q scanned my JavaScript for vulnerabilities, pointed out potential improvements, and even pinpointed specific line numbers where logic needed revision.
  • Module Breakdown: Q guided me in splitting my large JavaScript file into separate modules for tile movement, rendering, leaderboard management, and so forth, significantly improving code organization.
  • Automating Data Creation: Q generated dummy data for my leaderboard and helped me create blank canvas levels to rapidly prototype new puzzles.
  • Error Handling Insights: Q recommended ways to improve error logging and handling in my Lambda functions and API calls.

Challenges We Ran Into

  • Tile Movement & Push Mechanics: Getting Arrow Tiles to correctly push multiple tiles in sequence without skipping or overlapping required careful logic. -AWS Integration: It was a while since I had used AWS and I needed to study how to integrate AWS services in my game, however, Q was very helpful here, it provided quick and accurate explanations and step-by-step guides to integrate AWS.
  • AWS Configuration: Figuring out the right IAM policies to grant minimal but sufficient permissions for Lambda, DynamoDB, and other services was tricky.
  • Time Constraints: I only had four days to build the entire game from concept to deployment, so I needed to be very strategic with my time.
  • Animations & UI/UX: Designing a smooth and intuitive interface, complete with animations that accurately reflect tile movement, was a significant but rewarding challenge.

Accomplishments That We’re Proud Of

I’m proud of several milestones reached with Tile Slide:

  1. Complete Puzzle Mechanics: The tile movement, pushing mechanics, and hole-filling objective all work seamlessly to create a satisfying puzzle experience.
  2. UI/UX and Animations: I designed the entire user interface from scratch, focusing on clarity and simplicity while also adding fun animations to bring the puzzle to life.
  3. AWS-Powered Leaderboard: The integration of Amazon DynamoDB, Lambda, and API Gateway for storing and retrieving high scores adds a competitive edge.
  4. Stable Deployment: Thanks to Amplify and S3, players can easily access the game online with minimal downtime or performance issues.
  5. Rapid Development: Completing the core game in just four days was only possible through Amazon Q Developer’s constant guidance for both AWS and code-related tasks.
  6. Building my first game from scratch: This was my first experience building a full-stack game from scratch.
  7. AWS Experience: I have always wanted to work with AWS and via this hackathon, I got to gather knowledge and work with AWS services with the help of Amazon Q.

What We Learned

My journey building Tile Slide was a crash course in AWS and puzzle game development:

  • Deep AWS Knowledge: I learned how to configure IAM roles, set up and monitor APIs in CloudWatch, deploy via Amplify, and store assets in S3—all in a secure and optimized way.
  • Leveraging Amazon Q Developer: Q’s vast catalog of features made it easy to find answers on the fly, from generating code snippets, to debugging, to discovering free-tier offerings I could leverage. This direct integration with the AWS console taught me a streamlined approach to configuring AWS services.
  • SCSS & Modular Code: Moving from plain CSS to SCSS improved structure and maintainability. Breaking JavaScript into modules allowed for cleaner logic and easier debugging.
  • Power of AI Assistance: Amazon Q was like an expert developer sitting alongside me—saving me time, optimizing my code, and making sure I built my AWS stack correctly.

What’s Next for Tile Slide

I have big plans for Tile Slide moving forward:

  1. New Tile Types:
    • Synced Tiles that move together, adding another layer of complexity.
    • Magnetic Tiles that attract or repel each other, creating unique puzzle challenges.
  2. User Login & Replays: I plan to integrate a secure user login system (possibly using Amazon Cognito) so players can save progress and replay levels they’ve unlocked.
  3. Notifications with AWS SNS: By integrating Amazon Simple Notification Service, I can send players updates on new levels, high scores, or upcoming events.
  4. More AWS Service Integrations:
    • AWS SNS for real-time alerts.
    • Amazon Cognito for secure user accounts.
    • AWS AppSync for real-time data syncing if I expand to multiplayer.
  5. Enhanced Multiplayer & Leaderboards:
    Expand the leaderboard features to allow real-time battles or collaborative puzzle-solving modes.
  6. Adding Difficulty Levels:
    Different difficulties will have varying time limits and time increments, along with higher point values. I wanted to implement this but decided to keep the game simple.
  7. Mobile Optimization and Enhanced Responsiveness:
    Optimize for all screen sizes. Currently, it works adequately on mobile devices but can be further improved.

Through future enhancements and continued experimentation, I’ll keep pushing the boundaries of what’s possible in this tile-sliding puzzle universe. With the help of Amazon Q Developer and the extensive AWS suite, I’m excited to see Tile Slide evolve into an even more captivating, interactive gaming experience.

thank you for reading this far :D as a reward, there is an easter egg in the game to score more points Enjoyy :D

Built With

+ 12 more
Share this project:

Updates