Tiled Maze

A game that can revive the user's interest in learning, using the hottest & oldest (reliable) blockchain out there ie XRPL blockchain. Presents the game & knowledge points in the most beautiful way

Comment

Inspiration

I started working on this game to make an interactive playful area for the XRPL blockchain users to play a beautiful game and get time to understand the basics behind what drives XRPL. I wanted to make the project from bare scripting languages (no frontend/backend frameworks) to tell the world that if you have innovation and passion within you, then you can even cross a mountain. It is the process that matters, not the medium. WIth these thoughts, the game Tiled Maze was made.

What it does

Apart from providing the users with two games i.e Flip The Bucket & Maze Runner, the project is ensuring that the knowledge bank of the user will be refilled time and again.

I am sure you might be thinking that how in the world did I integrate the XRPL functionalities into a game? So, from the start I wanted to integrate the XRPL Payments & NFT minting & consuming functionality to this game and more importantly didn't want to forcefully add in-game purchases.

So, these are the additions/upgradations that I have done to the game: Note: Before this event, this was just a web2-based project that was having the FLIP THE BUCKET & MAZE RUNNER project but with the advent of this event, these functionalities have been added to this project:

🔴 LOGIN FUNCTIONALITY: Users now have to first provide the XRPL seed address to link an account to the localhost machine & then only the game proceeds. Not only this, I have configured the processing in such a manner that an account can be used on a single device only. That means, if you have logged into the game with your laptop with the email address vats@gmail.com, then the same id can't be accessed on another device. This helps in keeping your credentials in your locality of reference & no one can't access them anywhere. (The seed is also encrypted and thus no one can't get access to your account and this your funds in the XRP ledger are safe and sound).

As for the new users, there is an option to automatically create a new testnet account that will be credited with 1000 XRP, so there is no stopping for everyone. Anyone can enjoy this game and learn a lot.

🟠 Music Purchase: There are a total of 5 background music options for your to choose from. By default, the first one is unlocked for every user, but to unlock the remaining four, you have to pay a certain amount of XRP. The breakdown for the same can be found in the below table:

Music Track Prize in XRP
Dark Passenger 0.5
Drive 1.0
Fluffing Duck 1.5
Powerful Trap 2.0
Wallpaper 2.5

🟢 Hints Purchase: Gaining knowledge can be a bit tricky for many of us. As the Flip, THe Bucket game tests skills related to the computer science domain (with questions related to Data Structures & Algorithms, Operating Sytems, and Database Management Systems). Not only this, especially for this event, I have included the XRPL questions also. Guess what, after making a correct match, a modal pops up and states the reasoning behind the solution. There is a RESOURCES page attached to every answer modal that can take the user to the page that elaborates the reasoning. So, it is a great way of making people visit the XRPL doc (for example and get to know about how it works)

questionsImage

🔵 NFT Section: I have minted the NFT tokens and provided their metadata on the ipfs storage. In every week, a new NFT will be there for the winner (highest scorer of that week) and the NFT can be seen from the left side REWARDS section. In there, your score along with the leader's score will be seen, so that you can always know how much more points you need to grab that NFT.

A winner email will be sent to the top player so that he can rest assured that the transfer has taken place. Each week, new NFTs with different descriptions will come up. So, there is always a sense of excitement and a purpose to play.

🟣Apart from the above-mentioned points, there are a ton of UI and backend changes that have been done. Like the image mentioned below:

info flow

There are many steps in making a successful transaction on the XRP ledger and I have tried my best to showcase the real-time update of the backend calls being made to the server. So, this logic-flow state diagram depicts the backend processing in the most pleasing way. It shows the stages like initiating a transaction, signing it, submitting the transaction blog, and updating the database. All with the expense of showing the time elapsed also. It is a feature of utmost precision and I am glad I did that to the best.

How I built it

For the entire project, I have used vanilla javascript only. PHP has been used as the backed language (for manipulating the database and doing secretive things separately). The XRPL calls are secured in the most elegant way because the SEED that is being seen/stored in the fronted is not the correct one and for every XRPL call being made from the frontend, a backed call is being made and then only the correct SEED is found out.

So, let's have a look at the encrypt function:

function encodeSeed($connect, $seed) {
        $batch = rand(8,10);
        $alpha = rand(1,26);

        $ascii = ["$","%","(",")","0","1","2","3","4","5","6","7","8","9",";","<","=",">","@","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","[","]","~","`","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","{","|","}"];

        $ans = str_split($seed, $batch);

        $encodedString = "";
        for($a=0; $a < count($ans); $a++) {
            for($itr=0; $itr< strlen($ans[$a]) ; $itr++) {
                if(array_search($ans[$a][$itr], $ascii) + ($alpha+$a) > 77) {
                    $encodedString.= $ascii[array_search($ans[$a][$itr], $ascii) + ($alpha+$a) - 78]; 
                } else {
                    $encodedString.= $ascii[array_search($ans[$a][$itr], $ascii) + ($alpha+$a)]; 
                }
            }
        }

        return $encodedString."::".$batch."::".$alpha;
    }

Around 80 ASCII characters are used for encryption. The logic is mentioned above, but the great thing is the ever-changing alpha and batch value for the encryption. According to the batch, the 31 characters long originally seen are broken into batches and then the alpha value is added to the ASCII equivalent of the character. The alpha is incremented every time for a new batch. Thus these two things are dynamic in such a manner that it is next to impossible to decide the encrypted string. (That is why I am posting the decryption function here 😎)

There are a lot of things to be talked about, but I have only focused on the big ones.

Challenges I ran into

This is one of the first projects that have SEPARATION OF CONCERNS, that is frontend and backend are distributing the workload equally and ensuring that one eases the work for the other one. In the journey of naming an idea into reality, I faced the following problems:

  1. For checking how the XRP JS SDK calls work, I exhausted around 2000 Testnet tokens and encountered countless errors while doing so.

  2. Passing and getting back the required information from the backend was very tedious and cumbersome because there were many streams of information flow and I have to align all of them properly.

  3. Controlling and managing the UI with only CSS (not any framework) was challenging but I liked that one and somehow managed to accommodate more than 250 elements into their correct place.

(Let's keep it short and don't include the difficulties I faced while understanding a completely new blockchain technology: XRPL because in the end I integrated all of my learnings into a great project)

Accomplishments that I'm proud of

From the body tag to the backend file, I am proud of every LINE OF CODE that I have written to make this project live. I really hope that the judges see the entire demonstration video because it is meant to convey the essence of the project to you so that the project can be evaluated properly.

Good things take time to get judged 😊

What's next for Tiled Maze

Bidding functionality for the top-notch NFTs is my priority but due to time constraints, I couldn't finish that. But I am confident that I will be pulling that off in a week's time

Share this project:

Updates