JSFiddle - React, Tailwind, and code Playground

by Kivylius

HTML

<canvas></canvas>
<div id="fps"></div>
<div id="info">Move the box with arrow key's</div>

CSS

#fps {
    position:absolute;
    top:5px;
    left:5px;
    border:1px solid silver;
    opacity:0.5;
    background:white;
    padding:5px;
    font-size:12px;
    outline:1px solid gray;
}

#info {
    position:absolute;
    left:75px;
}

JavaScript

function curveA2B(a,b){
    
        var mindpoint = {
            x: (a.x+b.x)/2,
            y: (a.y+b.y)/2,
            d: Math.sqrt(Math.pow(b.x-a.x,2) + Math.pow(b.y-a.y,2))
        };
       
        tetris.context.beginPath();
        tetris.context.arc(
            a.x,
            a.y,
            mindpoint.d/2,
            1.5*Math.PI,
            0,
            false
        );
        
        tetris.context.arc(
            b.x,
            b.y,
            mindpoint.d/2,
            1*Math.PI,
            0.5*Math.PI,
            true
        );
        
        tetris.context.stroke();
        
    }






































var Game = function() {

	var _self = this,
		_vsync = 60, 
		_running = false, 
		_started = false, 
		_refreshrate = 100,
		_frameTime = 0, 
		_lastLoop = new Date, 
		_thisLoop;

	// The higher this value, the less the fps will reflect temporary variations
	// A value of 1 will only keep the last value and most correct
	this.filterStrength = 1; 
    
    this.settings = {
        auto_clear_pressed: false
    }

    var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };

	this.update = function(){
		// The game update loop. 
		// Should be overwriten by user;
		console.log("Game is running.");
	}

	this.draw = function(){
		// The draw of any elements
	};

	this.start = function() {

		if( _running === true) return false; // brake; Game is already running
		else _started = _running = true; // set the game to started and running

		var RequestAnimationFrame = (function(){
			return  window.requestAnimationFrame  || 
					window.webkitRequestAnimationFrame || 
					window.mozRequestAnimationFrame || 
					window.oRequestAnimationFrame      || 
					window.msRequestAnimationFrame || 
					function(callback, element){ 
						setTimeout(function(){ callback((new Date).getTime()); },...