LCD game library in html5/javascript, to recreate simulations of 80s Game & Watch by Nintendo and other electronic handheld games like Tandy, Sunwing, Mini Arcade etc. Currently supports playable simulators of Donkey Kong II, Mario Bros, Highway, Sea Ranger, Tom's Adventure, Jungle Kong and Eagle n Chicken, incl. online highscores lists.
Switch branches/tags
Clone or download
BdR76 minor library updates
minor library updates
Latest commit 10c6523 Oct 28, 2018

readme.md

lcdgame.js

lcdgame.js is a JavaScript library for creating high quality LCD game simulators that can run in any browser. It is compatible with most modern browsers and several games are fully playable on pc's, laptops, mobile phones and tablets.

The lcdgame.js library will be updated regularly bug fixes and possibly additional game devices, so in that sense it remains work in progress.

preview screenshot

play the LCD games here

Highway :: Mario Bros :: Sea Ranger :: Tom's Adventure :: Donkey Kong II :: Jungle Kong :: Eagle n Chicken

What are LCD games

LCD games are electronic toys introduced in the 1980s. Nintendo first released its Game & Watch series in 1980, which were electronic handheld toys that used LCD crystals to display flickering shapes. The shapes could only be turned on or off, creating a crude form of interactive animation to form games. These were some of the earliest handheld gaming devices, years before the release of the GameBoy.

Followed the success of Game & Watch, many other companies incl. Gakken, Tandy, Radio Shack, Sunwing, Tiger, Tomy started creating their own lcd games (sometimes called "card games"). Over the years hundreds, maybe thousands, of different games were created.

What is lcdgame.js

lcdgame.js is a JavaScript library for creating LCD game simulators. It works based on a spritesheet compatible wth json array format, which can be created with a photo editor like GIMP, and the shapes_editor.html which is part of this library, for more info see here.

Direct inspiration is a very cool site called pica-pic by Hipopotam. On the site there are 26 playable simulations of lcd games. The simulators on pica-pic work great but it is based on Flash, making the games unplayable on tablets and some browsers.

The goal of lcdgame.js is to create high quality LCD game simulators that can run in any browser using html5 and JavaScript. LCD games are relatively easy, they don't require fancy sprite animations or scaling and fading effects, or html DOM-manipulation. So the goal is to develop lcdgame.js as a stand-alone library, without the use of external libraries like jQuery, Angular.js, Phaser.js etc.

Roadmap/goals

The lcdgame.js is work-in-progress, here is a goals checklist/roadmap of still missing features (strikethrough is done).

  • Open source
  • Standardised interface and file structure
  • Re-use code and editor
  • Easily add new games (needs improvements)
  • add touch support for buttons
  • scale to fit screen (needs improvements)
  • playable on any device
  • refactor code into separate JavaScript objects
  • add state manager (to separate time/demo, maingame, bonusgame code)
  • add gameplay info popup, explanation for each game
  • add high scores list (local storage)
  • add menu overlay in separate dom-elements
  • add high scores list (shared online)
  • responsive resizing/scaling and display centered
  • filter options for high score list
  • sound mp3/wav based on browsertype
  • Shapes editor, allow shapes change position, mouse drag/move
  • Shapes editor, support/preview/edit types (normal shape, digit, digit position, button)
  • Shapes editor, copy shape (for digit positions)
  • add key hints (separate dom-elements?)
  • allow button/keys re-mapping
  • and of course, add more games ;)

Simulation vs emulation

Why create simulations when you could also create emulators? Handheld LCD games typically use a wide range of 4-bit microprocessors (MCU) of which there isn't much information. Also, the ROMs in these devices are usually embedded in the MCU, meaning they need to be "decapped" to extract the data. This involves taking a microscope image and visually decoding the zeros and ones. Although feasible, this process is very expensive, especially considering the sheer amount and variety of different LCD games. Therefor it is more practical to create simulations instead of emulators. Also, a simulator can recreate the entire device, including buttons and artwork, and not just the screen.

History

08-oct-2018 v0.3.2 more games and better browser compatibility
01-jul-2018 v0.3.1 menu, infobox, online highscores
23-jun-2018 v0.3 added statemanager, preliminary touch and scale
27-apr-2017 v0.2 Mario bros and Sea Ranger playable, better compatibility, utilities and tools
10-nov-2015 v0.1 first release of lcdgame.js and shape editor on github

See also the html5gamedevs forum
Questions, comments -- Bas de Reuver (bdr1976@gmail.com)