Introduction

Once upon a time.. a man with a mustache appeared to Keanu in a dream. In his deep sleep, Keanu was enlightened by the wisdom of the mustache man. He only remembered one sentence as he woke up: "Do not pass Go, do not collect $200"..

Keanu pondered.. how could I have $200 to pay for things without collecting from passing Go?? The answer: CREDIT.

The hackathon avengers from across the country united at WHACK 2025. Dylan, armed with a 3D printer for no reason other than "meh why not", Keanu, fresh off the plane from Ibiza; Aryan and Martin all came together to brainstorm a custom, flexible, easy-to-play version of Monopoly to educate people about taking on credit responsibly.

We built our project using pure JavaScript: with a scuffed combination of AR.js, React, and our hopes & dreams, we created a student-finance-oriented game of Monopoly with moveable pieces.

What we actually made

We made a AR-powered monopoly clone. You can use your phone camera in browser to render the board on top of our physical AR 3D-printed board. The novelty of AR gives an interesting edge to learning about financial literacy.

How it's made

We run a Vite+React.js web app; We're using React router, TailwindCSS, and other goodies for general styling and layout. We're using A-Frame.js and AR.js to map our board to real life. We decided to build in JavaScript because web stuff is generally super accessible. No app downloads required, just open the url.

What was tricky?

• Connecting A-Frame.js and AR.js to react was super tricky; A-Frame and AR.js versions with solid examples and docs were made almost 6 years ago, and React has changed compatibility a lot in that time. Picking the right versions with required features and combat ability meant a lot of iteration
• Recognising tags on the board - Out of the box our library has support for 'tag barcodes', however - they're super janky and require much fiddling to get working. Through raw persistence we figured this one out.
• Mapping our map to the board - Our game board needs to be mapped on top of the board. We do this by drawing vectors between the corner 'tag markers' and calculating normal vectors. Then we calculate the centre of the board and the required size of the board. All this info is put together to produce the board. However, the accuracy was poor - There's just no depth information for your phone to work off. As such, we developed a method of determining the normal vector of the physical board. Instead of just using one corner code, we generate orthogonal vectors at every corner and average them to produce a single normal vector. This is used to produce the board at the right angle.

Next time?

• We still need a bit of polish on game mechanics
• We need to focus more on teaching people about Credit Specifically; Our game makes it super free form for players to explore and learn by themselves, but a more guided tutorial would help a lot.

Built With

• ar.js
• javascript
• python