My Strange Design

Sometimes we do something just because we can, and not because it is smart or the best way to do it. Recently my son wanted to learn some basic information about coding, so I showed him how to make a simple webpage with JS that plays rock scissor paper. It is a pretty basic concept, but shows most of the general concepts of programming.

While doing it, though, I unlocked a weird memory from twenty years ago, when I first moved to Korea. Back then there were these strange rock scissor paper machines on the streets that you could put coins into and play against. The kicker is that if you won they would pay out with real money, so it was a kind of slot machine or something. 

With this nostalgia unlocked, I decided to expand my code and design an online replica of these machines (without the real cash payouts, of course). So I searched around on Naver and found some pictures and videos of these old machines (apparently there are still a few in action here and there!). I loaded up Inkscape and started making a copy. 

Somewhere along the way I realized that you could put JS directly into the SVG file, and I decided that I wanted to make the entire game inside a single image file. The general coding was not complicated, but as a tip to my future self or others, it is a good idea to use the CDATA escape code to wrap all the JS. It turns out that SVG files are pretty particular and you can't use less than signs (among other things) if it isn't escaped out. 

The next problem is how to include audio in a image file. I didn't want to link outside files, and it turns out that you can encode files into text and then load them as a data URI. Since the sound files I wanted to use were quite small this was at least somewhat practical. Yes, I realize that encoding a file in base64 increases the size by about 30%, but in this case it doesn't matter all that much, and I was not designing this project to be efficient.

Long story short, everything works and it is at least sort of fun to play. It works basically exactly the same way one of the machines on the street would, with the caveat that you can't win real money (you aren't putting real money in either, so that's fair), and the game is balanced so that the computer randomly chooses either rock scissor or paper evenly. In the actual machine there are settings to adjust the winning percentage, but since real money isn't involved that doesn't seem like something that needs to be messed with. FInally, this should work fine on mobile (although the buttons are a bit small), but the audio is a bit janky on the phones I tested it on. It doesn't effect the performance otherwise, though, so I am not going to mess with it. 

Also, to continue with my intent to have everything work from one file, there are no saves or leaderboards at the moment. I might change the save thing later, but honestly there doesn't seem to be much of a point.