JSFiddle - React, Tailwind, and code Playground

by Umar

HTML

<script src="https://dl.dropbox.com/u/200135/js/Box2dWeb-2.1.a.3.min.js"></script>
<script src="https://dl.dropbox.com/u/200135/js/boxbox.min.js"></script>
<script src="https://dl.dropbox.com/u/200135/js/keyDecode.js"></script>
<canvas id="game" width=625 height=380>
    Text that you see if you don't support Canvas :(
</canvas>

JavaScript

(function( global ) {

	var canvasElem = document.getElementById( "game" );
	var world = boxbox.createWorld( canvasElem, { collisionOutlines: false } );

	var bird = world.createEntity({
		name: "bird",
		shape: "circle",
		radius: 1,
		image: "https://dl.dropbox.com/u/200135/imgs/red-bird.png",
		imageStretchToFit: true,
		density: 4,
		x: 2,
		onKeyDown: function( e ) {
			var key = global.keyDecode( e ),
				force = 600;

			console.log( "key", key );
			switch ( key ) {
				case "left":  this.setForce( "movement", force, 270 ); break;
				case "up":    this.setForce( "movement", force,   0 ); break;
				case "right": this.setForce( "movement", force,  90 ); break;
				case "down":  this.setForce( "movement", force, 180 ); break;
				default:      this.applyImpulse( 200,  60 );
			}
			this.friction( 0.1 );
		},
		onKeyUp: function( e ) {
			this.clearForce( "movement" );
		},
		onRender: function( ctx ) {
			ctx.font = "20pt Arial";
			ctx.fillText( "Score: " + this._ops.score, 20, 20 );
		},
		score: 0
	});

    $( canvasElem ).on( "click", function() {
        bird._ops.onKeyDown.apply( bird, [ { keyCode: 50 } ] )
    });
    
	world.createEntity({
		name: "ground",
		shape: "square",
		type: "static",
		color: "rgb(0,100,0)",
		width: 22,
		height: 0.5,
		y: 12
	});

	var block = {
		name: "block",
		shape: "square",
		color: "brown",
		width: 0.5,
		height: 4,
		y: 10,
		onImpact: function( entity, force ) {
			if ( entity.name() === "bird" ) {
				bird._ops.score++;
				this.color( "black" );
			}
			if ( force > 100 && entity.name() !== "ground" ) {
				this.destroy();
			}
		}
	};

	world.createEntity( block, { x: 13 } );

	world.createEntity( block, { x: 19 } );

	world.createEntity( block, {
		x: 16,
		y: 7,
		width: 7,
		height: 0.5
	});

	var pig = world.createEntity({
		name: "pig",
		shape: "circle",
		radius: 1,
		image: "https://dl.dropbox.com/u/200135/imgs/soldier-pig.png",
		imageStretchToFit: true,
		density: 4,
		x: 16.5,
		y:...