成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

打造專屬自己的html5拼圖小游戲

JowayYoung / 896人閱讀

摘要：最近公司剛好有個(gè)活動(dòng)是要做一版的拼圖小游戲，于是自己心血來潮，自己先實(shí)現(xiàn)了一把，也算是嘗嘗鮮了。下面就把大體的思路介紹一下，希望大家都可以做出一款屬于自己的拼圖小游戲，必須是更炫酷，更好玩來吧，大家一起加油。。。

最近公司剛好有個(gè)活動(dòng)是要做一版 html5的拼圖小游戲，于是自己心血來潮，自己先實(shí)現(xiàn)了一把，也算是嘗嘗鮮了。下面就把大體的思路介紹一下，希望大家都可以做出一款屬于自己的拼圖小游戲，必須是更炫酷，更好玩！來吧，大家一起加油。。。

利用canvas切出小塊圖片

我們知道現(xiàn)在的拼圖游戲都是由九張小圖片依次排列組成的，就是類似九宮格那樣。那么以前的做法就是我們利用Photoshop這樣的工具把原始大圖【尺寸一般都是正方形的哦】切成九張小塊的正方形小圖，但是這種做法有點(diǎn)不靈活，如果我們要更換圖片的話，就得重新去切圖，好麻煩。。。
不過沒關(guān)系，現(xiàn)在我們有了canvas！利用canvas我們可以很輕松的做到這些。核心代碼如下：

var image = new Image();
image.onload = function() {
    var index = 1;
    for (var i=0; i<3; i++) {
        for (var j=0; j<3; j++) {
            ctx.drawImage(image, 300*j, 300*i, 300, 300, 0, 0, 300, 300);
            $lis.eq(index-1).find("img").attr("src", canvas.toDataURL("image/jpeg"));
            index++;
        }
    }
}
//900x900
image.src = "shanlian.jpg";
實(shí)現(xiàn)小塊圖片的隨機(jī)排列

這里的核心是利用了javascript數(shù)組的隨機(jī)排序，核心代碼如下：

imgArr.sort(function(a, b) {
    return Math.random() - Math.random();
});
var index = 1;
for (var i=0; i<3; i++) {
    for (var j=0; j<3; j++) {
        ctx.drawImage(image, 300*j, 300*i, 300, 300, 0, 0, 300, 300);
        $lis.eq(imgArr[index-1]-1).find("img").data("seq", index).attr("src", canvas.toDataURL("image/jpeg"));
        index++;
    }
}
相關(guān)touch事件的監(jiān)聽和實(shí)現(xiàn)

這里無非就是利用向左滑動(dòng)，向右滑動(dòng)這些去實(shí)現(xiàn)拼圖的操作。核心代碼如下：

//阻止手機(jī)上瀏覽器的彈性下拉。。。
$("body").on("touchstart", function(e) {
    e.preventDefault();
});
$lis.on("swipeLeft", function(e) {
    e.preventDefault();
    var $this = $(this);
    var index = $this.index();
    var html = $this.html();
    var $prev = $this.prev();
    if ($.inArray(index, [3, 6]) > -1 || $prev.size() <= 0) {
        return false;
    }
    $this.html($prev.html());
    $prev.html(html);
    App.check();
});
$lis.on("swipeRight", function(e) {
    e.preventDefault();
    var $this = $(this);
    var index = $this.index();
    var html = $this.html();
    var $next = $this.next();
    if ($.inArray(index, [2, 5]) > -1 || $next.size() <= 0) {
        return false;
    }
    $this.html($next.html());
    $next.html(html);
    App.check();
});
$lis.on("swipeUp", function(e) {
    e.preventDefault();
    var $this = $(this);
    var html = $this.html();
    var index = $this.index() - 3;
    var $up = $lis.eq(index);
    if (index >= 0 && $up.size() > 0) {
        $this.html($up.html());
        $up.html(html);
        App.check();
    }
});
$lis.on("swipeDown", function(e) {
    e.preventDefault();
    var $this = $(this);
    var html = $this.html();
    var index = $this.index() + 3;
    var $down = $lis.eq(index);
    if (index < 9 && $down.size() > 0) {
        $this.html($down.html());
        $down.html(html);
        App.check();
    }
});
游戲是否完成的判斷

