摘要:最近公司剛好有個活動是要做一版的拼圖小游戲,于是自己心血來潮,自己先實現(xiàn)了一把,也算是嘗嘗鮮了。下面就把大體的思路介紹一下,希望大家都可以做出一款屬于自己的拼圖小游戲,必須是更炫酷,更好玩來吧,大家一起加油。。。
最近公司剛好有個活動是要做一版 html5的拼圖小游戲,于是自己心血來潮,自己先實現(xiàn)了一把,也算是嘗嘗鮮了。下面就把大體的思路介紹一下,希望大家都可以做出一款屬于自己的拼圖小游戲,必須是更炫酷,更好玩!來吧,大家一起加油。。。利用canvas切出小塊圖片
我們知道現(xiàn)在的拼圖游戲都是由九張小圖片依次排列組成的,就是類似九宮格那樣。那么以前的做法就是我們利用Photoshop這樣的工具把原始大圖【尺寸一般都是正方形的哦】切成九張小塊的正方形小圖,但是這種做法有點不靈活,如果我們要更換圖片的話,就得重新去切圖,好麻煩。。。
不過沒關系,現(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";實現(xiàn)小塊圖片的隨機排列
這里的核心是利用了javascript數(shù)組的隨機排序,核心代碼如下:
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++; } }相關touch事件的監(jiān)聽和實現(xiàn)
這里無非就是利用向左滑動,向右滑動這些去實現(xiàn)拼圖的操作。核心代碼如下:
//阻止手機上瀏覽器的彈性下拉。。。 $("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(); } });游戲是否完成的判斷
這里的話,拼圖順序的每一次變化都要去檢測一下是否完成了,原理就是獲取當前小塊圖片的順序和原始的圖片進行比較。核心代碼如下:
var resArr = []; $("#gameBox img").each(function(k, v) { resArr.push(v.getAttribute("data-seq")); }); if (resArr.join("") === oriArr.join("")) { //完成的處理。。。 }
核心代碼和思路就是上面這些,其實整個過程走下來還是蠻簡單的,接下來無非要做的就是再加一下花哨的東西了(時間,難度等級,排名等等)。如果大家感興趣的話,完整版代碼猛戳 這里 了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/49831.html
摘要:最近公司剛好有個活動是要做一版的拼圖小游戲,于是自己心血來潮,自己先實現(xiàn)了一把,也算是嘗嘗鮮了。下面就把大體的思路介紹一下,希望大家都可以做出一款屬于自己的拼圖小游戲,必須是更炫酷,更好玩來吧,大家一起加油。。。 最近公司剛好有個活動是要做一版 html5的拼圖小游戲,于是自己心血來潮,自己先實現(xiàn)了一把,也算是嘗嘗鮮了。下面就把大體的思路介紹一下,希望大家都可以做出一款屬于自己的拼圖小...
摘要:最近公司剛好有個活動是要做一版的拼圖小游戲,于是自己心血來潮,自己先實現(xiàn)了一把,也算是嘗嘗鮮了。下面就把大體的思路介紹一下,希望大家都可以做出一款屬于自己的拼圖小游戲,必須是更炫酷,更好玩來吧,大家一起加油。。。 最近公司剛好有個活動是要做一版 html5的拼圖小游戲,于是自己心血來潮,自己先實現(xiàn)了一把,也算是嘗嘗鮮了。下面就把大體的思路介紹一下,希望大家都可以做出一款屬于自己的拼圖小...
摘要:正在失業(yè)中的課多周刊第期我們的微信公眾號,更多精彩內容皆在微信公眾號,歡迎關注。若有幫助,請把課多周刊推薦給你的朋友,你的支持是我們最大的動力。是一種禍害譯本文淺談了在中關于的不好之處。淺談超時一運維的排查方式。 正在失業(yè)中的《課多周刊》(第3期) 我們的微信公眾號:fed-talk,更多精彩內容皆在微信公眾號,歡迎關注。 若有幫助,請把 課多周刊 推薦給你的朋友,你的支持是我們最大的...
摘要:正在失業(yè)中的課多周刊第期我們的微信公眾號,更多精彩內容皆在微信公眾號,歡迎關注。若有幫助,請把課多周刊推薦給你的朋友,你的支持是我們最大的動力。是一種禍害譯本文淺談了在中關于的不好之處。淺談超時一運維的排查方式。 正在失業(yè)中的《課多周刊》(第3期) 我們的微信公眾號:fed-talk,更多精彩內容皆在微信公眾號,歡迎關注。 若有幫助,請把 課多周刊 推薦給你的朋友,你的支持是我們最大的...
閱讀 2453·2021-11-23 09:51
閱讀 503·2019-08-30 13:59
閱讀 1820·2019-08-29 11:20
閱讀 2529·2019-08-26 13:41
閱讀 3239·2019-08-26 12:16
閱讀 729·2019-08-26 10:59
閱讀 3321·2019-08-26 10:14
閱讀 602·2019-08-23 17:21