Lightstreamer - Multiplayer Darts - HTML (LeapJS, Three.js) Client

Multiplayer, Leap Motion controlled, dart game running in the browser and using Lightstreamer for its real-time communication needs.

Live Demo

View live demo

Details

This application uses the JavaScript Client API for Lightstreamer to handle the communications with Lightstreamer Server, leapjs to read the users' hand movement through the Leap Motion Controller, and three.js to display the users' darts on the browser.

Each user controls a dart (the red one), which can be thrown toward the dartboard to score points while seeing how other players are faring (the green darts).

Install

If you want to install a version of this demo pointing to your local Lightstreamer server, follow these steps.

• As prerequisite, the Multiplayer Darts - Java Adapter has to be deployed in your local Lightstreamer server instance. Please check out that project and follow the installation instructions provided with it.
• Lightstreamer JS client is currently hot-linked in the html page: you may want to replace it with a local version and/or to upgrade its version.
• RequireJS is currently hot-linked in the html page: you may want to replace it with a local version and/or to upgrade its version.
• jQuery is currently hot-linked in the html page: you may want to replace it with a local version and/or to upgrade its version.
• leapjs is currently hot-linked in the html page (look for leap-0.6.0.min.js), but you may need to replace it with a local version. You can find the version currently used in the demo on Github, where newer versions are also available.
• three.js is currently hot-linked in the html page: you may want to replace it with a local version and/or to upgrade its version.
• Deploy this demo on the Lightstreamer Server (used as Web server) or in any external Web Server. If you choose the former, please create the folder <LS_HOME>/pages/demos/BananaDart and copy here the contents of the /src folder of this project. The client demo configuration assumes that Lightstreamer Server, Lightstreamer Adapters, and this client are launched on the same machine. If you need to target a different Lightstreamer server, please search in js/Constants.js this line:
  SERVER: protocolToUse+"//localhost:8080"
  and change it accordingly.
• Open your browser and point it to: http://localhost:8080/demos/BananaDarts/

Build

The html application can be optionally built, to reduce the number and size of the files to be downloaded by the browser, using r.js. A ready-made configuration file for the build process is available in the build_rjs folder of this project.

The build is configured to use Google Closure compiler to minify the files. To run it as-is, you need to download rhino js.jar file, compiler.jar from the closure compiler project and r.js from RequireJS. You also need a Java Virtual Machine installed on your system.

Once ready, from the build_rjs folder, run

java -cp compiler.jar;js.jar org.mozilla.javascript.tools.shell.Main r.js -o app.build.js

As an alternative, it is possible to customize the build file to use UglifyJS; in this case, it can be built using node.js instead of using the JVM.

See Also

Lightstreamer Adapter Needed by This Demo Client

• Lightstreamer - Multiplayer Darts - Java Adapter

Lightstreamer Compatibility Notes

• Compatible with Lightstreamer JavaScript Client library version 8.0 or newer.