這里的話，拼圖順序的每一次變化都要去檢測(cè)一下是否完成了，原理就是獲取當(dāng)前小塊圖片的順序和原始的圖片進(jìn)行比較。核心代碼如下：

var resArr = [];
$("#gameBox img").each(function(k, v) {
    resArr.push(v.getAttribute("data-seq"));
});
if (resArr.join("") === oriArr.join("")) {
    //完成的處理。。。
}

核心代碼和思路就是上面這些，其實(shí)整個(gè)過程走下來還是蠻簡(jiǎn)單的，接下來無非要做的就是再加一下花哨的東西了（時(shí)間，難度等級(jí)，排名等等）。如果大家感興趣的話，完整版代碼猛戳 這里 了。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79279.html

相關(guān)文章

  • 打造專屬自己的html5拼圖小游戲

    摘要：最近公司剛好有個(gè)活動(dòng)是要做一版的拼圖小游戲，于是自己心血來潮，自己先實(shí)現(xiàn)了一把，也算是嘗嘗鮮了。下面就把大體的思路介紹一下，希望大家都可以做出一款屬于自己的拼圖小游戲，必須是更炫酷，更好玩來吧，大家一起加油。。。 最近公司剛好有個(gè)活動(dòng)是要做一版 html5的拼圖小游戲，于是自己心血來潮，自己先實(shí)現(xiàn)了一把，也算是嘗嘗鮮了。下面就把大體的思路介紹一下，希望大家都可以做出一款屬于自己的拼圖小...

    codeKK 評(píng)論0 收藏0

  • 打造專屬自己的html5拼圖小游戲

    摘要：最近公司剛好有個(gè)活動(dòng)是要做一版的拼圖小游戲，于是自己心血來潮，自己先實(shí)現(xiàn)了一把，也算是嘗嘗鮮了。下面就把大體的思路介紹一下，希望大家都可以做出一款屬于自己的拼圖小游戲，必須是更炫酷，更好玩來吧，大家一起加油。。。 最近公司剛好有個(gè)活動(dòng)是要做一版 html5的拼圖小游戲，于是自己心血來潮，自己先實(shí)現(xiàn)了一把，也算是嘗嘗鮮了。下面就把大體的思路介紹一下，希望大家都可以做出一款屬于自己的拼圖小...

    趙春朋 評(píng)論0 收藏0

  • 正在失業(yè)中的《課多周刊》(第3期)

    摘要：正在失業(yè)中的課多周刊第期我們的微信公眾號(hào)，更多精彩內(nèi)容皆在微信公眾號(hào)，歡迎關(guān)注。若有幫助，請(qǐng)把課多周刊推薦給你的朋友，你的支持是我們最大的動(dòng)力。是一種禍害譯本文淺談了在中關(guān)于的不好之處。淺談超時(shí)一運(yùn)維的排查方式。 正在失業(yè)中的《課多周刊》(第3期) 我們的微信公眾號(hào)：fed-talk，更多精彩內(nèi)容皆在微信公眾號(hào)，歡迎關(guān)注。 若有幫助，請(qǐng)把 課多周刊 推薦給你的朋友，你的支持是我們最大的...

    robin 評(píng)論0 收藏0

  • 正在失業(yè)中的《課多周刊》(第3期)

    摘要：正在失業(yè)中的課多周刊第期我們的微信公眾號(hào)，更多精彩內(nèi)容皆在微信公眾號(hào)，歡迎關(guān)注。若有幫助，請(qǐng)把課多周刊推薦給你的朋友，你的支持是我們最大的動(dòng)力。是一種禍害譯本文淺談了在中關(guān)于的不好之處。淺談超時(shí)一運(yùn)維的排查方式。 正在失業(yè)中的《課多周刊》(第3期) 我們的微信公眾號(hào)：fed-talk，更多精彩內(nèi)容皆在微信公眾號(hào)，歡迎關(guān)注。 若有幫助，請(qǐng)把 課多周刊 推薦給你的朋友，你的支持是我們最大的...

    Joyven 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<