Как адаптировать пазл?

Question

[Danil Namaste]

Пазл

Нужно что бы на всех расширениях было нормальное отображение. Проблема в том, что координаты задаются в px.

//  author Piers Rueb

$(document).ready(function(){ 

	//  globals

	var tileClicked = false;
	var firstTileClicked; 
	var secondTileClicked; 
	var topPosFir = 0;
	var leftPosFir = 0;
	var topPosSec = 0;
	var leftPosSec = 0;
	var shuffle = Math.floor((Math.random() * 4) + 1);
	var moves = 0;
	var secs = 0;

	//  shuffle the tiles

	function shuffleTiles(){
		if(shuffle == 1){
			$('#piece-1').css({top: 722, left: 360});
			$('#piece-2').css({top: 361, left: 360});
			$('#piece-3').css({top: 722, left: 0});
			$('#piece-4').css({top: 0, left: 360});
			$('#piece-5').css({top: 361, left: 0});
			$('#piece-6').css({top: 0, left: 0});
		} else if(shuffle == 2){
			$('#piece-1').css({top: 361, left: 0});
			$('#piece-2').css({top: 0, left: 0});
			$('#piece-3').css({top: 722, left: 0});
			$('#piece-4').css({top: 0, left: 360});
			$('#piece-5').css({top: 361, left: 360});
			$('#piece-6').css({top: 722, left: 360});
		} else if(shuffle == 3){
			$('#piece-1').css({top: 722, left: 0});
			$('#piece-2').css({top: 0, left: 0});
			$('#piece-3').css({top: 361, left: 360});
			$('#piece-4').css({top: 722, left: 360});
			$('#piece-5').css({top: 0, left: 360});
			$('#piece-6').css({top: 361, left: 0});
		} else if(shuffle == 4){
			$('#piece-1').css({top: 722, left: 0});
			$('#piece-2').css({top: 722, left: 360});
			$('#piece-3').css({top: 0, left: 360});
			$('#piece-4').css({top: 361, left: 360});
			$('#piece-5').css({top: 0, left: 0});
			$('#piece-6').css({top: 361, left: 0});
		}
	}

	$(window).load(function(){
		setTimeout(function(){
			shuffleTiles();
			setInterval(function(){ 
				secs++ 
			}, 1000);
		}, 1000);
	});

	//  play the game

	$('.pieces').click(function(){

		if(tileClicked == false){  //  if no tile is clicked

			//  set variables
			firstTileClicked = $(this).attr('id');
			topPosFir = parseInt($(this).css('top')); 
			leftPosFir = parseInt($(this).css('left')); 

			//  highlight tile
			$(this).addClass('glow');
			tileClicked = true;

		} else{  //  if you've clicked a tile

			//  set variables
			secondTileClicked = $(this).attr('id');
			topPosSec = parseInt($(this).css('top')); 
			leftPosSec = parseInt($(this).css('left'));

			//  animations
			$('#' + firstTileClicked).css({'top' : topPosSec , 'left' : leftPosSec});
			$('#' + secondTileClicked).css({'top' : topPosFir , 'left' : leftPosFir});

			//  remove the glow and reset the first tile
			$('.pieces').removeClass('glow');
			tileClicked = false;

			//  test for the win

			setTimeout(function(){
				if(
					$('#piece-1').css('left') == '0px' && $('#piece-1').css('top') == '0px' && 
					$('#piece-2').css('left') == '360px' && $('#piece-2').css('top') == '0px' &&
					$('#piece-3').css('left') == '0px' && $('#piece-3').css('top') == '361px' &&
					$('#piece-4').css('left') == '360px' && $('#piece-4').css('top') == '361px' &&
					$('#piece-5').css('left') == '0px' && $('#piece-5').css('top') == '722px' &&
					$('#piece-6').css('left') == '360px' && $('#piece-6').css('top') == '722px' 
				){
					$('p').text('You have solved the puzzle in ' + secs + ' seconds using ' + moves + ' moves!!');
					$('article').addClass('glow-2');
					moves = 0;
				}
			}, 1000);

			//  increment the move counter
			moves++

		}

	});  //  end the click function

});

Comments

[Шохрух Шаймардонов]

Ну раз нужно то делайте. Не хотите сами, идите во фриланс. А вот вы задание вопрос, то задайте его корректно. Проблема по сути ясна. Но что именно вы пытаетесь сделать и что у вас не получается.
P.s. код у вас очень костыльный. Лучше без jquery, на чистом js перепишите и логику нормально постройте, и не будет у вас лапша-кода

[Ankhena]

Проблема в том, что координаты задаются в px.

Не задавайте их px, перепишите на % или vw|vh

Answer 1

[Aricus]

Проще всего уменьшать весь пазл целиком. Вот моё решение похожей задачи, мне нужно было адаптировать карусель:

@media only screen and (max-width: 1024px)
.bee3D--effect__carousel {
    transform: scale(0.9);
    margin: -38px 0;
}
@media only screen and (max-width: 786px)
.bee3D--effect__carousel {
    transform: scale(0.8);
    margin: -65px 0;
}
@media only screen and (max-width: 610px)
.bee3D--effect__carousel {
    transform: scale(0.67);
    margin: -93px 0;
}
@media only screen and (max-width: 480px)
.bee3D--effect__carousel {
    transform: scale(0.55);
    margin: -120px 0;
}