JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap" id="wrap">
		
		</div>
		
		<button class="one">one</button>

CSS

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

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


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

.ship{
	width: 20px;
	height: 30px;
	background: red;
	
	text-align: center;
	font: bold 10px/30px calibri, arial, sans-serif;
	color: #000;
}

JavaScript

// ------------------------------------------------------------------------------------ factory
function ship(options){
	this.x = options.x || 50;
	this.y = options.y || 50;
	this.xOffset = options.xOffset || 0;
	this.yOffset = options.yOffset || 0;
	this.health = options.health || 100;
	this.speed = options.speed || 1;
	
	this.move = function(e){
		//console.log(options.x + '___' + options.y + '__' + e.message);
		console.log(110);
		
		render(this, options.x++, options.y++);
	};
	
	this.radom = function(min, max){
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}	
	
	this.render = function (obj, x, y){
		$(obj).css({
			'left': x,
			'top': y
		});
	};	
}

// ship.prototype.render = function (obj, x, y){
	// $(obj).css({
		// 'left': x,
		// 'top': y
	// });
// };

function Factory(){};

Factory.prototype.objClass = ship;

Factory.prototype.createShip = function (options){
	if(options.objType === "SuperShip" || options.objType === "CombatShip" || options.objType === "PatrolShip"){
		this.objClass = ship;
	}

	return new this.objClass(options);
};





// ------------------------------------------------------------------------------------ observer
var observerable = {
	listeners: {},
	
	addListener: function (object, evt, callback) {       
		if (!this.listeners.hasOwnProperty(evt)) {           
			this.listeners[evt] = [];    
		}        
		
		this.listeners[evt].push(object[callback]);       
	},
	
	removeListener: function (object, evt, callback) {       
		if (this.listeners.hasOwnProperty(evt)) {      
			var i, length;     
			        
			for (i = 0, length = this.listeners[evt].length; i < length; i += 1) {               
				if (this.listeners[evt][i] === object[callback]) {                   
					this.listeners[evt].splice(i, 1);        
				}      
			}    
		}  
	},
	    
	publisher: function (evt, args) {       
		if (this.listeners.hasOwnProperty(evt)){                       
			var i,...