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、總結

這是一個簡單的拼圖實現，有很多可以進行完善的地方，我也是第一次寫博客，文字上有描述不對的地方，歡迎進行指正。

關於打亂算法上，這是我自己的一個思路，實用效果也還可以，如果有更棒的算法，也希望能分享出來，大家一起學習一下。

 

下載源碼