Building Hack-tic-tac: A Python Knowledge Game

Game Overview

Game Concept and Mechanics

The Concept

Gameplay Mechanics

• Players compete against a computer opponent with basic AI.
• Each turn begins with a Python-related question.
• A correct answer earns the player their move; incorrect answers result in a hint that helps them learn the concept better and direct thyem to the correct answer.
• Topics range from Beginner Python syntax to Advanced-level concepts.
• The game ends when a player achieves three in a row or the grid is full.

Key Features

• An interactive and responsive UI powered by Phaser.
• Python questions designed to test understanding across various levels of difficulty.
• Optimized hosting for smooth and fast gameplay.

AWS Services Used

AWS Amplify

Amazon S3 and CloudFront

Amazon Q Developer

Development Journey

Challenges Faced

1. Maintaining Engagement:
   Balancing the educational aspect with the fun gameplay required careful design of the questions and mechanics.
2. AWS Configurations:
   Setting up S3 and CloudFront with the right permissions and ensuring the Amplify pipeline worked flawlessly took some trial and error.
3. Learning New Tools:
   Having to learn React and Phaser while simultaneously developing the game was a significant challenge, but it ultimately enhanced my technical skills.
4. User Experience Design:
   Ensuring a smooth user interface and intuitive gameplay mechanics was a process of trial and error, requiring frequent tweaks and testing.

Lessons Learned

• Efficiency in Development: Breaking down the project into achievable milestones helped ensure progress .
• The Power of AWS: Amplify and CloudFront proved invaluable for hosting and deploying the game efficiently.
• Balancing Complexity: Designing engaging gameplay mechanics while ensuring they remained approachable taught me a lot about simplicity and user experience.
• Continuous Learning: I had to learn React and Phaser prior to development, which was a challenging but rewarding experience that expanded my skills.
• Leveraging Amazon Q Developer:
  Amazon Q Developer proved invaluable in streamlining the development process. Its ability to automatically suggest solutions, provide optimized code snippets, and troubleshoot common errors significantly accelerated my progress. For someone with no prior experience in React and Phaser, Q Developer acted as a knowledgeable assistant, helping bridge the gap and enabling me to focus on game design and mechanics without getting stuck on technical roadblocks.

Accomplishments That We're Proud Of

1. Fully Functional Game Development:
   Successfully designed and developed a complete game within the hackathon's tight timeline, integrating engaging challenges and smooth mechanics.
2. Learning New Skills:
   Despite having no prior knowledge of React.js and Phaser, I managed to learn and apply these technologies effectively, creating a fully functional and polished game.
3. AWS Service Integration:
   Seamlessly hosted the game using AWS S3, CloudFront, and Amplify, ensuring scalability, low latency, and a professional deployment setup.
4. Intuitive Gameplay Design:
   Designed challenges that effectively test players' understanding of Python concepts while maintaining an engaging and fun user experience.
5. Streamlined Development with Amazon Q Developer:
   Leveraged Amazon Q Developer to accelerate development and optimize solutions, overcoming hurdles efficiently without previous experience in some key technologies.

What’s Next for Hack-tic-tac

• Dynamic Questions: Implementing a question pool for greater variety.
• Smarter AI: Enhancing the computer opponent for a more competitive game.
• Multiplayer Mode: Allowing players to challenge friends online.
• Mobile Optimization: Making the game fully responsive for mobile devices.

HOW IT WORKS :

• The player will first see instructions then choose to start the game
• The players will choose the level of difficulty between beginner to Advanced

• Once they have chosen they will choose the colour between orange and blue
• Then they will be able to see the grid
• They will make the first move then the computer will then make a move

• They will then get a challenge to solve to unlock the next move
• If the answer is incorrect they will get a hint to help them understand the concept better
• If correct they will then make another move
• The pattern continues until either The player or computer have 3 blocks either diagonal, vertical or horizontal Matching.
• If no one wins then it is a draw

Get Involved