conradev / webn.es

An NES emulator for everyone

An NES emulator for everyone

http://webn.es

An NES emulator for everyone.

webNES is a web-based NES emulator for mobile. You can access the web app on any mobile browser. You can add ROMs via Dropbox and use the emulator while offline. The touch based controls are just as responsive as a native app.

The emulator was based off of the existing JSNES (https://github.com/bfirsh/jsnes) library, with modifications to support the HTML5 Web Audio API. We used jQuery to build the touch interface, Local Storage and WebSQL to store the ROMs offline. It also supports the HTML5 Offline Application Cache, allowing you to use the emulator with no internet connection. It can even be added as an icon to the home screen for a full screen, immersive experience.

Above, there is the portrait UI and Super Mario Brothers.

webNES menu screen

Donkey Kong

Importing ROMs from DropBox

The Developers

• Conrad Kramer @conradev
• Jared Wright @jawerty
• Bogdan Vitoc @bogidon
• Evan Klein @elklein96

Props to the Creator of jsNES

• Ben Firshman @bfirsh

This app was built during the spring PennApps 2014 hackathon by Conrad, Jared, Bogdan, Evan and was a finalist (top 10).

webn.es's Issues

Images

hello, sorry for my English, I'm Spanish.
after testing the mobile web I see that if you hold a key (image) I hold a while, the browser will jump with a message, image save, open etc. ..
I think it would be nice to use a power tipografias, can create icons in this web http://icomoon.io/app and then by adding css, I think that's the problem of the image hold is resolved.
a greeting, continue with the project, is very good.

Outdated Dropbox API

This issue is preventing webNES from working. The plus (add games) button isn't working, and the homebrew ROMs aren't showing up.

Not working

It doesn’t seem to be working anymore

There is little ROMs

There is no zelda Mario ect

is it not working anymore ?

i tried the website on my pc and on my phone but its not working , am i missing anything ?

Not working on android

On any web browser I use I can't get any thing to work just lodes webn.es with the top bar showing up and that it when I.but the plus to go to Dropbox nothing happens at all

Sorry, but how to use it? Cannot find an entry to load .nes file

Hi,

I tried this project but I don't know how to start. Open index.html there is just description of this project, I cannot find an entry to load .nes files, nor how the js library is invoked. Can anybody help?

BTW, the images in README.md cannot be found.

Web Audio API NES sounds gimped in Mobile Safari, iOS WKWebView, and Android Browsers

Brilliant move, fellas, using Web Audio API for sound emulation. I am unlocking the audio context on touchend (due to breaking changes in iOS 9.2) but no dice playing back sound samples on ui.writeAudio in Mobile Safari, iOs WKWebViews, and Android Browsers. Working fine in my Chrome and Firefox desktop browsers, though.

Have you encountered a workaround? Silent NES is only half the fun :/

Example here

Support Gamepad API

It would be nice to support controllers like the Backbone One using the Gamepad API

Use IndexedDB instead of WebSQL

webn.es doesn't work on any mobile device that is not WebKit/Blink, e.g. Windows Phone, Firefox OS Phone, etc. because it uses openDatabase() to get a WebSQL database. Please consider switching to IndexedDB.

IndexedDB API is verbose and troublesome but there are library available for simpler usage.

Switch from the Dropbox API to the file picker

Switch to a standard upload file button, because this now shows the file picker on iOS

Upstream

Would be great to get some of this stuff upstream in JSNES if you'd be willing to put together some PRs!

Not pixelated- solution provided

It looks blurred instead of pixelated. Easy fix: add this to the canvas in index.html.
style="image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: -o-crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; "
i.e. replace
<canvas id="screen" width="256" height="240"></canvas>
with
<canvas id="screen" width="256" height="240" style="image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: -o-crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; "></canvas>
Nothing needs to be changed other than index.html in my experience. An option could be provided to switch between nearest neighbor (what this enables) and linear interpolation (default).
Comparison: My method:

Default: