html5拼图游戏

一个简单的拼图游戏，一直很喜欢玩，在网上的很多源码打乱都有些问题，很多情况下不能拼成，研究了一段时间，找到一个不错的打乱方式，分享出来给大家看看。

 

代码使用html+css+jquery实现。

 

效果图如下：

 

 

 

1、准备工作

首页准备一张喜欢的图片，使用ps切片功能，将图片进行9等分（保留原图）。

创建puzzle.html用于页面展示。

创建文件夹images保存图片。

创建js文件夹，并将jquery（jquery-1.8.3.min）文件放在其中。

在js文件夹中创建js文件index.js.

 

2、编写HTML代码(puzzle.html)

页面代码使用div进行布局，可通过main和puzzle的类样式控制拼图区域大小。

 

css代码如下：

<style>
.main {
width: 604px; height: 450px;background-color:#0ff;position:relative;float:left;
}
.puzzle {
width: 200px;
height: 150px;
border: 1px solid #fff;
position:absolute;
background-size:100% 100%;
}
</style>

　　

 

js引入文件如下：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>

　　

 

使用类样式puzzle的div为图片切片，id使用x坐标与y坐标合并命名，方便遍历，data-x表示x坐标，data-y表示y坐标。

body内容如下：

<div class="main">
<div class="puzzle" id="0_0" data-x="0" data-y="0" onclick="moveImg('0_0')" style="background-image: url(images/fmt_01.jpg);"></div>
<div class="puzzle" id="1_0" data-x="1" data-y="0" onclick="moveImg('1_0')" style="background-image: url(images/fmt_02.jpg);"></div>
<div class="puzzle" id="2_0" data-x="2" data-y="0" onclick="moveImg('2_0')" style="background-image: url(images/fmt_03.jpg);"></div>
<div class="puzzle" id="0_1" data-x="0" data-y="1" onclick="moveImg('0_1')" style="background-image: url(images/fmt_04.jpg);"></div>
<div class="puzzle" id="1_1" data-x="1" data-y="1" onclick="moveImg('1_1')" style="background-image: url(images/fmt_05.jpg);"></div>
<div class="puzzle" id="2_1" data-x="2" data-y="1" onclick="moveImg('2_1')" style="background-image: url(images/fmt_06.jpg);"></div>
<div class="puzzle" id="0_2" data-x="0" data-y="2" onclick="moveImg('0_2')" style="background-image: url(images/fmt_07.jpg);"></div>
<div class="puzzle" id="1_2" data-x="1" data-y="2" onclick="moveImg('1_2')" style="background-image: url(images/fmt_08.jpg);"></div>
<div class="puzzle" id="2_2" data-x="2" data-y="2"></div>
</div>
<div style="float:left;left:20px;position:relative;">
<img src="images/fmt.jpg" style="width:300px;height:225px;"/>
<br />
<br />
使用步数：<label id="lblNum">0</label>步
<br />
<br />
<button onclick="Upset()">重置</button>
</div>
<script>
$(function () {
Upset();
});
</script>

　　

 

3、编写js

首先初始化div位置，代码如下：

// 初始化拼图位置
function InitPostion() {
    // 第一排三张
    $("#0_0").css("top", 0);
    $("#0_0").css("left", 0);

    $("#1_0").css("top", 0);
    $("#1_0").css("left", $("#1_0").width());

    $("#2_0").css("top", 0);
    $("#2_0").css("left", $("#2_0").width()*2);

    // 第二排三张
    $("#0_1").css("top", $("#0_1").height());
    $("#0_1").css("left", 0);

    $("#1_1").css("top", $("#0_1").height());
    $("#1_1").css("left", $("#1_0").width());

    $("#2_1").css("top", $("#0_1").height());
    $("#2_1").css("left", $("#1_0").width()*2);

    // 第三排三张
    $("#0_2").css("top", $("#0_1").height()*2);
    $("#0_2").css("left", 0);

    $("#1_2").css("top", $("#0_1").height() * 2);
    $("#1_2").css("left", $("#1_0").width());

    $("#2_2").css("top", $("#0_1").height() * 2);
    $("#2_2").css("left", $("#1_0").width()*2);
}

　　

 然后编写图片位置交换代码，代码如下：

// 记录移动位置
var puzzleList = [
    [1, 1, 1],
    [1, 1, 1],
    [1, 1, 0]];
// 记录移动后ID
var successList = [
    ["0_0", "1_0", "2_0"],
    ["0_1", "1_1", "2_1"],
    ["0_2", "1_2", "2_2"]];
