Skip to content

TheInvader360/fc64js

Repository files navigation

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 😎

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

Demos

Various demos are available here

Games

Tools

Developer guides

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

MIT © TheInvader360