JSFiddle - React, Tailwind, and code Playground

by juvian

CSS

#pacman{
    height:25px;
    width:25px;
    z-index:9998;
    position:absolute;
    top:0px;
    left:0px;
}
.ball{
    z-index:9997;
    width:15px;
    height:15px;
    border-radius: 50%;
    display:inline-block;
    background-image: -moz-radial-gradient(45px 45px 45deg, circle farthest-corner, #FF0 0%, #FFA500 100%, #F00 95%);
    animation-name: spin;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;    
}
.ghost{
    height:25px;
    width:25px;
    z-index:9999;
    position:absolute;
    top:0px;
    left:0px;     
}
#game{
    width:100%;
    height:100%;
    z-index:9990;
}
.hidden-cell{
    z-index:9991;
    display:none;
    position:absolute;
}
.cell{
    z-index:9991;
    display:block;
    position:absolute;    
}
#template{
    display:none;
}

JavaScript

$(function(){
    var QueryString = function () {
      // This function is anonymous, is executed immediately and 
      // the return value is assigned to QueryString!
      var query_string = {};
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
            // If first entry with this name
        if (typeof query_string[pair[0]] === "undefined") {
          query_string[pair[0]] = pair[1];
            // If second entry with this name
        } else if (typeof query_string[pair[0]] === "string") {
          var arr = [ query_string[pair[0]], pair[1] ];
          query_string[pair[0]] = arr;
            // If third or later entry with this name
        } else {
          query_string[pair[0]].push(pair[1]);
        }
      } 
        return query_string;
    } ();
    function isNumber(n) {
      return !isNaN(parseFloat(n)) && isFinite(n);
    }
    function Game(){
        this.width=$( document ).width();
        this.height=$( document ).height();
        this.fps=50;
        this.container;
        this.color="random";
        this.text={"text":"GTA 6to TIC A Forever ", "index": 0};
        this.path="http://www.masswerk.at/JavaPac/legacy/images/";
        this.images;
        this.character='pacman';
        this.remaining=0;
        this.game_runing=false;
        this.ais;
        this.ball='<div class="ball"></div>';
        this.fix={x:0,y:0};
        var game=this;
        
        this.AIManager=function(){
            this.ais=[];
            this.speed=3;
            this.images={};
            this.index=1;
           
            this.counter=1;
            var manager=this;
            this.createAI=function(x,y,img){
                var ai=new manager.AI();
                ai.x=x;
                ai.y=y;
                ai.images=img;
                
                manager.ais.push(ai);
            };
           ...