JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="gameStart" style="display:none">
<h1>Game Introduction!</h1>
<button id="btnStart">Start</button>
</div>
<div id="game" style="display:none">
Score: <span class="score">0</span>
<div class="gameScreen"></div>
</div>
<div id="gameOver" style="display:none"></div>

CSS

.gameScreen{
  width:300px;
  height:300px;
  border:solid black;
  background:#ccc;
}
.target{
  width:30;
  height:30;
  border-radius:15;
  background:red;
}
.score {
  color: #ff0000;
}

JavaScript

var Views = function(views){
  if(!views||!views.length){
  	views = [];
  }
  hideAll = function(){
  	for(var index = 0; index < views.length; index++){
    	views[index].hide();
    }
  }
  
  show = function(id){
  	hideAll();
    $("#"+id).show();
  }
  
  return {
  	hideAll:hideAll,
  	show:show		
  }
}

var GameIntro = function(){
	$("#btnStart").off("click").on("click",function(){
  Game();
  	mainViews.show("game");
  });
}
var targetCount = 0;
var gameUtility = {
	generateRandomNumber:function(min, max) {
    return Math.random() * (max - min) + min;
  }
}
var Target = function(){
	var width = 20;
  var height = 20;
  var time = Math.round(gameUtility.generateRandomNumber(1, 5)*100)/100;
  var currentClass = "target_" + targetCount;
  var html = "<div class='target " + currentClass + "' ></div>";
  
  targetCount++;
  
  function update(){
  	$("." + currentClass).html(Math.round(time*100)/100);
  	time -= 0.01;
  }
  return {
  	html:html,
    update:update
  }
}
var Game = function(){
	var frameTime = 0.01;
  var timeoutHandle;
  var targets = [];
	init = function(){
  	addTarget();
  	gameLoop();
  }
  
  addTarget = function(){
  	var target = new Target();
    $(".gameScreen").append(target.html);
    targets.push(target);
  }
  
  gameLoop = function(){
  	timeoutHandle = setTimeout(function(){
    	gameLoop();
    }, frameTime);
    
    for(var index = 0; index < targets.length; index++){
    	targets[index].update();
    }
  }
  init();
}

var mainViews;
$(document).ready(function(){
	mainViews = Views([$("#gameStart"), $("#game"), $("#gameOver")]);
  mainViews.show("gameStart");
  GameIntro();
});