Press ESC to close

How to embed a Commodore 64 emulator (VICE) on your website

This is a fairly simple project if you want to, well, keep it simple. However, you can build a WordPress plugin and allow a lot more functionality. 

Here is the simple version:

 

				
					<!doctype html>
<html lang="en-us">
    <body>
        <!-- the canvas *must not* have any border or padding, or mouse coords will be wrong -->
        <canvas  id="canvas" style="border: 0px none;"></canvas>
        <script type="text/javascript" >
            var Module = {
                arguments: ['+sound'],
                canvas: document.getElementById('canvas'),
            };
        </script>
        <script type="text/javascript" src="js/x64.js"></script>
    </body>
</html>
				
			

This works, you can type in a program and run it but that’s about it, not a great deal of fun and far from what VICE is capable of. 

The code is really simple, the comment about border and padding could actually be ignored in this example as you will not be using a mouse but generally good practice when using canvas. 

Literally all we are doing in this code is running a script called x64.js. This is where all of the magic happens. 

I have created a folder on my webspace for this site called “js” and then put the script called x64.js in there. 

So where do you get the script? I just searched for vice.js on Google and got lots of results, the one I went for is https://github.com/rjanicek/vice.js/

I make no guarantees that this is a safe download but I have not had any issues. x64.js is in the js folder. Just copy this to the relevant folder and away you go.

As this is so basic we need to move on but I will do that in a part 2. In the next part we will have a selection of games we can play. 

There will also be a part 3 where the user can load their own game from a file. 

Leave a Reply

Your email address will not be published. Required fields are marked *