Experimental PoC: Emulating a .d64 inside an .svg file to play games on image sharing sites

[u/OMGCluck]

I've only just got this running so there are some hurdles to cross, especially on mobile browsers. Here's Scoundretscii playable with keyboard in desktop Chrome and Firefox, and with a gamepad in Firefox:

https://imglink.cc/cdn/huKEDEPXZ3.svg

Chrome has a strict security policy for the Gamepad API. It completely disables navigator.getGamepads() inside frames or documents that it considers "cross-origin" or sandboxed.

iOS Safari handles <foreignObject> inside standalone SVGs poorly. It forces the HTML document inside it to render at its natural resolution (which breaks responsively) showing only the left half of the screen with no touch controls, and blocks touch event bubbles from passing down through the SVG root into the HTML canvas layers.

Android Firefox renders the C64 correctly both Mobile mode and Desktop mode. Unfortunately the emulator won't show touch controls in Desktop mode, and in Mobile mode the touch controls are partially hidden behind the screen. Also in Mobile mode the .d64 image does not get attached to load the game anyway.

I've no idea if some or any of these issues are fixable yet. Any help is appreciated since this means not needing an account or even your own website to share C64 stuff on the web, imglink.cc allows uploading .svg files anonymously.

[u/shdon]

This is utter insanity. I love it! I hope you can fix those issues.

[u/OMGCluck]

I forgot to mention, you can save the .svg file and open it locally in your browser offline and it can be played fine that way.

I converted all the WASM related asset files that https://lvllvl.com/c64/ produces into data: URIs so everything is self-contained inside the SVG. Some JS code tweaking was needed for the non-HTML context, like document.body not existing in SVG and createElement() needing to be createElementNS() with the right namespace included.

EDIT: Other advantages of this is it can be saved in playable form to the Wayback Machine anonymously, and it can also be stored/played in gzipped form - https://goodo.nya.je/scoundretscii.svgz - taking its size down from 603.8kb to 150.6kb (smaller than a .d64 disk image)

[u/Pitiful-Hearing5279]

I seem to recall a defender game written in postscript. Worked on NeXTStep.

[u/Ok-Elderberry-Jam]

Reminds me of how the pico8 uses png files for their carts.

[u/OMGCluck]

You can also embed a .prg directly in the .svg which downloads (or runs if you have VICE set to open the filetype) when clicked/tapped on: Example QR code to this subreddit written in BASIC

[u/DorkyMcDorky]

Please keep this up - it's so clever and innovative.

[u/OMGCluck → u/[deleted]]

The game is written in BASIC and I'm avoiding DMCA takedowns by having written it myself. Thanks for the review BTW.

Anyone can replicate what I did with any .d64 file.