fc64js

fc64js is a small browser based fantasy console

64x64 pixels
8 colors
6 buttons
1 beeper

It supports keyboard, touch, and gamepad input across desktop and mobile devices

The minified library weighs in at just 16 kilobytes

Selected examples

Click or tap a gif to play :sunglasses:

Getting started

All you need to get started developing fc64js games is the library, your text editor or IDE of choice (e.g. vscode), and a modern web browser to run and debug it on (e.g. google chrome)

fc64js “roms” (i.e. games/demos) are simply javascript scripts that are included on a html page alongside the fc64js library

Each rom must include a romInit() function (called once on page load/reload) and a romLoop() function (called continuously at a targeted 60 frames per second)

This basic example can be saved locally (e.g. in a file named basic-example.html) and simply opened in a web browser:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>basic-example</title>
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, maximum-scale=1" />
    <script src="https://theinvader360.github.io/fc64js/lib/fc64.min.js"></script>
    <script>
      let x = 60;
      let y = 60;
      let color = 4;

      function romInit() {
        drawPixel(3, 3, COL_WHT);
      }

      function romLoop() {
        if (isJustPressed(BTN_A) && color > 1) {
          color--;
        }
        if (isJustReleased(BTN_B) && color < 6) {
          color++;
        }
        drawPixel(x, y, COL_BLK);
        if (isPressed(BTN_U) && y > 0) {
          y--;
        }
        if (isPressed(BTN_D) && y < GFX_H - 1) {
          y++;
        }
        if (isPressed(BTN_L) && x > 0) {
          x--;
        }
        if (isPressed(BTN_R) && x < GFX_W - 1) {
          x++;
        }
        drawPixel(x, y, color);
      }
    </script>
  </head>
  <body>
  </body>
</html>

Javascript modules

See here for an example that uses javascript modules

The key differences are changes to the html script elements here, and the introduction of import and fc64Init javascript statements here

Typescript starter

See here for a convenient starter project to help create roms using typescript

The result of following the fc64js-typescript-starter readme instructions is available here

Roms

Demos

Various demos are available here

Games

Other

Various other roms that don’t cleanly fit into the other categories are available here

Tools

Image tool

Developer guides

This declaration file gives an overview of the developer API
These example roms cover all fc64js functionality
Memory map
Custom palette
Library development
Tutorial - Snake (js)

Credits

fc64js is comprised of original code by TheInvader360

Inspiration has been drawn from many sources - real machines like the zx spectrum, commodore 64, bbc micro, and various handhelds, virtual machines like hack (nand2tetris) and chip-8, and fantasy consoles like pico-8, tic-80, and wasm-4

Special mention goes out to the peekpoke minimal fantasy console - a great example of how to architect this kind of project

These credits relate to the fc64js fantasy console itself - credits for specific roms can be found in their accompanying readme files, or in code comments, or both

License

This site is open source. Improve this page.