javascript做拼图

JavaScript是一种广泛用于前端开发的编程语言，它拥有强大的交互性和动态性，因此被广泛用于网站和移动应用程序的开发中。其中，JavaScript做拼图游戏的效果也是非常出色的。

一个简单的拼图布局示例如下：

div#puzzleBoard {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 0 auto;
}
div.puzzlePiece {
    width: 96px;
    height: 96px;
    border: 1px solid #ccc;
    float: left;
    margin: -1px 0 0 -1px;
    background: url(images/puzzle.jpg);
    background-size: auto 300px;
    cursor: pointer;
}
div.puzzlePiece:hover {
    opacity: 0.5;
}
    

在这里，我们首先声明了一个拼图布局的容器div#puzzleBoard，并设置其宽和高为300像素，以及边框1像素。接着，我们为每个拼图块定义了一个div.puzzlePiece元素，设置其宽高为96像素，边框1像素，向左浮动，以及设置了一个背景图像。而当鼠标悬停在拼图块上时，设置其不透明度为0.5。最终，就可以实现一个简单的拼图布局效果。

其次，我们需要使用JavaScript来处理这些拼图块。代码如下：

var pieces = [].slice.call(document.querySelectorAll('.puzzlePiece'));
    var columns = 3, rows = 3;
    var puzzleBoard = document.getElementById('puzzleBoard');
    var onBoard, empty;
    var boardPos = puzzleBoard.getBoundingClientRect();
    var pieceWidth = pieces[0].offsetWidth;
    var pieceHeight = pieces[0].offsetHeight;
Array.prototype.shuffle = function () {
    var i = this.length, j, temp;
    while (--i >
 0) {
    j = Math.floor(Math.random() * (i));
    temp = this[j];
    this[j] = this[i];
    this[i] = temp;
}
    return this;
}
    ;
function place() {
pieces.forEach(function (elm) {
if (elm.previousSibling) {
    elm.style.top = (elm.previousSibling.offsetTop + pieceHeight) + 'px';
    elm.style.left = elm.previousSibling.style.left;
    elm.dataset.pos = (elm.previousSibling.dataset.pos - 0 + columns);
}
 else {
    elm.style.top = '0';
    elm.style.left = '0';
    elm.dataset.pos = '0';
    onBoard = elm;
}
    elm.dataset.initpos = elm.dataset.pos;
if (!isNaN(elm.dataset.imgx)) {
    elm.style.backgroundPosition = (-elm.dataset.imgx * pieceWidth) + 'px ' + (-elm.dataset.imgy * pieceHeight) + 'px';
}
}
    );
}
function start() {
    onBoard = empty = null;
pieces.forEach(function (elm) {
if (parseInt(elm.dataset.pos) === (columns * rows - 1)) {
    empty = elm;
}
    elm.className = 'puzzlePiece';
}
    );
    pieces.shuffle();
    place();
}
function move(elm, dir) {
    var pos = parseInt(elm.dataset.pos), next;
switch (dir) {
    case 'Up':if (pos >
= columns) {
    next = pos - columns;
}
    break;
    case 'Right':if ((pos + 1) % columns >
 0) {
    next = pos + 1;
}
    break;
case 'Down':if (pos  (columns * rows) - columns) {
    next = pos + columns;
}
    break;
    case 'Left':if (pos % columns >
 0) {
    next = pos - 1;
}
    break;
}
if (next === undefined) {
    return false;
}
var nextElm = pieces.filter(function (p) {
    return parseInt(p.dataset.pos) === next;
}
    )[0];
    swap(elm, nextElm);
if (check()) {
setTimeout(function () {
    alert("COMPLETE!");
}
    , 100);
}
}
function swap(prev, next) {
    var temp = next.dataset.pos;
    next.dataset.pos = prev.dataset.pos;
    prev.dataset.pos = temp;
    temp = next.style.top;
    next.style.top = prev.style.top;
    prev.style.top = temp;
    temp = next.style.left;
    next.style.left = prev.style.left;
    prev.style.left = temp;
if (empty === prev) {
    empty = next;
}
 else if (empty === next) {
    empty = prev;
}
}
function check() {
    var result = true;
pieces.forEach(function (elm, i) {
if (parseInt(elm.dataset.pos) !== i) {
    result = false;
}
}
    );
    return result;
}
    

在这里，我们首先声明了一些变量和方法，如拼图块的数量和分布状况（columns和rows），容器元素（puzzleBoard），以及当前和空拼图块（onBoard和empty）。然后，我们定义了一个数组方法shuffle，用于随机交换拼图块的顺序。

接着，我们声明了三个函数place、move和check。place函数用于根据元素的上一个元素确定每个拼图块的位置和数据集。move函数用于交换两个拼图块的位置。check函数用于检查拼图游戏是否已经完成。

最后，我们开启了一个start方法来初始化游戏。该方法首先将所有拼图块重置，并找出空拼图块。然后，将所有拼图块随机排序，然后将其放置在容器中。

通过上面的代码，我们可以实现一个简单的拼图游戏。但是，笔者强烈建议大家了解更多有关JavaScript的知识，以便更好地利用其强大的功能。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！