// 记录成功结果
var successList_s = [
    ["0_0", "1_0", "2_0"],
    ["0_1", "1_1", "2_1"],
    ["0_2", "1_2", "2_2"]];
// 记录当前步数
var num = 0;
// 移动拼图
function ChangePosition(id) {

    var x =parseInt($("#"+id).attr("data-x"));
    var y = parseInt($("#" + id).attr("data-y"));

    var x_t = 0;
    var y_t = 0;

    // 验证是否可以移动
    var isMove = false;
    var MoveID = "";
    var MoveID2 = successList[y][x];
    var MoveID_T = "";

    // 移动的中间变量
    var top_t = "";
    var left_t = "";

    // 右移
    if ((x + 1) <= 2 && puzzleList[y][x + 1] == 0) {
        MoveID = successList[y][(x + 1)];
        puzzleList[y][x] = 0;
        puzzleList[y][x + 1] = 1;

        MoveID_T = successList[y][(x + 1)];
        successList[y][(x + 1)] = successList[y][x];
        successList[y][x] = MoveID_T;
    }
    // 左移
    else if ((x - 1) >= 0 && puzzleList[y][x - 1] == 0) {
        MoveID = successList[y][(x - 1)];
        puzzleList[y][x] = 0;
        puzzleList[y][x - 1] = 1;

        MoveID_T = successList[y][(x - 1)];
        successList[y][(x - 1)] = successList[y][x];
        successList[y][x] = MoveID_T;
    }
    // 下移
    else if ((y + 1) <= 2 && puzzleList[y + 1][x] == 0) {
        MoveID = successList[(y + 1)][x];
        puzzleList[y][x] = 0;
        puzzleList[y + 1][x] = 1;

        MoveID_T = successList[(y + 1)][x];
        successList[(y + 1)][x] = successList[y][x];
        successList[y][x] = MoveID_T;
    }
    // 上移
    else if ((y - 1) >= 0 && puzzleList[y - 1][x] == 0) {
        MoveID = successList[(y - 1)][x];
        puzzleList[y][x] = 0;
        puzzleList[y - 1][x] = 1;

        MoveID_T = successList[(y - 1)][x];
        successList[(y - 1)][x] = successList[y][x];
        successList[y][x] = MoveID_T;
    }

    if (MoveID.length > 0) {
        isMove = true;
    }

    if (isMove) {
        top_t = $("#" + MoveID).css("top");
        left_t = $("#" + MoveID).css("left");
        x_t = $("#" + MoveID).attr("data-x");
        y_t = $("#" + MoveID).attr("data-y");
        


        $("#" + MoveID).css("top", $("#" + MoveID2).css("top"));
        $("#" + MoveID).css("left", $("#" + MoveID2).css("left"));
        $("#" + MoveID).attr("data-x", $("#" + MoveID2).attr("data-x"));
        $("#" + MoveID).attr("data-y", $("#" + MoveID2).attr("data-y"));

        $("#" + MoveID2).css("top", top_t);
        $("#" + MoveID2).css("left", left_t);
        $("#" + MoveID2).attr("data-x", x_t);
        $("#" + MoveID2).attr("data-y", y_t);
    }
}

　　然后，创建拼图点击事件，代码如下：

// 拼图点击：移动拼图，并验证成功
function moveImg(id) {
    ChangePosition(id);
    var isSuccess = true;
    num++;
    $("#lblNum").text(num);
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
            if (successList[i][j] != successList_s[i][j]) {
                isSuccess = false;
                return;
            }
        }
    }
    
    if (isSuccess) {
        setTimeout(function(){ alert("厉害了，我的哥！")},500);
    }
}

　　最后，创建初始化拼图并进行拼图打乱，代码如下：

function Upset() {
    num = 0;
    $("#lblNum").text(num);
    // 初始化正确位置
    InitPostion();

    // 初始化第一张要打乱的图片
    var x = 0, y = 0;

    var id = "";
    for (var i = 0; i < 10000; i++) {
        x = Math.round(Math.random() * 10);
        y = Math.round(Math.random() * 10);
        if (x > 2) {
            x = 0;
        }
        if (y > 2) {
            y = 2;
        }
        id = x+"_"+y;
        ChangePosition(id);
    }
}

　　打乱规则：初始化拼图正确位置》产生10000次随机数》通过随机数进行移动。

 

4、总结

这是一个简单的拼图实现，有很多可以进行完善的地方，我也是第一次写博客，文字上有描述不对的地方，欢迎进行指正。

关于打乱算法上，这是我自己的一个思路，实用效果也还可以，如果有更棒的算法，也希望能分享出来，大家一起学习一下。

 

下载源码