javascript實(shí)現(xiàn)拼圖游戲

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)拼圖游戲的過(guò)程，文中示例代碼介紹的非常詳細(xì)，零基礎(chǔ)也能參考此文章，感興趣的小伙伴們可以參考一下。

為互助等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及互助網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、互助網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

原理分析：

1、鼠標(biāo)的點(diǎn)擊和松開(kāi)事件

2、顯示原圖作為參考

3、方塊的移動(dòng)替換

4、是否完成拼圖的判斷

5、完成之后會(huì)彈窗提示

效果圖如下：

javascript實(shí)現(xiàn)拼圖游戲

實(shí)例代碼如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>拼圖游戲</title>
 </head>

 <style>
 body,
 html {
 padding: 0px;
 margin: 0px;
 background: #eee;
 }

 #fangkuai {
 width: 460px;
 height: 460px;
 margin: 20px auto;
 background: #F9F9F9;
 padding: 1px 1px;
 position: relative;
 }

 #maskBox {
 opacity: 0.5;
 display: block;
 }

 #tu img {
 width: 120px;
 height: 120px;
 }

 #tu {
 width: 130px;
 height: 130px;
 margin-left: 150px;
 }
 </style>

 <body>

 <div style="width:460px;margin:20px auto;text-align:center;line-height:30px;">游戲玩法：點(diǎn)擊選中一個(gè)方塊，在點(diǎn)擊放在對(duì)應(yīng)的方塊里。</div>

 <div id="tu">
 <font>參考原圖</font>
 <img src="true.png" />
 </div>

 <div id="fangkuai"></div>

 
 </body>
 <script>
 window.onload = function() {
 //生成函數(shù)
 gameInfo.init();
 }
 </script>
 <script>
 (function($g) {
 //游戲配置
 setting = {
 gameConfig: {
 url: "true.png",
 id: "fangkuai",
 //生成規(guī)格橫4 縱4
 size: "4*4",
 //每個(gè)元素的間隔
 margin: 1,
 //拖動(dòng)時(shí)候塊透明度
 opacity: 0.8
 },
 setElement: {
 type: "div",
 id: "",
 float: "",
 display: "",
 margin: "",
 background: "",
 width: "",
 height: "",
 left: "",
 top: "",
 position: "",
 opacity: 0.4,
 animate: 0.8
 }
 };
 //元素生成參數(shù)
 var sg = setting.gameConfig;
 var st = setting.setElement;
 var gameInfo = function() {};
 gameInfo.prototype = {
 init: function() {
 this.creatObj();
 this.eventHand();
 },
 sortObj: {
 rightlist: [], //正確的排序
 romdlist: [] //打亂后的排序
 },
 creatObj: function() {
 sg.boxObj = document.getElementById(sg.id) || "";
 //尺寸自動(dòng)獲取
 var size = sg.size.split('*') || [0, 0];
 //計(jì)算單個(gè)div的高寬
 var w = Math.floor(sg.boxObj.offsetWidth / size[0]);
 var h = Math.floor(sg.boxObj.offsetHeight / size[1]);
 //圖片生成div
 var size = sg.size.split('*') || [0, 0];
 var wt = size[0],
 hg = size[1];
 
 var sortList = [];
 for (var a = 0; a < wt * hg; a++) {
 sortList.push(a);
 }
 sortList.sort(randomsort);
 this.sortObj.rightlist = sortList;
 
 var _i = 0,
 sid = 0;
 for (; _i < wt; _i++) {
 var _s = 0;
 for (; _s < hg; _s++) {
 //賦值隨機(jī)打散后的id
 st.id = sortList[sid++];
 st.display = "block";
 st.float = "left";
 
 st.margin = sg.margin + "px";
 st.background = "url('" + sg.url + "') " + (-w * _s) + "px " + (-h * _i) + "px";
 st.width = w - sg.margin * (wt / 2) + "px";
 st.height = h - sg.margin * (hg / 2) + "px";
 this.sortObj.romdlist.push(this.addElement());
 
 }
 }
 
 this.boxSort();
 },
 boxSort: function() {
 var _arrySort = this.sortObj.romdlist;
 var _tmp = [],
 _n = 0;
 eachBox(_arrySort, function(d) {
 _tmp.push(parseInt(_arrySort[d].id));
 });
 
 _tmp.sort(function(a, b) {
 return a > b ? 1 : -1;
 });
 
 for (; _n < _tmp.length; _n++) {
 var _s = 0;
 for (; _s < _arrySort.length; _s++) {
 if (_arrySort[_s].id == _tmp[_n]) {
 sg.boxObj.appendChild(_arrySort[_s]);
 }
 }
 }
 return _tmp;
 },
 
 addElement: function() {
 var obj = document.createElement(st.type);
 obj.id = st.id;
 obj.style.display = st.display;
 obj.style.float = st.float;
 obj.style.margin = st.margin;
 obj.style.background = st.background;
 obj.style.width = st.width;
 obj.style.position = st.position;
 obj.style.top = st.top;
 obj.style.left = st.left;
 obj.style.height = st.height;
 return obj;
 },
 mouseEvent: {
 mousedown: function(ev) {
 ev = ev || ev.event;
 ev.preventDefault();
 
 st.type = "span";
 st.id = "maskBox";
 st.width = this.offsetWidth + "px";
 st.height = this.offsetHeight + "px";
 st.position = "absolute";
 st.background = "";
 
 st.left = this.offsetLeft + "px";
 st.top = this.offsetTop + "px";
 },
 mouseup: function(ev) {
 ev = ev || ev.event;
 
 ev.preventDefault();
 var obj = document.getElementById(this.id);
 if (obj) {
 sg.boxObj.removeChild(obj);
 }
 },
 mousemove: function(ev) {
 ev = ev || ev.event;
 this.style.left = getX_Y.call(this, "x", ev) + "px";
 this.style.top = getX_Y.call(this, "y", ev) + "px";
 }
 
 },
 
 gameCheck: function() {
 var s = 0,
 bols = true;
 var _arry = this.sortObj.rightlist;
 var _arryRom = this.sortObj.romdlist;
 console.log(_arry);
 console.log(_arryRom);
 for (; s < _arry.length; s++) {
 if (_arry[s] != _arryRom[s].id) {
 bols = false;
 break;
 }
 }
 return bols;
 },
 eventHand: function() {
 var obj = sg.boxObj.getElementsByTagName("div");
 var i = 0,
 olen = obj.length;
 var that = this;
 var m = that.mouseEvent;
 var box_index = 0;
 for (; i < olen;) {
 (function(n) {
 //按下鼠標(biāo)
 obj[n].addEventListener("mousedown", function(e) {
 var _this = this;
 m.mousedown.call(_this, e);
 st.background = _this.style.background;
 _this.style.background = "#FFF";
 
 var _newObj = that.addElement();
 sg.boxObj.appendChild(_newObj);
 _newObj.style.opacity = sg.opacity;
 //移動(dòng)位置
 _newObj.onmousemove = function(e) {
 m.mousemove.call(_newObj, e);
 
 var _i = 0;
 
 for (; _i < olen; _i++) {
 var _w = parseInt(obj[_i].style.width) / 1.5;
 var _h = parseInt(obj[_i].style.height) / 1.5;
 var _left = obj[_i].offsetLeft;
 var _top = obj[_i].offsetTop;
 var _boxX = parseInt(this.style.left);
 var _boxY = parseInt(this.style.top);
 
 eachBox(obj, function(d) {
 obj[d].style.opacity = 1.0;
 });
 
 if (_left + _w > _boxX || _left > _boxX + _w) {
 if (_top + _h > _boxY || _top > _boxY + _h) {
 box_index = _i;
 obj[_i].style.opacity = st.opacity;
 break;
 }
 
 }
 }
 };
 //鼠標(biāo)松開(kāi)
 _newObj.addEventListener("mouseup", function(e) {
 _newObj.onmousemove = function(e) {};
 //獲取當(dāng)前停留元素的坐標(biāo)
 var tagObj = {
 id1: obj[box_index].id,
 id2: _this.id,
 bg1: obj[box_index].style.background,
 bg2: this.style.background
 };
 //交換位置
 _this.id = tagObj.id1;
 _this.style.background = tagObj.bg1;
 obj[box_index].id = tagObj.id2;
 obj[box_index].style.background = tagObj.bg2;
 
 that.sortObj.romdlist = obj;
 //還原樣式
 eachBox(obj, function(d) {
 obj[d].style.opacity = 1.0;
 });
 m.mouseup.call(_newObj, e);
 //判斷是否完成拼圖
 if (that.gameCheck()) {
 alert("好棒呀?。?！");
 }
 }, false);
 
 }, false);
 
 })(i++);
 
 }
 
 }
 }
 //隨機(jī)數(shù)
 function randomsort(a, b) {
 return Math.random() > .5 ? -1 : 1;
 }
 
 function eachBox(obj, fn) {
 var _s = 0;
 for (; _s < obj.length; _s++) {
 fn(_s);
 }
 }
 
 function getX_Y(s, ev) {
 var _b = (ev.clientX - this.parentNode.offsetLeft) - (this.offsetWidth / 2);
 if (s === "y") {
 _b = (ev.clientY - this.parentNode.offsetTop) - (this.offsetHeight / 2);
 }
 return _b;
 }
 $g.gameInfo = new gameInfo();
 })(window)
 </script>
</html>

以上就是javascript實(shí)現(xiàn)拼圖游戲的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊！

網(wǎng)頁(yè)題目：javascript實(shí)現(xiàn)拼圖游戲
URL地址：http://jinyejixie.com/article22/gpeojc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、搜索引擎優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

javascript實(shí)現(xiàn)拼圖游戲