update: deepseek redid the entire interface which is even better-looking (while I was implementing a save system). Since this is purely CSS, it’s very simple to change the entire display (colors, shapes, font formatting etc), or even make custom themes for it. At this stage though the engine itself doesn’t exist, meaning this is all hard-coded in a file.

It’s also fully mobile friendly but of course that’s basics.

At this point with the save and flag system it has everything needed to make ‘simpler’ VNs, provided you code them yourself in the files, but again this is just a fun little project lol. It’s not gonna be the next renpy or even publicly released lol.

---

I’m kind of on a VN binge these days (unfortunately it seems there is nothing as good as Virtue’s Last Reward, Ace Attorney and Paranormasight out there but I digress), and I had this terrible idea one night that it might be possible to make a web-based VN engine, that not only lets you code your game, but lets people play games made with it too.

So I asked deepseek how it would do exactly that. What kind of tech would you need? Is it even possible to make this?

And the answer of course is yes, it is. Everything is made with JS these days so that’s not surprising.

This would allow VNs to be not only created (or recreated) on any device, but also played on any device, since this runs in a browser window.

The prototype picture you see attached to this post is basically all Deepseek-made based on my design decisions - except the pictures, which I shamelessly stole off Google for the prototype.

At this stage the game is hard-coded into a JS file. It consists of nodes, with a node being a Javascript object that tracks a line of text or a choice. Every time you click, we move to the next node in line. A node has text, a background picture, a character asset (just one for the prototype), and a character name to display who is speaking.

There are also flags you can set in a node, which if you don’t code are variables that track progress. In the preview picture above, one choice is locked (replaced by ???) because the player has not ‘enabled’ the correct flag for it yet, i.e. not visited the node that sets this flag to true. This simple system is enough to allow more complex, non-linear storylines already - though there is no save system in the prototype (but it wouldn’t be very complicated to make).

This is what a node looks like in the code:

{
    id: 'node_5',
    type: 'choice',
    character: 'Anna',
    sprite: 'anna.png',
    background: 'school.png',
    speaker: 'Anna',
    text: 'What should we do next?',
    choices: [
      {
        text: 'Go to the library',
        next: 'library_node1',
        require: { hasLibraryPass: true } // Optional: only show if player has this flag
      },
      {
        text: 'Go to the cafeteria',
        next: 'cafeteria_node1'
      }
    ]
  },

If the engine were to exist of course a more intuitive, visual and streamlined system (allowing to efficiently string nodes along so you can focus on the writing) would be created. But it would render somehow like that in the code.

On the display side it’s literally just a few html <divs> styled and nested. You start the game by opening the html file and it just works. Deepseek took care of all of that without even asking it to, including displaying the choices this way which I honestly really like. It feels sleek and modern compared to the “let’s take up the entire screen with buttons”, but of course in this case we only need to make 2 choices fit.

Being HTML though it’s very easy to rearrange the blocks or style them differently. As much as I know HTML and CSS it’s cool that I don’t have to make this myself to test the first prototype.

I’m not sure I want to actually continue making this engine because, you know, a 200-line prototype is one thing, but turning this into an actual full engine with WYSIWYG development capabilities AND playable capabilities (and all that entails i.e. saving, options, animations, text control, etc.) is of course going to be a lot more work for basically nothing but a hobby project that exists to prove this is possible lol.

But I really like this little prototype and wanted to share :)