Sliding puzzle with hexagons

index.html

<div class="center">
  <div class="board">
    <div class="hexagonContainer">
	    <div class="hexagon">
		    <div class="hexagon-in1">
			    <div class="hexagon-in2"></div>
		    </div>
	    </div>
    </div>

  </div>
  <div class"buttons">
    <button onclick="resetBoard()">Solve</button>
    <button onclick="scramble()">Scarmble</button>
  </div>
</div>

script.js

var tileWidth = 100; //=$(".hexagon").css("width");
var emptySpace =0;

var swap = function(piece1,piece2)
	{ 
		var bgpo1 = $('.hexagonContainer:eq('+piece1+')').find('.hexagon-in2').css("background-position");
		var bgpo2 = $('.hexagonContainer:eq('+piece2+')').find('.hexagon-in2').css("background-position");
		$('.hexagonContainer:eq('+piece1+')').find('.hexagon-in2').css('background-position',bgpo2);
		$('.hexagonContainer:eq('+piece2+')').find('.hexagon-in2').css('background-position',bgpo1);
		
	}
var checkMove = function()
		{
		var temp=$(".hexagonContainer").index(this);
		
		if ( (temp!=emptySpace) && neighborCheck(temp,emptySpace)) 
			{
			swap(temp,emptySpace);
			emptySpace = temp;
			}
		};
var neighborCheck = function(piece1,piece2)
		{
		var neighbor=false;
		var x1=$('.hexagonContainer:eq('+piece1+')').css("left").replace(/[^-\d\.]/g, '');
		var x2=$('.hexagonContainer:eq('+piece2+')').css("left").replace(/[^-\d\.]/g, '');
		if (tileWidth >=Math.abs(x1-x2) ) 
			{
			 var y1=$('.hexagonContainer:eq('+piece1+')').css("top").replace(/[^-\d\.]/g, '');
			 var y2=$('.hexagonContainer:eq('+piece2+')').css("top").replace(/[^-\d\.]/g, '');
			 if (tileWidth >=Math.abs(y1-y2) ) 
			 	{	
				neighbor=true;
				}
			} 
		return neighbor;
		
		};
var scramble = function(){
		resetBoard();
		var randIndex=0;
		$(".hexagonContainer").each(function( index )
			{
	    randIndex = Math.floor(Math.random() * 15);
		swap(randIndex,index);
			});
			emptySpace = randIndex;
		
	
		
	};	
var resetBoard = function() 
		{
		$(".hexagonContainer").each(function() 
			{
			var left=$(this).css("left");
			var top=$(this).css("top");
			//alert (left+" "+ top);
			$(this).find('.hexagon-in2').css('background-position',"-"+left+" -"+top);
			});
		$(".hexagonContainer").last().find('.hexagon-in2').css('background-position', tileWidth+"px 0px");
		emptySpace =15;
		}
var init = 	function()
{
$(".hexagonContainer").clone().prependTo(".board");
$(".hexagonContainer").clone().prependTo(".board");
$(".hexagonContainer").clone().prependTo(".board");
$(".hexagonContainer").clone().prependTo(".board");
$(".hexagonContainer").each(function( index ) 
	{
	var xlocation=(index%4)*tileWidth ;
	var ylocation=Math.floor(index/4)*(tileWidth*0.86);
	if (index%8>3) 
		{
		xlocation=xlocation+(tileWidth*0.5);
		}
	$(this).css("left", xlocation ).css("top",ylocation ) ;
	$(this).on('click', checkMove);
	});
resetBoard();
scramble();
}
init();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

sliding-puzzle-with-hexagons.markdown

Sliding puzzle with hexagons

mixing CSS Hexagon Styling with the puzzle.

A Pen by Dubi Kaufmann on CodePen.

License.

style.css

BODY 
{
  background: rgb(51,51,51);
}
.center
{
  width: 450px;
  margin: auto;
  margin-top: 5px;
}
.board
{
	width: 450px;
	height:400px;
	position:relative;
}

.hexagonContainer
{
position:absolute;	
}
.hexagon {
width: 100px;
height: 116px;
overflow: hidden;
visibility: hidden;
transform: rotate(120deg);

}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
transform: rotate(-60deg);

}
.hexagon-in2 {
width: 100%;
height: 100%;
visibility: visible;
transform: rotate(-60deg);
background:url('http://lorempixel.com/450/378/people/');
background-repeat: no-repeat;
background-position: 0px 0px;
background-color:rgb(34,34,34);

}

.hexagon-in2:hover {
opacity:0.5;
} 
.buttons{
	position:relative;
	text-align:center;
}
button{
	border-radius: 4px;
	background: rgb(68,68,68);
	color:  rgb(255,255,255);
	border-width:1px;
	
	font-size: 1em;
	padding: 10px 10px;
	font-family: helvetica, arial, sans-serif;
	text-transform:uppercase;
	margin:5px;
  	
}