bdr76 / lcdgame.js

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, Eagle n Chicken and Mario's Cement Factory, incl. online highscores lists.

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 could be updated with bug fixes or possibly additional game devices, so in that sense it remains work in progress.

play the LCD games here

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

Support the lcdgames.js project by buying the developer a coffee!

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 largly finished, all the main features have been added, but here is a list of possible future improvements (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 and/or tutorial elements (separate dom-elements?)
• allow button/keys re-mapping
• 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 code and data. This also involves taking a microscope image and visually decoding the zeros and ones. This is feasible, but considering the sheer amount and variety of different LCD games this is very time consuming and expensive, not to mention it destroys the MCU in the process. 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

31-dec-2019 v0.3.4 added Cement Factory, minor fixes in GUI and highscores
02-dec-2018 v0.3.3 added Jungle Kong, Eagle n Chicken, added highscore filter options
08-oct-2018 v0.3.2 added Donkey Kong II, Tom's Adventure, 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 ([email protected])

lcdgame.js's Issues

Highway game immediately disappears offscreen. TypeError bug

Hello. When I try to load the Highway game (in any Chrome, Firefox, private/incognito etc. ) it shows for a second then disappears
I get this error in Console

The key "target-densitydpi" is not supported.
lcdgame.min.js:3 lcdgame.js v0.3.4 :: start
2inject.js:625 Uncaught TypeError: Cannot read properties of null (reading 'contains')
at checkForVideo (inject.js:625:33)
at inject.js:667:17
at NodeList.forEach ()
at inject.js:665:37
at Array.forEach ()
at requestIdleCallback.timeout (inject.js:651:19)

Thank you.

Fire / Parachute games

Hi,

Congrats for your work !

I would love to be able to play to Fire and Parachute games some day. I find them really great and they have a big place in my child hood.

Cheers

feature req : add an option to invert Q/A (AZERTY board)

Hello !

Thanks for the games.
I tried the mario bros one, be it would be easier if I could invert Q/A because I'm on azery board and these touch are inverted compared to the qwerty board.
Thank