Chameleon Runner

• 

  Logo

• 

  Gameplay

• 

  Game over (obstacle hit)

Inspiration

Inspiration first struck with a tiny chameleon figurine sitting on one of our desks. We thought about its ability to change colors, which sparked the idea for a game where the player could do the same. Initially, we envisioned something like Subway Surfers, with endless running and avoiding obstacles, but then we were inspired by Google’s Dinosaur game to create a more simple and retro-style experience.

What it does

Chameleon Runner is a retro-style web game where the player controls a chameleon that changes colors to blend in with falling squares. The goal is to avoid the pink diamond shapes as obstacles, earn points, and keep the chameleon safe by matching colors as it runs through the game.

How we built it

We built the game using HTML, JavaScript, and CSS for the front-end. As a graduate student in computer science and a freshman computer science student, we wanted to create something simple enough that we could both contribute to effectively. This led us to pick a project that allowed for flexibility and collaboration while ensuring we could manage the workload at different experience levels.

We started by building a basic skeleton of the game, with clear comments in the code to guide us as we developed each feature. AWS Amplify services were a huge help, providing an easy way for us to host the web app and streamline the deployment process.

Additionally, we used Amazon Q Developer, which was incredibly valuable throughout the process. It provided real-time feedback and suggestions, helping us identify issues and improve our code as we worked. This feature was especially helpful in making our coding process faster and more efficient, as it allowed us to refine our ideas and enhance the functionality of the game in real-time. With Q Developer, we could easily spot potential improvements, saving time and ensuring a smoother development experience.

Overall, the combination of a simple game idea, collaborative effort, and powerful tools like AWS Amplify and Amazon Q Developer made it possible for us to bring our concept to life quickly and effectively.

Challenges we ran into

The most significant challenge was figuring out how to track the color changes dynamically and ensuring that the game mechanics were smooth. Initially, we started with a triangle and gradually added features like falling squares, random color changes, and obstacles. Implementing all the logic for these features and getting them to work together seamlessly took some time and trial and error.

When we introduced the points system, we ran into an issue where collisions were being detected multiple times throughout the moving shape. This caused points to be added repeatedly for the same square. To fix this, we implemented a touched attribute that allowed points to only be added once per square. This helped ensure that the player’s score increased correctly and consistently.

To remove squares from the game after they were touched, we used the technique of changing the square’s alpha value to transparent. This made the square effectively disappear without affecting the game’s overall performance, allowing for a smooth, continuous gameplay experience.

Overall, overcoming these technical challenges required problem-solving and tweaking various parts of the game to work together, but it was rewarding to see the game come together in the end.

Accomplishments that we're proud of

We're proud of how we were able to go from a simple concept to a fully functional game with a pixelated chameleon. We were able to implement color-changing mechanics, obstacles, a point system, and mobile-friendly controls—all while maintaining a retro feel that aligned with our vision.

What we learned

We learned a lot about web development, particularly using AWS Amplify for hosting and Q Developer for improving our workflow. We also got better at JavaScript and problem-solving, as we encountered various obstacles during development. Additionally, we learned how to collaborate effectively, combining our skills to build something fun and functional.

What's next for Chameleon Runner

Next, we plan to add more levels and features to the game, such as power-ups, speed increases, and new obstacles to make it even more challenging. We also want to refine the gameplay and introduce more dynamic elements to keep players engaged.

Built With

• amazon-q-developer
• aws-amplify
• github
• html
• javascript