The JavaScript blog.


html5 graphics games 2d

Game Graphics with CutJS

Posted on .

CutJS demos and examples.

CutJS (GitHub: piqnt/cutjs, License: MIT) is a new game graphics library by Ali Shakiba. It's aimed at 2D graphics for cross-browser development, with support for desktop and mobile browsers.

The API is jQuery inspired, but because it works with the Canvas the author has introduced an interesting way of styling elements called "pinning":

A CutJS app consists of a tree of nodes, each node is pinned (transformed) against its parent and have zero, one or more image cutouts. Image cutouts comes from either image textures or Canvas drawing.

Each rendering cycle consists of ticking and painting the tree. On ticking nodes adjust themselves to recent updates and then on painting each node transforms according to its pinning, pastes its cutouts and then delegates to its children.

Cut "apps" are created by calling Cut with a function, and then textures can be added and manipulated with tween animations and events.

// Create new app
Cut(function(root, container) {  
  // Subscribe to Cut.Mouse
  Cut.Mouse(root, container);

  // Set view box
  root.viewbox(500, 300);

  // Create an image node
    // on mouse click on this node
    .on(Cut.Mouse.CLICK, function(ev, point) {
      // Tween scale values of this node
        scaleX: Math.random() + 0.5,
        scaleY: Math.random() + 0.5
      return true;

// Register an image texture
  name: 'base',
  imagePath: 'base.png',
  cutouts: [
    { name: 'box', x: 0, y: 0, width: 30, height: 30 }

There's a cool Asteroids game example that shows off some of the main features of the library.


JSON html5 node modules polyfills

picturePolyfill, Interfake

Posted on .


picturePolyfill (GitHub: verlok / picturePolyfill, License: MIT/GPL2) by Andrea Verlicchi allows you to use picture elements with srcset support so you can include high-DPI images. Here's an example with media queries:

<picture data-alt="A beautiful responsive image" data-default-src="img/1440x1440.gif">  
  <source src="img/480x480.gif"/>
  <source src="img/768x768.gif"   media="(min-width: 481px)"/>
  <source src="img/1440x1440.gif" media="(min-width: 1025px)"/>
  <source src="img/1920x1920.gif" media="(min-width: 1441px)"/>
    <img src="img/768x768.gif" alt="A beautiful responsive image"/>

It doesn't make multiple HTTP requests, so only the required images are fetched. It also takes into account browser event handling, so it won't run while the browser is being resized.


Interfake (GitHub: basicallydan / interfake, License: MIT, npm: interfake) by Daniel Hough is a module designed for client-side developers that makes it easy to create JSON APIs. You can create APIs using the command-line interface by making JSON files that define endpoints:

  "request": {
    "url": "/whattimeisit",
    "method": "get"
  "response": {
    "code": 200,
    "body": {
      "theTime": "Adventure Time!",
      "starring": [
      "location": "ooo"

It supports JSONP, and you can use it programmatically in Node. The documentation has some use-case ideas, like using it for a test API for a mobile application, automated testing, and static APIs.


html5 webgl physics


Posted on .

The Matter.js Wrecking Ball demo.

Matter.js (GitHub: liabru / matter-js, License: MIT) by Liam Brummitt is a stable and flexible rigid body physics engine for browsers. The author describes it as an alpha project that came about as a result of learning game programming.

If you're interested in reading more about physics for game programming, Liam has collected some useful resources in Game physics for beginners.

Matter.js uses time-corrected Verlet integration, adaptive grid broad-phase detection, AABB mid-phase detection, SAT narrow-phase detection, and other algorithms for managing collisions and physical simulation. More well-known engines like Box2D support these features, but if you take a look at the some of the classes Liam has written then you'll see how clean and readable his version is.

I've been looking at the source to see how to use it, and the API seems friendly to me:

var Bodies = Matter.Bodies;  
var Engine = Matter.Engine;  
var engine = Engine.create(container, options);  
var World = Matter.World;

World.addBody(engine.world, Bodies.rectangle(300, 180, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }));  
World.addBody(enigne.world, Bodies.rectangle(300, 70, 40, 40, { friction: 0.001 }));  

The demo is cool, so try it out if you want to experiment!


html5 games maps webgl

ViziCities, Flappy Bird in HTML5

Posted on .



ViziCities (Demo, GitHub: robhawkes / vizicities, License: MIT) by Robin Hawkes and Peter Smart is a WebGL 3D city and data visualisation platform. It uses OpenStreetMap, and aims to overlay animated data views with 3D city layouts.

The developers have created some visualisations of social data, traffic simulation, and public transport.

It uses Three.js, D3, Grunt, and some stalwarts like Moment.js and Underscore.js.

Flappy Bird in HTML5 with Phaser

Thomas Palef, who has been making one HTML5 game per-week, has created a tutorial for making Flappy Bird in HTML5 and Phaser. The cool thing about the tutorial is he reduces Flappy Bird to its basic parts -- collision detection, scoring, and the player controls. Instead of worrying about whether or not the graphics are stolen from Mario, you can just follow along and learn how a game like this works.


jquery ui html5 mobile plugins widgets cryto

jQuery Roundup: Fine Uploader, SimpleSlideView, jQuery.uheprnGen

Posted on .

Note: You can send your plugins and articles in for review through our contact form.

Fine Uploader

Fine Uploader

Fine Uploader (GitHub: Widen / fine-uploader, License: GPLv3) by Mark Feltner is a client-side library for managing file uploads. It's free of dependencies, but there's a jQuery plugin for convenience. It supports multiple file uploads, progress bar, drag and drop, upload cancelation, validation, and direct to Amazon S3 uploads. S3 uploads work using CORS, and XHR2 is used for browsers with File API support and monitoring upload progress.

The author maintains a blog about the project, and a recent post includes details on the S3 support.


SimpleSlideView (GitHub: cloudfour / SimpleSlideView, License: MIT) by Tyler Sticka is a mobile-style UI widget for displaying and managing animated view hierarchies:

This plugin was designed to work well with non-fixed layouts, which means it can be helpful to scroll to the top of the window or container prior to a view changing. If a $.scrollTo plugin is available, SimpleSlideView will attempt to use it by default. It has been tested with jquery.scrollTo and ZeptoScroll.

The views are divs marked up with a container so they can be displayed and hidden as needed. Data attributes are used to associate navigation with markup: a link with data-popview or data-pushview allows movement through the view hierarchy. There's also a JavaScript API for managing this.

The readme has full documentation and an example for using it in a responsive interface.


jQuery.uheprnGen (GitHub: ryanmcdonough / jQuery.uheprnGen, License: Public Domain) is Ryan McDonough's first attempt at a jQuery plugin, but it's cool because it wraps around Steve Gibson's UHE PRNG script, which stands for Ultra-High Entropy Pseudo-Random Number Generator.

This carefully designed PRNG utilizes more than 1536 bits of internal state memory. The operating parameters of the generator's algorithm were carefully chosen (it uses a safe prime factor) to guarantee that every possible PRNG state is visited before the sequence begins to repeat.

With Ryan's script, you can call $(this).uheprngGen({ range: 100, count: 10001 }); to generate 10001 random numbers with a range of 0 to 100.