Wynn Netherland changelog.com/posts

rapt: Platform game in HTML5, Canvas, and jQuery

Ask ten people to define HTML5 and you’d probably get a dozen definitions. For Evan Wallace, Justin Ardini, and Kayle Gishen, it means gaming. The trio has released Robots Are People, Too (R.A.P.T), a platform game built using HTML5’s <canvas> API and jQuery. RAPT offers multiplayer gameplay and a level editor so you can extend the gameplay with your own creations.

Here’s a short gameplay video

Building your own game? View the RAPT source including the ~20,000 lines of JavaScript for techniques to handle things like collision detection


CollisionDetector.overlapCirclePolygon = function(circle, polygon) {
  // see if any point on the border of the the polygon is in the circle
    var len = polygon.vertices.length;
  for(var i = 0; i < len; ++i)
    // if a segment of the polygon crosses the edge of the circle
    if(this.intersectCircleSegment(circle, polygon.getSegment(i))) {
      return true;

    // if a vertex of the polygon is inside the circle
    if(polygon.getVertex(i).sub(circle.center).lengthSquared() < circle.radius * circle.radius) {
      return true;

  // otherwise, the circle could be completely inside the polygon
    var point = circle.center;
  for (var i = 0; i < len; ++i) {
    // Is this point outside this edge?  if so, it's not inside the polygon
    if (point.sub(polygon.vertices[i].add(polygon.center)).dot(polygon.segments[i].normal) > 0) {
            return false;
  // if the point was inside all of the edges, then it's inside the polygon.
  return true;


Hat tip to Dion.

[Source on GitHub] [Homepage]


Sign in or Join to comment or subscribe

Player art
  0:00 / 0:00