JSFiddle - React, Tailwind, and code Playground

HTML

<div class="game">
		<div class="hero"></div>
		<div class='result'><button type="button" class="start">Start Game</button></div>
	</div>
	<div class="info">
		<span class="herolife"></span>
		<span class="enemylife"></span>
	</div>

CSS

* {margin:0;padding:0;}
html {
width:100%;
height:100%;
overflow:hidden;
background:gray;
}
.game {
width:480px;
height:360px;
border:0px solid black;
position:absolute;
left:50px;
top:50px;
overflow:hidden;
background:url('http://s8.postimg.org/dfonflmtx/bckgrnd.png') repeat;
background-size:cover;
}
.hero {
width:24px;
height:30px;
background:url('http://s8.postimg.org/mejb6dh3l/arif2.png');
position:absolute;
bottom:160px;
left:20px;
}
.enemy {
width:20px;
height:40px;
background:url('http://s8.postimg.org/6632ww89d/enemy.png');
}
.boss {
width:80px;
height:150px;
background:url('http://s8.postimg.org/442linaa9/boss.png');
}
.info {width:480px;background:url('http://s8.postimg.org/dfonflmtx/bckgrnd.png');background-size:cover;height:20px;position:absolute;left:50px;top:31px;color:white;font-family:verdana;font-weight:normal;color:#f1f1f1;}
.info .herolife {float:left;height:18px;width:100px;background:royalblue;margin:5px;}
.info .enemylife {float:right;height:18px;width:100px;background:tomato;margin:5px;}

.result {
width:100%;
font-size:30px;
margin:auto;
text-align:center;
padding-top:30%;
color:grey;
font-family:verdana;
}
.start {
display:block;
padding:8px;
color:grey;
font-size:25px;
margin:auto;
background:#464646;
color:white;
border:0px solid black;
cursor:pointer;
}

JavaScript

//Configure the Variables;
var bNum=1;
var ebNum=1;
var totalB=0;
var totalG=0;
var totalEnemy=0;
var EnemyCapacity=25;
var Life=5;
var bossActive="no";
var bossLife=50;

//Configure the size of Elements
{
heroHeight=30;
heroWidth=24;

enemyHeight=40;
enemyWidth=20;

bossHeight=150;
bossWidth=80;

bulletHeight=3;
bulletWidth=10;
}


$(".game").css("left",parseInt($("body").css("width"))/2-240);
$(".info").css("left",parseInt($("body").css("width"))/2-240);
$(".start").click(function(){
	$(".result").remove();
	sendEnemy(1);
});

$(window).keydown(function(e){
	hero=$(".hero");
	heroY=parseInt(hero.css("bottom"));
	heroX=parseInt(hero.css("left"));
	if (e.keyCode === 38 && (heroY+10)<340){
		hero.css("bottom",heroY+10); // Up
	} 
	else if (e.keyCode === 40 && (heroY)>0){
		hero.css("bottom",heroY-10); // Down
	} 
	else if (e.keyCode === 37 && (heroX)>0){
		hero.css("left",heroX-10); // Left
	} 
	else if (e.keyCode === 39 && (heroX+10)<440){
		hero.css("left",heroX+10); // Right
	}
	else if (e.keyCode === 90){ // When the "z" button is pressed
		fire();
	}
});

function fire(){
	hero=$(".hero");
	heroY=parseInt(hero.css("bottom"));
	heroX=parseInt(hero.css("left"));
	
	bullet=document.createElement("div");
	bClass="bullet"+bNum;
	bullet.classList.add(bClass);
	bullet.classList.add("bullet");
	document.querySelector(".game").appendChild(bullet);
	bNum+=1;totalB+=1;
	$("."+bClass).css({"position":"absolute","width":bulletWidth,"height":bulletHeight,"background":"royalblue","left":heroX+heroWidth,"bottom":heroY+(heroHeight/2)});
	bulletGo("."+bClass);
}
function bulletGo(elem){
	$(elem).animate({"left":parseInt($(elem).css("left"))+10},100,function(){bulletGo(elem);});
	if (parseInt($(elem).css("left"))>=470){$(elem).remove();totalB-=1;}
	if (bossActive!="yes"){
		bulletk=$(elem);
		bE=parseInt(bulletk.css("left"))+bulletWidth;
		bT=parseInt(bulletk.css("bottom"))+bulletHeight;
		bB=parseInt(bulletk.css("bottom"));
		for...