Previous post is about making exe for your impactJS game, this post I will talk about how to publish your impactJS game to your website.
Inside your tools folder, press the bake.bat to shrink your files into a game.min.js, which will appear in your root folder. Delete the two script lines in index.html and add the following:
Now, index.html, game.min.js, and your media file are the only things required to run your game. Upload these three files to your website. When you open your website, the game would not run. To check what is the problem, you press ctrl + shift + j to open the developer tools (assuming you are using google chrome), you will see the error:
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data.
This is because your browser is trying to get an image from a ‘different’ url. Google chrome treats www.yourwebsite.com and www.yourwebsite.com/media as two different domain, resulting in this cross-origin data error.
So to bypass this error, you have to put all your images, sounds, and music from your media folder to your root folder (delete the empty media file). Also, change all the url in all your .js inside the lib file to point to the correct image, sound, and music file (troublesome).
Lastly, rebake the file using bake.bat. Post index.html, game.min.js, and all the images, sounds, and music to your website. Run the game.
The first game I made is available at shipdefense.shaunlgs.com.
There are other ways to bypass the CORS error, but this is the one working for me.