JSFiddle - React, Tailwind, and code Playground

by Trifan Alexandru

HTML

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://github.com/craftyjs/Crafty/releases/download/0.6.3/crafty-min.js"></script>
<title>Physics System II</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
<body>
<!-- Start your code here -->
<p id="p"><p>    
<!-- End your code here -->
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

JavaScript

$(document).ready(function(){
	
Crafty.init(window.innerWidth,window.innerHeight);
var player = Crafty.e();
player.addComponent("2D, Canvas, Color, Collision"); 
player.color("red").attr({w:50,h:50,x:0,y:0}).collision();
player.onHit("Block", function(){ block.color("green"); });

var block = Crafty.e();
block.addComponent("2D, Canvas, Color, Collision, Block");
block.color("blue").attr({w:200,h:20,x:100,y:100}).collision();

// Jump Height = velocity ^ 2 / gravity * 2
// Terminal Velocity = push * (1 / viscosity)
player.mass = 1;				//kilogrammes
var gravity = 1;			//meters per second squared
var viscosity = 0.2;		//ratio of resistance to velocity
var frame = (1 / 20);		//seconds - time per frame
var distanceMultiplier = 10;//pixels per meter
var timeMultiplier = 20;	//relative to actual time
var keystart = [];
var keyfinish = [];
var keyboard = [];

player.a = {};
player.a.extradistance = 0;		//meters
player.a.velocity = 0;			//meters per second
player.a.acceleration = 0;		//meters per second squared
player.a.force = 0;				//Newtons - resultant force
player.a.resistance = 0;		//Newtons - air resistance
player.a.push = 0;				//Newtons - directly upwards

player.v = {};
player.v.extradistance = 0;		//meters
player.v.velocity = 0;			//meters per second
player.v.acceleration = 0;		//meters per second squared
player.v.force = 0;				//Newtons - resultant force
player.jumping = false;

function horizontal(){
  
if(keyboard[38] && !player.jumping){
  	player.v.velocity = 5;
    player.jumping = true;
}

if(keyboard[38] && player.jumping){
	var now = new Date();
	if( now.getTime() - keystart[38].getTime() < 500){
		player.v.velocity = 5;
	}
	document.getElementById("p").innerText = now.getTime() - keystart[38].getTime();
}

if(keyboard[37] && keyboard[39]){
  player.a.velocity = 0;  
} else {
  if(keyboard[37]){
    player.a.velocity = -5;
  }
  if(keyboard[39]){
    player.a.velocity = 5;
  }
} 
  
if(keyboard[40]){
  player.v.velocity = -5;
}
  
  player.a.force =...