javascript - How can I distribute the two pieces of a game engine in an efficient way?

Question

I am using VUE and JavaScript to develop an educational 2D game engine for the purpose of teaching kids game design. The breakdown of how I plan on it working is as follows:

1. VUE based editor is used to create game content
2. The actual engine is written in pure JS
3. When the "play," button is clicked in the editor, a function from the engine run_debug(inputGameData) is called which returns specific errors to the editor process for it to handle if they appear IE: Display error message and highlight location in editor that the error occurred.
4. When the "export," button is clicked in the editor, the game data and engine are packaged together in a single HTML file to be run as a stand-alone application.

The editor is almost completed, which means I'm now thinking more about the engine side of things. What I'm really scratching my head about is how I should distribute the two on the server without having multiple duplicates of the engine; one version that is generated with the HTML wrapper template, and one that is imported into the VUE application to be run-able from the editor.

I see a few solutions to this off the top of my head, but all have drawbacks:

1. Distribute all separate versions on the server. This will cause a longer page load and hurts my insides as a programmer due to how inefficient this feels
2. Dynamically build the engine from source at export/run time in whichever version is needed. This would cause problems as one of my goals for accessibility is having the editor able to run locally on a machine, and browsers currently don't handle local file reading too well without having to mess about with permissions.
3. Import the HTML5 wrapped version into the VUE app on build, and somehow both call it from the engine (in an Iframe or similar) and be able to read it as text so I can insert the game data on export and download it to the user's machine. I have absolutely no clue how to do this using VUE.

It's a weird niche problem so I'm having some difficulty finding resources on the topic. If anyone has experience in this subject matter I appreciate any help/direction you can give or point me to

标签： javascripthtmlvue.jsvuejs2

Answer 1

Here's the solution I ended up coming up with (basically option #3 from above, just slightly modified):

1. Create build system for the engine that generates a engine.js file where the contents of the file is stored in the format of:

   let engineCode = 'engineCodeHere';
   let sharedCode = 'code shared between engine and editor goes here';
   

2. import the engine.js file into the vue editor and on initial load, put the code into <script> tags

   const engineTag = document.createElement('script');
   const sharedTag = document.createElement('script');
   
   engineTag.id = 'engineCode';
   sharedTag.id = 'sharedCode';
   engineTag.innerHTML = engineCode;
   sharedTag.innerHTML = sharedCode;
   
   document.body.appendChild(engineTag);
   document.body.appendChild(sharedTag);
   
   engineCode = null;
   sharedCode = null;
   

   once they are imported as script tags the original variables are cleared so we're not story duplicate data in memory.

3. Now, not only do I have access to the runnable js code as if I had imported it normally, but I also have the added benefit of being able to get that code as text so I can use it when packaging the final game "executable."

   let engineText = document.getElementById('engineCode').innerHTML;
   let sharedText = document.getElementById('sharedCode').innerHTML;
   

This will allow me to pack the engine just a single time, instead of once as JS and once as text. For added efficiency I can even hold off creating the engine tag until the game is run in the editor to save on resources.