Home / JavaScript / Web Game

HTML5 Port of XMoto (2D Canvas + Box2D)

XMoto.js DEMO This project is a HTML5 Port of XMoto using CoffeeScript, PixiJS and Box2DWeb. This is the first part of a 2-parts project: XMoto.js (this project!): JavaScript port of the game that need to be compatible wi
Information
Category: JavaScript / Web Game
Watchers: 8
Star: 67
Fork: 8
Last update: Mar 17, 2023
Resource links
http://js.xmoto.io
https://github.com/MichaelHoste/xmoto.js

XMoto.js

DEMO

This project is a HTML5 Port of XMoto using CoffeeScript, PixiJS and Box2DWeb.

Image

This is the first part of a 2-parts project:

  1. XMoto.js (this project!): JavaScript port of the game that need to be compatible with a lot of pre-existing levels (XML files) from the original game.
  2. XMoto.io: social XMoto game with a backend for scores, replays, etc.

XMoto.io will be built on top of XMoto.js, using Ruby on Rails, and both the projects will co-evolve and interact in some parts.

More about the project development on http://xmoto.io (not up-to-date but good intro).

Demo

Master branch is frequently deployed here: http://js.xmoto.io

Click on the "debug mode" button and have fun with the simulation parameters. You can copy-paste the generated URL to keep the custom physics.

Examples:

Usage

  • Upload "data", "lib" and "bin" folders on a static web server (put 'data' folder on the root directory)
  • Include all the JavaScript files of /lib/ and /bin/xmoto.js on your web page.
  • Call $.xmoto('l1.lvl') or $.xmoto('l1.lvl', options) where "l1.lvl" is the name of the level and the options are:
{
  canvas:  '#xmoto'   # canvas selector
  loading: '#loading' # loading selector
  chrono:  '#chrono'  # chrono selector
  width:   800
  height:  600
}

Developpment

Installation

  • brew install nodejs yarn to install NodeJS and YARN (on MacOS)
  • yarn install to install development dependencies

