Chaincraft

1. Landing page with the most beautiful UI
2. UI once the wallet is connected
3. Game canvas, once the login is done
4. Flip the buckets game in which we have to make TRIPLETS
5. A correct triplet of TRON been made
6. User buying the hint for a triplet
7. Maze Runner game
8. Video game showing the video first
9. Questions being asked after the video is played
10. Error being shown to the users who don't have the Tron Link extension
11. Game-related transactions being shown
12. Weekly rewards (to be-added feature)

Inspiration

The world is transitioning towards blockchain technology, but many are still unaware of its power and potential. This project was born out of a desire to make blockchain accessible to everyone—especially those intimidated by complex documentation and technical jargon. By leveraging the power of gamification, this project educates and challenges users to think critically, solve problems, and engage with technology in an interactive, rewarding environment.

Blockchain, particularly the TRON network, offers a secure, scalable, and lightning-fast infrastructure. However, its adoption has been slowed by the general public's knowledge gap. ChainCraft seeks to bridge that gap, combining fun, education, and real blockchain interaction to empower users and equip them with the knowledge and experience needed to thrive in the evolving digital landscape.

This project isn’t just about learning—it's about building confidence in blockchain technology and ensuring that anyone, regardless of technical background, can grasp these concepts through engaging immersive gameplay.

What it does

This project combines learning and gaming, offering users an immersive experience. The only requirement to interact with it is the Tron Link extension and a TRON wallet. Its ability to listen to events from the Tron Link extension makes it highly dynamic. Whether you switch wallet accounts, disconnect, or connect to the mainnet, the project captures these events and adjusts accordingly. Once your wallet is connected, you can access the canvas and enjoy any of the three games: Flip the Bucket, Maze Runner, & Video Playground. Now, let's dive into how linking your TRON wallet with the game works.

1️⃣ Connection

Users without the Tron Link extension will be shown an error message along with a link to install the extension. For those who have it installed but aren’t connected or have a locked wallet, appropriate error messages will guide them. Users simply need to follow the steps to connect their wallets. A quick tap on the Connect button will link the wallet to the project, setting everything up for seamless interaction! As of now, only Shasta & Nile testnet wallets are allowed.

2️⃣ Features of the game

Before diving into the workings of the game, let me take you through the various features that are provided to the player:

Streak: Regular visits increase the likelihood of deeper interaction and appreciation of the project. To keep players engaged, I’ve introduced a streak incentive system, rewarding frequent visitors with small amounts of TRX. Users earn 0.05 TRX for visiting on day one, 0.1 TRX on day two, and 0.2 TRX from the third consecutive day onwards. Additionally, for streaks of three days or more, players will receive an extra 0.05 TRX for every level they clear in the game.

Background Music: When the canvas loads, a default background track plays for all users. However, in my project, users can explore and upgrade their music choices. At the bottom right, there's a list of music titles, and users can preview tracks by hovering over them. If they like a track, they can click to initiate the purchase process. After signing the transaction, the track will be unlocked, and users can easily switch between tracks by hovering over the titles.

Transaction Viewer: Users can spend TRX on purchases like hints or music tracks, and can also earn TRX by regularly interacting with the project. In either case, transactions take place, and players can easily view all project-related transactions through the block-explorer icon, ensuring full transparency over their activity and keeping track of what’s happening.

Now, let's move to the various games that are provided within the project:

🕹️ Flip the buckets

How to enter?: Go to the bottom-left house, find the perfect spot near the entrance, and press the "B" key to enter the game.

What does the game offer?: This game challenges users to create triplets that correspond to a specific topic. Initially, I aimed to make it TRON-specific by including only questions and tiles related to TRON. However, I quickly realized that sourcing enough content solely from TRON documentation was difficult. To expand the scope, I integrated additional topics from computer science such as Operating Systems, Data Structures, JavaScript, and Database Systems. This not only broadened the game's appeal but also enhanced users' knowledge across various tech domains, making it a more comprehensive learning experience beyond just TRON.

How to play? By hovering over the tiles, you can view the back, and each triplet consists of one image tile (a logo) and two text tiles. Once a tile is selected, it cannot be deselected, and you must choose three tiles before the selection is confirmed or reset due to an incorrect choice. Points are deducted for incorrect answers, while correct triplets add to the score. Upon completing all the triplets, a clap sound will play, and you can advance to the next level by clicking the next arrow.

Currently, there are 5 levels, with plans to add more in future milestones. For now, levels are not saved to avoid shortening the game, encouraging users to interact with more questions and maximize learning before reaching the game's end.

Hints feature: If you're feeling stuck, you can use a hint once per easy level. Just ensure you’ve selected a tile before using the hint feature. Click on the "?" icon, and you'll be prompted to pay a small amount of TRX. Once completed, the next correct tile for the triplet will be highlighted in pink, guiding you toward the correct answer.

Reesource Link: When you form the correct triplet, you’ll receive a link to the resource or documentation, allowing you to explore the source of information and understand the reasoning behind the solution. Additionally, a brief explanation is provided for those who prefer not to visit the link.

🕹️ Maze Runner

How to enter?: Go to the topmost house, find the perfect spot near the entrance, and press the "J" key to enter the game.

What does the game offer?: This game challenges your cognitive skills by requiring you to find the path to the correct maze without being able to view the entire maze. You'll need to use the trial-and-error method to navigate, and you must reach the next maze before the timer runs out.

How to play? Use the keys to navigate the player through the maze, avoiding walls along the way. Your goal is to reach the end of the 6-level game, where the home of the RPG player is located.

In here, the user cannot use any hint, as it's just you and the correct path!

