JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap" id="wrap">
		
		</div>
		
		<section class="control_info">
			<h1 class="h1">control key's:</h1>
			"1" - left <br />
			"2" - right <br />
			"3" - fire <br />
		</section>

CSS

/*************************************************************************************************************** COMMON_STYLES */
html, body, div, h1, h2, h3, h4, h5, h6, a, a img, p, ul, ol, li, span, fieldset , form, dl, dd, dt, table, tr, td, img, input{ 
	border: none;
	margin: 0; 
	outline: none;	
	padding: 0;
}

html{
    height:100%;	
	background: #000;
}

body{	
    height:100%;	
	min-width: 1300px;
	position: relative;
	
	font: normal 16px/19px arial, sans-serif;
	color: #000;
}	

ul{
	list-style-type: none;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; }

textarea{
	resize: none;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	zoom:1;
}

.clear{
	clear: both;
}	
	
.hide{
	display: none;
}

.wrapped{
	width: 1000px;
	margin: 0 auto;
}

input::-webkit-input-placeholder {
	color: #0096ef;
}

input:-moz-placeholder {
	color: #0096ef;
}

/*************************************************************************************************************** GLOBAL_layout */
.wrap{
	position: relative;
	width: 1000px;
	height: 600px;
	border: 1px dashed cyan;
	margin: 0 auto;
	overflow: hidden;
}

	.star{
		position: absolute;
		background: #ccc;
		z-index: 10;
	}

	.ship_enemy{
		width: 42px;
		height: 69px;
		background: url('http://prozaik.16mb.com/works/weekend_projects/game_tranclucate/images/ship_enemy.png') center top no-repeat;
		position: absolute;
		z-index: 100;
	}

	.ship_player{
		width: 70px;
		height: 87px;
		background: url('http://prozaik.16mb.com/works/weekend_projects/game_tranclucate/images/ship_player.png') center top no-repeat;
		position: absolute;
		top: 500px;
		left: 400px;
		position: absolute;
		z-index: 100;
	}

	.bullet{
		position: absolute;
		background: red;
		width: 10px;
		height: 10px;
		border-radius: 10px;
		z-index: 100;
	}

.control_info{
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	padding: 10px;
	float:...

JavaScript

// ------------------------------------------------------------------------------------ factory
function ObjMaker(){};

ObjMaker.prototype.random = function(min, max){
	return Math.floor(Math.random() * (max - min + 1)) + min;
};

ObjMaker.Star = function(id){ 
	var	self = this;
	
	self.size; 
	self.id = id; 
	self.x = self.random(50, 950);	
	self.y = self.random(50, 550);	

	self.move = function(){
		var	offsetY = 2,
			newY = self.y + offsetY;
		
		if(newY >= 595){
			newY = 5;
		}	
		
		self.y = newY;
		
		self.render(self.x, newY);
	};		
	
	self.render = function(x, y){		
		$('#star_' + self.id).css({
			'left': (x || self.x) + 'px',
			'top': (y || self.y) + 'px'
		}).appendTo('#wrap');	
		
		return;
	};

	self.init = function(){
		$('<div class="star" id="star_' + self.id + '"  />').css({
			'width': self.size + 'px',
			'height': self.size + 'px'
		}).appendTo('#wrap');
		
		self.render(self.x, self.y);
		
		return;
	};	
}; 

ObjMaker.ShipEnemy = function(id){ 
	var	self = this;
	
	self.health = 100; 
	self.speed = self.random(5, 10); 
	self.id = id;	
	self.x = self.random(50, 950);	
	self.y = self.random(50, 350);	
	
	self.move = function(){
		var	offsetX = self.random(-1, 1) * self.speed,
			offsetY = self.random(-0.5, 0.5) * self.speed,
			newX = self.x + offsetX,
			newY = self.y + offsetY;
			
		if(newX >= 950){
			newX = 950;
		}
		else if(newX <= 50){
			newX = 50;
		}
		
		if(newY >= 550){
			newY = 550;
		}
		else if(newY <= 50){
			newY = 50;
		}		
		
		self.x = newX;
		self.y = newY;
		
		self.render(newX, newY);
	};	
	
	self.render = function(x, y){			
		$('#shipEnemy_' + self.id).css({
			'left': (x || self.x) + 'px',
			'top': (y || self.y) + 'px'
		}).appendTo('#wrap');	
		
		return;
	};

	self.init = function(){
		$('<div class="ship_enemy" id="shipEnemy_' + self.id + '"  />').appendTo('#wrap');
		
		self.render(self.x, self.y);
		
		return;
	};		
}; 

ObjMaker.Bullet = function (bulletId){ 
	var	self = this;
	
	self.id = bulletId; 
	self.x...