Working environnement

  • ./node_modules/coffeescript/bin/coffee -j bin/xmoto.js -wc src/*.coffee src/*/*.coffee to compile to JavaScript in real-time.
  • node server.js to launch HTTP Server (http://localhost:3001).

Don't forget to restart the coffee command if you create new COFFEE files.

TODO

  • Improve XML levels compatibility => layeroffsets (parallax)
  • Convert to camelCase (use Humps? Find a way to fix Box2D .GetPosition() absurdity)
  • Create alternative box2D physics using DIV elements on screen.

and other stuffs

5 Open More issues
Closed

Hide the ghosts that are off the screen

And check that nothing is displayed off the borders of the screen

enhancement 
opened Mar 24, 2014 by MichaelHoste 1
Closed

Improve camera

Move camera left/right/up/down depending on moto direction and moto speed (transfer @object_to_follow to camera)

enhancement 
opened Mar 24, 2014 by MichaelHoste 1
Closed

Optimize display (has to be smooth on Firefox!)

  • Optimize buffer size?
  • Create second buffer to only compute the borders of the main buffer?
  • Completely remove the buffer since this is a lot faster than before and the copy-paste of pixels of buffer takes too much time ?
enhancement 
opened Mar 24, 2014 by MichaelHoste 1
Closed

Replace HTML5 canvas2D with Pixijs

  • Better API using Pixijs
  • canvas2D and WebGL compatibility.
  • Use of AABB to avoid to display of blocks/edges/sprites/borders out of the screen.
  • Improved debug mode.
  • Faster (no need for background buffer anymore).
  • Easier code.
opened Oct 15, 2016 by MichaelHoste 0
Closed

Give options to XMoto via direct values instead of DOM

Better for AngularJS (among others) to inject options to XMoto (DOM is refreshed "when it has time so we needed to use setTimeout)

(Use "watch" on AngularJS)

enhancement 
opened Mar 31, 2014 by MichaelHoste 0
Open

Bump express from 4.17.1 to 4.17.3

Bumps express from 4.17.1 to 4.17.3.

Release notes

Sourced from express's releases.

4.17.3

4.17.2

Changelog

Sourced from express's changelog.

4.17.3 / 2022-02-16

4.17.2 / 2021-12-16

Commits

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies 
opened Dec 10, 2022 by dependabot[bot] 0
Open

Improve replay files

NOW

Currently the replays are saved with :

  1. positions of left_wheel, right_wheel, body, torso, upper_leg, lower_leg, upper_arm, lower_arm. And also an information about moto direction (left or right).
  2. Each position is represented by x, y and angle (we only keep 2 decimals precision (1 cm) to create smaller files and smaller network communications. And separators are needed to separate all the numbers.)
  3. 10 frames par second for replays are a good compromise (one frame every six). The other frames are interpolated when the replays are run.

Size : So, for every minute of replay, we need about 9 moto parts x 3 values x 6 chars ("00.00" + separator) x 10 frames x 60 seconds = ~ 100ko of disk space.

We save about half of this size by compressing with lz-string but it's not enough if we want to have millions of saved replays

And while it works fine, we may have a problem when we'll introduce physics elements in the level because each of the "movable" element will need to have all its positions saved as well !

Pros:

  • It's already working.
  • It's really fast to run a replay (no physics recalculations).

Cons:

  • Heavy replay files (100ko/min)
  • Cheat-friendly (No really easy way to know if a replay if legit)
  • Doesn't work if other physics objects in the level (boxes, elastic bridges, etc.).

Improved solution?

Since the physics of the game is created so that it doesn't depend AT ALL on the framerate and is always fixed as 60 steps/second, we should be able to re-create every replay with only the player's inputs (up, down, left, right, space).

Pros:

  • Light replay files.
  • More difficult to cheat (replays are legit since the physics are computed again each time).
  • Work well with other physics objects in the level (boxes, elastic bridges, etc.).

Cons:

  • Slower to run replays (but don't seem critical)

Solution 1

We know that each input is either true or false, at anytime (a key is pressed or it is not). So we could consider storing inputs in binary format with a small library like bitview.js.

We'll need only 6 bits per physics step : up, down, left, right, space and another bit for a potential future input (like a boost). In this situation, we must save each one of the 60 steps per second.

Size : 6 bits x 60 steps x 60 seconds = 21600 bits = 2700 octets = 2.6ko. About 40 times less than the previous format !

And with this solution, we can introduce movable physics elements without even thinking about saving them since the physics engine will reproduce exactly the same behaviour without any additional information.

The only counterpart is that it will need more CPU power to re-generate the new positions of the ghosts. But Box2D is fast and the drawings are much more CPU intensive.

Solution 2

Instead of keeping the "true" or "false" information of every input at each step, we could try keeping only the changes of these inputs.

If the player start pressing "up" at step 100 and stop at step 120, and then press again at 159 and stop at 201, we could only save :

{ 
  up_pressed: [100, 159], 
  up_released: [120, 201]
}

It could be interesting since there will have far less actions than steps. According to my tests, there are about 200 input changes every 60 seconds. A rate of about 3 or 4 by second.

If we store the replays like this 100,159|120,201,... and supposing replays are shorter than 3 minutes (so steps of less than 4 digits) with a separator.

Size: (4 digits + 1 separator) x 200 = 1000 octets = 1ko. Even less than the previous format without even using binary representation!

And we still can compress with lz-string to save about 50% of the final size. We get to a point where we could store the replays in the DOM of the web pages and not getting them by additional HTTP requests.

Solution 3

Same as solution 2 but instead of storing up_pressed: [950, 1010] where the up key is pressed at step 950 and then 1010, we could store as up_pressed: [950, 60] for the same behaviour, where each number represents the delta since the last action.

In this simple example we gain 2 digits/octets on the final representation.

fixed? 
opened Apr 5, 2014 by MichaelHoste 1
Open

Refactor player replay outside of "ghosts"

best replay will not always be a ghost

enhancement 
opened Mar 31, 2014 by MichaelHoste 0
Open

Understand impact of "scale" and "depth" of edges.

See EdgeEffect in https://github.com/MichaelHoste/xmoto.js/blob/master/data/Themes/modern.xml

Maybe it's not soooo useful since the edges have no impact at all on physics and are just cosmetic

enhancement 
opened Mar 24, 2014 by MichaelHoste 0
Open

Particles when drifting

See Particles.coffee Some of the code already works (deactivated) but it was ugly.

enhancement 
opened Mar 24, 2014 by MichaelHoste 0

Contents

    ByteArena Box2D.go - Go port of Box2D - a 2D Physics Engine for Games.
    erincatto Box2D is a 2D physics engine for games
    erincatto A small 2D physics engine
    bastacyclop wrapped2d - Rust binding for Box2D
    fabricjs Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
    fabricjs Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
    Mikhus HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.
    Automattic Node canvas is a Cairo backed Canvas implementation for NodeJS.
    ZYSzys vue-canvas-nest - A Vue.js component for canvas-nest.
    fabricjs Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
    cbrandolino HTML5 webcam to canvas stream
    ZYSzys :dizzy: A Vue.js background component for canvas-nest.
    konvajs Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
    crnacura Five ambient webpage backgrounds created using the HTML5 Canvas API and jwagner's Simplex Noise library.
    photonstorm Phaser CE is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
    photonstorm Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
    vanderlin Openframework wrapper for box2d
    manuelbua A GLES2 top-down racer, built on top of libgdx and Box2D.
    pawlik92 Flutter UI challenge (with Box2D physic)- Smart washing machine app
    Masterminds An HTML5 parser and serializer for PHP.
    mishig25 Neuroevolution demo through TensorFlow.js, Neataptic, and Box2D
    Share this repo

    Related Repos


    Web Game
    137
    Perfect interpolation for multiplayer cursors.
    steveruizok perfect-cursors Perfect interpolation for animated multiplayer cursors. Used in tldraw. 💕 Love this library? Consider becoming a sponsor. Installatio
     
    Web Game
    3
    Tic Tac Toe game on React
    SalehaShujaat786 Tic Tac Toe game on React This is a basic tic tac toe game using Redux layers To start this project: Run npm install npm start, if no port is already
     
    Web Game
    7
    A game of minesweeper with only one square to sweep. Fun for the whole family.
    tholman One Square Minesweeper A game of minesweeper that is easy to complete (or lose). Play at https://onesquareminesweeper.com. Instructions Right click (o
     
    Web Game
    6
    The objective of this project is to develop a networked multiplayer tetris game from a sta...
    Ysrbolles Red-tetris-42Network The objective of this project is to develop a networked multiplayer tetris game from a stack of software exclusively Full Stack J
     
    Web Game
    2
    This is the parenscript source for "Bondi's Box: Christmas Edition", an HTML5 falling/sta...
    trevorjay This is the parenscript source for "Bondi's Box: Christmas Edition", an HTML5 falling/stacking puzzle game.
     
    Web Game
    3.6k
    A simple Verlet physics engine written in javascript
    subprotocol verlet-js A simple Verlet (pronounced 'ver-ley') physics engine written in javascript. Particles, distance constraints, and angular constraints are al
     
    Web Game
    3.4k
    A modular, extendable, and easy-to-use physics engine for javascript
    wellcaffeinated This project is no longer maintained It's been many years since writing this library. And I don't have time to dedicate to maintain it. On the up side
     
    Web Game
    2.4k
    JavaScript 2D physics library
    schteppe p2.js 2D rigid body physics engine written in JavaScript. Includes collision detection, contacts, friction, restitution, motors, springs, advanced con
     
    Web Game
    5
    slingshot game, a Cordova App.
    En777 这是一个弹弓射击小游戏。 游戏基于 matter.js 引擎，可以快速实现物理弹跳、碰撞等游戏特效。 打包 App 基于 Cordova 和 Github Actions。 Git 仓库推送一个 tag 到 Github 仓库， Actions 会自动打包构建，得到一个app文件: xx.apk，并
     
    Web Game
    4
    super mario game with pure js no framwork
    mostafa-kheibary SuperMario-game the perview Available on github page you just can play with keybourd (A,D,Space) super mario game with pure js no framwork what is in
     
    Web Game
    8
    game engine built on top of deno_sdl2
    load1n9 game engine built on top of deno_sdl2 Usage import { World, Rectangle } from '../mod.ts'; class Game extends World { public test = new Rectangle
     
    Web Game
    4
    Framework for expressing Conway's Game of Life in n-dimensional space
    bignimbus Game of Lifen About This is a framework for expressing Conway's Game of Life in an n-cube of arbitrary size. Game of Lifen started as an exercise in f
     
    Web Game
    152
    Red light green light game from squid game made using JavaScript and Three.js
    0shuvo0 Red light green light game from squid game made using JavaScript and Three.js
     
    Web Game
    3
    Multiplayer Asteroids Homage
    croquet Croquet Multiblaster This is an homage to Asteroids, implemented as a single HTML page without any backend code. All clients are kept in sync automati
     
    Web Game
    3.6k
    a fresh & lightweight javascript game engine
    melonjs melonJS 2 A fresh, modern & lightweight HTML5 game engine melonJS 2 is a modern version of the melonJS game engine. It has been rebuilt almost entirel