JSFiddle - React, Tailwind, and code Playground

HTML

<div id="huyakWrap" class="huyak_wrap">
</div>

CSS

/*
INFO: 
project: kalininHuyak
browsers: opera/chrome/FF/ie7,8/safari
resolutions: >=1000x768
markup: Sergey Kalinin 07/2013 (prozaik81-2@yandex.ru)
desc: ����������� ����������� ����-���������
		
version 1.1

TABLE OF CONTENTS:
1.global reset and common settings
2.fonts
3.layout
4.blocks
*/


/************************************************************************************************************** 1.global reset and common settings */

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%;		
	
}
	
body {
	height:100%;
	background: #2038EC;
}
	
ul{
	list-style-type: none;
}

.clear{
	clear: both;
}	

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;
}
		
/******************************************************************************************************************************* 2.fonts */		

/****************************************************************************************************************************** 3.layout */	
.huyak_wrap{
	overflow: hidden;
	position: relative;
	left: 0;
	top: 0;
	width: 1000px;
	height: 600px;
}

	.huyak_wrap .player{
		background: url('http://prozaik.16mb.com/js3/huYak2/images/kalininHuyak/playerShip.png') left top no-repeat;
		display: inline-block;
		width: 72px;
		height: 128px;
		overflow: hidden;
		position: absolute;
	}


/****************************************************************************************************************************** 4. blocks */
/****************************************************************************************************************************** 4.1 indikator */

JavaScript

/* 
INFO: 
project: kalininHuyak
browsers: opera/chrome/FF/ie9/safari
coding: Sergey Kalinin 07/2013 (prozaik81-2@yandex.ru)
desc:
version 1.1
*/

// ------------------------------------------------------------------------------------------------------ PLUGIN kalininHuyak IMPLEMENTATION------------
function KalininHuyak(options){
	// ------------------------------------------------------------------------------------------ properties ---------	
	var	huyakWrap = options.huyakWrap,
		playerOffset = 10,
		$player = $('#player'),
		xPosition = 200,
		yPosition = 500;

	// ------------------------------------------------------------------------------------------ methods ------------	
	playerShip = {			
		createPlayer: function (){	
			var	player = $('<div />',{
					class: 'player',
					id: 'player'
				});	
			
			return player;
		},		

		appendPlayer: function (player, xPosition, yPosition){
			player.appendTo('#huyakWrap');

			player.attr('style', 'left: ' + xPosition + 'px; top: ' + yPosition + 'px');
            $player = $('#player');
		},	

		movePlayer: function (direction, offset){
			var	playerPositionX = $player.position().left,
				currentOffset = parseInt(playerPositionX, 10),
				preCurrentOffset = currentOffset + (offset * direction);

			if(preCurrentOffset < 0){
				preCurrentOffset = 0;
			}
			else if(preCurrentOffset > 920){
				preCurrentOffset = 920;
			}
			
            $player.css({left: preCurrentOffset  + 'px'});
		}
	}

	// init
	playerShip.appendPlayer(playerShip.createPlayer(), xPosition, yPosition);			
	
	// ------------------------------------------------------------------------------------------ handlers -----------		
	function onKeypress(keyCode){
		var	direction;
		
		if(keyCode == 49){
			direction = -1;
		}
		else if(keyCode == 50){
			direction = 1;
		};
		
		playerShip.movePlayer(direction, playerOffset);
	}
	
	// ------------------------------------------------------------------------------------------ events...