🕹️ Video game

How to enter?: Go to the rightmost house, find the perfect spot near the entrance, and press the "V" key to enter the game.

What does the game offer?: It's often said that a picture is worth a thousand words, and it’s even better to watch a short video explaining complex topics rather than spending hours reading material. Initially, I aimed to include videos specifically about TRON, but I couldn’t find many suitable resources. For now, I’ve incorporated videos covering topics like the environment, technology, and science to provide insightful learning engagingly.

How to play? Click on proceed, and a random video will be picked. It will be played for double the duration of the video. Once it's done, you will be shown four MCQs, and upon answering them correctly, you can earn some points and go to the next level.

How I built it

Since I'm using the Tron Link extension to connect users' wallets to the project, I had to consider multiple scenarios to ensure a seamless experience. I captured various events from the extension, such as account_created, nodes_changed, and disconnected, making the project responsive to these changes. This ensures that everything runs smoothly, providing users with the best experience.

The game mechanics are built entirely with JavaScript, while I integrated TronLink methods and the TronWeb JS SDK to handle blockchain functionalities like connecting wallets and sending/receiving TRX.

I could go into great detail about how everything works, but in short, the entire project is powered by JavaScript, bringing together all the elements to create such an impressive and functional platform.

Challenges I ran into

1️⃣ Handling TronLink Events: There are several factors to consider, such as whether the extension is installed, if the wallet is available, whether it's connected to the correct testnet, and if the wallet is already linked to the project.

2️⃣ I'm using the TronWeb JS SDK on the server side, so I need to carefully design methods for sending requests to the server and handling responses. This ensures that the UI and the backend remain in sync throughout the project.

3️⃣Creating these extensive games was no ordinary task. Since each game is distinct from the others, I had to experiment and fine-tune the mechanics extensively to ensure they stand out and are appreciated by the users for their uniqueness.

Accomplishments that I'm proud of

This project is far from being a simple game like Tic Tac Toe or Rock Paper Scissors, which rely on basic randomization functions. Instead, it’s a highly diverse and complex platform that captures the true essence of the TRON blockchain. Each game is meticulously designed not only to engage users but also to educate them about the underlying technology behind TRON. Through immersive gameplay and real interaction with the blockchain, users gain a deeper understanding of TRON's capabilities and functionality, ultimately developing a genuine appreciation for it. This project goes beyond entertainment—it's about fostering awareness, learning, and a connection to the blockchain, making users fall in love with TRON while having fun.

What I learned

Everything about Tron, and how to use it with Tron Link extension. Throughout the development of this project, I’ve gained significant insights into both technical problem-solving and the blockchain ecosystem. On the technical side, I have deepened my knowledge of JavaScript and its applications in-game mechanics, as well as how to integrate TronWeb JS SDK for interacting with the TRON blockchain. Handling complex events like wallet connections and blockchain transactions has greatly enhanced my understanding of asynchronous operations and real-time event handling.

Additionally, working on a project of this scale taught me the importance of user experience design and how crucial it is to make interfaces responsive, dynamic, and engaging. I learned how to keep the UI and backend in sync for seamless interaction, making the project more immersive for users.

Beyond technical skills, I’ve learned about the value of persistence and how to iterate on ideas when initial solutions don’t work as planned. This project has challenged me to think critically, adapt quickly, and problem-solve creatively to bring my vision to life.

What's next for Chaincraft

I’ve already implemented the Weekly Rewards feature in the UI, where the top scorer of the week receives a fixed amount of TRX as a reward. This promotes healthy competition and encourages users to strive for excellence.

In addition, I’ve been exploring how to deploy assets on the TRON blockchain and transfer them between wallets. With this newfound knowledge, I’m excited to introduce NFTs into the project. Rather than TRX, the weekly winner will receive an exclusive NFT, making the rewards more unique and valuable. These two updates will add diversity to the project and better prepare it for real-world players.

Credits & Acknowledgements

A portion of the initial setup for this project was inspired by the "Pokemon JS Tutorial Game" by Chris Courses. The tutorial can be found here on YouTube and on Chris's official website.

I utilized the tile-based method for creating game assets, as well as the player movement mechanics from this tutorial. However, it's important to note that while the tutorial served as a helpful reference for these foundational techniques, the majority of the project—especially the entire map design, game logic, and the creation of three unique games—was custom-built and coded entirely by me. The tutorial focused on building a Pokemon-style game, whereas my project offers three different games, with distinct gameplay experiences and educational features.

Differences & Advancements

Original Game Designs:
- While the tutorial was focused on creating a Pokemon-based game, my project includes three original games: Flip the Bucket, Maze Runner, and Video Playground.
- Each game in my project incorporates educational elements, particularly related to TRON blockchain and general computer science concepts.
Custom Map Building:
- Unlike the tutorial, where the map was based on a pre-designed Pokemon world, I created a completely custom map to fit my unique gameplay scenarios and learning objectives.
Blockchain Integration:
- My project integrates TRON blockchain functionality, allowing users to interact with their TRON wallets, engage in transactions, and earn TRX rewards. This level of blockchain integration was not part of the original tutorial.
Unique Features:
- Features such as daily rewards, streak tracking, and the ability to earn and spend TRX were coded independently.
- The project tracks user progress, transactions, and more using custom-built backend logic.
Educational Focus:
- My project has a strong focus on making blockchain and computer science education interactive and rewarding through games, which was not the focus of the original tutorial.

By building upon foundational elements from the Pokemon JS Tutorial, I was able to create a project that is far more complex, interactive, and unique to my vision, with a strong focus on blockchain education and engagement.