Escape Room Adventure

One of my favorite things to do is look at others designs and then try and recreate them. Sometimes I will download the file if avaailbe to look under the hood. About a month ago I came across RachelEMdesigns​ Vibe Coding an Escape Room | E-Learning Heroes and was intrigued how it was done. I saw others were also curious about the inner workings of it but it seemed the secrets would remain hidden. So I did my best to reverse engineer the project to see how I could do it. With a little bit of networking with a colleague's acquaintance, I solved the biggest obstacle I encountered, how to have the mouse become a flashlight. Once I knew the JavaScript for that the rest was easy enough to recreate via triggers, layers, states, and variables.

 

The main thing I did not add was the score, but that would be easy enough to do with the proper "Score" variable and adding some triggers to add or subtract points based on the hotspots they click. I also changed how the "found" function worked on mine. In Rachels it was a state of the main flashlight picture (or that was how I replicated it) and would follow the mouse as it hovered over the hotspot. However, I did not like the text in the middle of the screen where other items were popping up so I moved them all to the top right corner of the screen just under the timer, number of items found, and the reset button. I still have the triggers they have just been disabled in the file attached if anyone is curious. I made mine as an Operational Health and Safety search looking for items around an office that should be flagged to be fixed. 6 correct items and 3 distractions can be found. 

 

The key to the movement is the JavaScript that is two pronged. First, it takes the picture chosen and uses it to follow the mouse icon. The 2^nd part of the script removes the mouse icon completely, so it is hidden while on the search screen. The flashlight is just  an extra-large black PNG with partial opaqueness so you can still see the room and then a fully transparent circle in the middle, so it acts as a "light". I added a small dot to the middle to act as a point of reference for the where you are currently looking. That is the jist of it. Hope this is helpful for those who were looking for possible answers to how RachelEMdesigns did theirs.

Review Link