Question

我正在尝试使用HTML，CSS和JavaScript编写难题。目前，我的代码接受一个图像，然后将该图像设置为div元素的背景。然后，JavaScript将16个子div元素附加到html文件中。我希望我的代码将每个图像段从父元素移动到其各自的子元素。

我的HTML中有一个div元素：

<div id="image"></div>

JavaScript代码会附加16个子div元素，每个元素都具有唯一的ID：

$(document).ready(function(){
    let $url;
    $('#gameImage').keypress(function(e){
        if(e.keyCode == 13){
            $url = $('#gameImage').val();
            console.log($url);
            $('#gameImage').val('');
            $('#image').css("background-image", `url(${$url})`);
            for(let i=0;i<16;i++){
                console.log(i);
                $('#image').append('<div class="piece" id= "segment'+i+'"></div>')
            }
        }
    });
})

我希望能够单击这些子元素，并在拼图的各个部分中争先恐后，但是该图像是父元素的背景图像。

我尝试遵循这篇帖子Cutting an Image into pieces through Javascript的一些建议，但是如果为每张照片设置背景位置，我将无法移动图像。其他解决方案提到使用画布，但是我无法使用画布制作可移动的div元素。

Answer 1

设置切片数量（此演示中为4×4）。
获取每个盒子的大小
Foreach并将DIV元素推入数组
计算子CSS backgroundPosition
使用shuffle函数
填充您的难题

const slices = 4,
  img = "https://i.stack.imgur.com/QpnpY.jpg",  // Desired image
  $puzzle = $("#puzzle"),                       // Puzzle square selector
  
  // Careful editing below this line...
  shuffle = a => {
    //stackoverflow.com/a/6274381/383904
    let j, x, i;
    for (i = a.length - 1; i > 0; i--) {
      j = Math.floor(Math.random() * (i + 1));
      x = a[i];
      a[i] = a[j];
      a[j] = x;
    }
    return a;
  },
  pieces = slices * slices,
  size = $puzzle.width(), // so same height?
  boxSize = size / slices;


// Create boxes
let boxes = [];
for (let i = 0; i < pieces; i++) {

  const x = -~~(i % slices) * boxSize, // Background position x
        y = -~~(i / slices) * boxSize; // y

  boxes.push($("<div>", {
    'class': 'box',
    data: {
      index: i
    },
    css: {
      width: boxSize,
      height: boxSize,
      backgroundImage: `url(${img})`,
      backgroundPosition: `${x}px ${y}px`
    },
    html: `<b>${i}</b><br> x ${x}<br> y ${y}`,
    on: {
      click() {
        const index = $(this).data('index'); // Get clicked element data-index
        console.clear(); console.log( `INDEX: ${index}` ); // Do s/t with index
      }
    }
  }));
}

// Shuffle boxes
shuffle(boxes); // Comment this line to see unshaffled boxes

// Append boxes
$puzzle.append(boxes);

#puzzle {
  width: 400px;
  height: 400px;
  border: 1px solid #000;
}

#puzzle .box {
  float: left;
  box-shadow: inset 0 0 0 1px #000;
  color: #fff;
}

<div id="puzzle"></div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

以上内容将帮助您入门。
在每个项目上单击，您可以获取元素的data-index。现在，单击两次后，您可以在boxes数组中交换这两个索引，并以相同的方式重新填充$puzzle。
一旦所有DIV索引的顺序为0 to 15，拼图应该结束游戏。

如何将图像的一部分从父元素转移到子元素

1 个答案: