Easy HTML5 2D physics with PhysicsJS

Let me show you a new and promising physics engine you can use in your HTML5 games: PhysicsJS by Well Caffeinated.

physicjs

It’s a modular, extendable, and easy-to-use physics engine for javascript which is still under development and misses some features and most of the documentation, but there are a couple of things I liked a lot, such as:

* easiness to create your own renderer, there’s also a contest about this topic

* simple and quick way to detect a body given a point

* interesting world and timestep management

So here my version of the classic “create a box/remove a box”:

Click on an empty space on the canvas to create a box, or on an existing box to remove it.

Here is the commented source code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>PhysicsJS</title>
  		<script src="physicsjs-full.js"></script>
  		<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
		<style>
			body {
				margin:0px;
			}
			#canvasid{
				background-color:black;
			}
		</style>
		<script>
			$(document).ready(function(){
				// world declaration
				var world = Physics();
				// creation of the renderer which will draw the world
				var renderer = Physics.renderer("canvas",{
    					el: "canvasid",	// canvas element id
					width: 640,		// canvas width
					height: 480,		// canvas height
					meta: false		// setting it to "true" will display FPS
				});	
				// adding the renderer to the world
				world.add(renderer);
				// what happens at every iteration step? We render (show the world)
				world.subscribe("step",function(){
    					world.render();
				});
				// this is the default gravity
				var gravity = Physics.behavior("constant-acceleration",{
    					acc: {
						x:0, 
						y:0.0004
					} 
				});
				// adding gravity to the world
				world.add(gravity);
				// adding collision detection with canvas edges
				world.add(Physics.behavior("edge-collision-detection", {
      				aabb: Physics.aabb(0, 0, 640, 480),
	      			restitution: 0
  				}));
  				// bodies will react to forces such as gravity
  				world.add(Physics.behavior("body-impulse-response"));
  				// enabling collision detection among bodies
  				world.add(Physics.behavior("body-collision-detection"));
				world.add(Physics.behavior("sweep-prune"));
			     $("#canvasid").click(function(e){
			     	// checking canvas coordinates for the mouse click
					var offset = $(this).offset();
					var px = e.pageX - offset.left;
     				var py = e.pageY - offset.top;
     				// this is the way physicsjs handles 2d vectors, similar at Box2D's b2Vec
					var mousePos = Physics.vector();
     				mousePos.set(px,py);
     				// finding a body under mouse position
     				var body = world.findOne({
						$at: mousePos
					})
					// there isn't any body under mouse position, going to create a new box
					if(!body){
				     	world.add(Physics.body("convex-polygon",{
        						x: px,
        						y: py,
        						vertices: [
        							{x:0, y:0},
        							{x:0, y:60},
        							{x:60, y:60},
        							{x:60, y:0}
        
    							],
    							restitution:0.5,
      					}));
					}
					else{
						// there is a body under mouse position, let's remove it
						world.removeBody(body);
					} 
				})
				// handling timestep
  				Physics.util.ticker.subscribe(function(time,dt){
    					world.step(time);
  				});
				Physics.util.ticker.start();
			})
		</script>		
	</head>
<body>
	<canvas id="canvasid" width="640" height="480"></canvas>
</body>

</html>

And you can also download the source code with all required libraries.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers