使用js編寫實現拼圖遊戲
本文實例為大傢分享瞭用js編寫實現拼圖遊戲的具體代碼,供大傢參考,具體內容如下
目標
使用原生js編寫一個拼圖遊戲,我這裡寫瞭兩種拼圖的方法。一種是拖拽拼圖,一種是經典的九宮格拼圖,可以自定義參數設置遊戲難度
先看看截圖效果
拖拽模式(拖拽圖片切換圖片)
點擊模式(點擊圖片與空白區域切換位置)
不多說,直接上代碼
css
#canvasBox{ margin: 0 auto; position: fixed; border: 2px solid #f00; overflow: hidden; } .item{ display: inline-block; border: 1px solid #f00; position: absolute; top: 0; left: 0; transition: 0.1s; }
html
<div style="margin: 0 auto;text-algin:center;"> <button onclick="setGame('block', 'none')">拖拽模式</button> <button onclick="setGame('none', 'block')" >點擊模式</button> </div> <div id="canvasBox"></div> <div id="canvasBox2"></div>
javascript
/* * @title JigsawGame 拼圖遊戲 * @params obj Object 遊戲參數 * { * @param Id String 容器id * @param imgUrl String 圖片路徑 * @param level Number 遊戲難度 簡單:1 || 普通:2 || 困難:3 * @param gameType Number 遊戲類型 拖動版本:1 || 點擊版本:2 * } * @author beideng */ function JigsawGame(obj){ // 初始化容器 this.Id = document.getElementById(obj.Id); // 初始化圖片 this.img = new Image(); this.img.src = obj.imgUrl; // 容器最大寬度 this.windowWidth = document.body.clientWidth; this.maxWidth = this.windowWidth > 750 ? 750 : (this.windowWidth * 0.9); // 設置容器寬高 this.Id.style.width = this.maxWidth + "px"; this.Id.style.height = this.maxWidth + "px"; this.Id.style.left = (this.windowWidth - this.maxWidth)/2 + "px"; this.Id.style.top = 50 + "px"; // 獲取容器范圍 this.boxOffsetY = parseFloat(this.Id.style.top); this.boxOffsetX = parseFloat( this.Id.style.left); // 關卡(簡單:1 || 普通:2 || 困難:3) if(obj.level == 1 || obj.level == 2 || obj.level == 3 ){ this.Level = obj.level; }else{ this.level = 1; } // 難度 var diffArr = [3, 4, 5]; this.Diff= diffArr[this.Level-1]; // canvas寬高 this.cW = this.maxWidth/ this.Diff; this.cH = this.maxWidth/ this.Diff; // 記錄的小方塊個數 this.number = 0; // 正確的數組 this.numberArr = []; // 存儲小方塊的中心點坐標 this.centerXY = []; /* * 獲取遊戲類型 */ this.gameType = obj.gameType || 1; // 記錄最後一個元素的標記 this.lastElement = { sign: 0, left: 0, top: 0, Id: obj.Id + 1 }; // 初始化 this.Init(); } /* * 操作方法 * */ JigsawGame.prototype = { /* * @method 初始化 */ Init: function(){ var that = this; this.img.onload = function(){ // 格子寬高 var LevelW = that.img.width/that.Diff; var LevelH = that.img.height/that.Diff; for(var i = 0 ; i < that.Diff; i++){ for(var j = 0 ; j < that.Diff; j++){ // 初始化小方塊 that.initCube(i, j, LevelW, LevelH); } } // 打亂小方塊 that.upsetElement(); // 遊戲類型判斷 if(that.gameType == 1){ // 監聽拖動 that.Id.addEventListener("mousedown",function(event){ that.mouseDown(event); }, false); }else{ // 獲取空白小方塊坐標 that.getLastElement(); // 監聽點擊 that.Id.addEventListener("click",function(event){ that.mouseClick(event); }, false); } } }, /* * @method 初始化小方塊 * @param i Number 循環值 * @param j Number 循環值 * @param j LevelW 小方塊寬 * @param j LevelH 小方塊高 */ initCube: function(i, j, LevelW, LevelH){ // 創建一個小方塊 var item = document.createElement("div"), cW = this.cW, cH = this.cH; item.className = "item"; item.setAttribute("data-index", this.number); item.style.width = cW + "px"; item.style.height = cH + "px"; item.style.left = i * cW + "px"; item.style.top = j * cH + "px"; item.innerHTML = "<canvas class='' width='"+ cW +"' height='"+ cH +"'></canvas>"; this.Id.appendChild(item); var canvas = item.querySelector("canvas"); var ctx = canvas.getContext("2d"); /* * 當遊戲為點擊類型時 * 去掉最後一個小方塊裡的圖片 * 且記錄當前元素的坐標以及編號 */ if(this.gameType != 1 && j == this.Diff-1 && i == this.Diff-1){ this.lastElement.sign = this.number; item.id = this.lastElement.Id; }else{ ctx.drawImage(this.img, i * LevelW, j * LevelH , LevelW, LevelH, 0 , 0, cW, cH) } // 每添加一個就壓入一次到數組 this.numberArr.push({ x: i*cW +"px" , y: j*cH +"px" }); this.number++; // 壓入初始中心點 this.centerXY.push({ x: i*cW + cW / 2, y: j*cH + cH / 2 }); }, /* * @method 懸停拖住小方塊 * @param event Object 鼠標對象 */ mouseDown: function(event){ console.log(event) var event = event || window.event; var that = this; var target = event.target || event.srcElement; // 保證拖動的是想要的元素 if( target.parentElement.className.toLowerCase() == "item"){ var Element = target.parentElement; // 存儲當前元素的top,left var thisTop = parseFloat( Element.style.top ); var thisLeft = parseFloat( Element.style.left ); // 獲取當前點擊的位置 var pageX = event.pageX; var pageY = event.pageY; // 拖動 document.onmousemove = function(e){ console.log(e) that.mouseMove(e, Element, thisTop, thisLeft, pageY, pageX); return false; } // 松開 document.onmouseup = function(e){ that.mouseUp(e, Element, thisTop, thisLeft) // 釋放拖拽 document.onmousemove = null; document.onmouseup = null; return false; } } return false; }, /* * @method 拖動小方塊 * @param e Object 鼠標對象 */ mouseMove: function(e, Element, thisTop, thisLeft, pageY, pageX){ var pageX2 = e.pageX; var pageY2 = e.pageY; Element.style.top = thisTop + (pageY2 - pageY) + "px"; Element.style.left = thisLeft + (pageX2 - pageX) + "px"; Element.style.zIndex = 1000; }, /* * @method 松開小方塊 * @param e Object 鼠標對象 */ mouseUp: function(e, Element, thisTop, thisLeft){ var that = this, cW = this.cW, cH = this.cH; // 檢測當前拖動替換目標 var moveCenterX = parseFloat(Element.style.left) + cW / 2; var moveCenterY = parseFloat(Element.style.top) + cH / 2; var changeElementIndex = this.checkChangeElement(moveCenterX, moveCenterY); var changeElement = this.Id.getElementsByClassName("item")[changeElementIndex]; // 限制拖拽范圍 // 當松開的坐標xy在容器范圍內 if( e.pageX < this.boxOffsetX || e.pageX > (this.boxOffsetX + this.maxWidth) || e.pageY < this.boxOffsetY || e.pageY > (this.boxOffsetY + this.maxWidth) ){ console.log("釋放") Element.style.top = thisTop + "px"; Element.style.left = thisLeft + "px"; }else{ // 判斷當前元素是否離開瞭自己的格子 if( Element.getAttribute("data-index") == changeElement.getAttribute("data-index")){ Element.style.top = thisTop + "px"; Element.style.left = thisLeft + "px"; }else{ // 進行替換 Element.style.top = changeElement.style.top ; Element.style.left = changeElement.style.left ; changeElement.style.top = thisTop + "px"; changeElement.style.left = thisLeft + "px"; changeElement.style.zIndex = 1000; // 更新小方塊中心點 this.updateElement(); } } // 消除層級問題 setTimeout(function(){ Element.style.zIndex = 0; changeElement.style.zIndex = 0; if(that.compareArray()){ alert("恭喜你,拼圖成功!"); } }, 150); // 判斷拼圖完成 console.log(this.compareArray()) console.log(this.numberArr) }, /* * @method 檢測當前拖動替換目標 * @param moveLeft Number 鼠標移動的x值 * @param moveTop Number 鼠標移動的y值 * @return minIndex Number 返回目標對象下標 * 通過三角函數檢測當前拖動對象中心點和其他所有對象中心點距離,離誰最近就和誰替換 */ checkChangeElement: function(moveLeft, moveTop){ // 最小距離 var minDistance = null; // 最小距離替換目標 var minIndex = null; for(var i = 0 ; i < this.centerXY.length; i++){ var x = Math.abs( moveLeft - this.centerXY[i].x ); var y= Math.abs( moveTop - this.centerXY[i].y ); var val = Math.ceil(Math.sqrt( x * x + y * y)); // 初次判斷 if(minDistance == null){ minDistance = val; minIndex = i; } // 後續判斷 if(minDistance > val){ minDistance = val; minIndex = i; } } // 返回目標對象下標 return minIndex; }, /* * @method 更新小方塊中心點 */ updateElement: function(){ var allElement = this.Id.getElementsByClassName("item"), cW = this.cW, cH = this.cH; this.centerXY = []; for(var i = 0 ; i < allElement.length; i++){ this.centerXY.push({ x: parseFloat(allElement[i].style.left) + cW / 2, y: parseFloat(allElement[i].style.top) + cH / 2 }); } }, /* * @method 點擊小方塊 * @param event Object 鼠標對象 * @ 1、點擊當前非空白小方塊 * @ 2、獲取其坐標,並加減一個一個方塊寬度,用這個加減坐標去檢索空白小方塊是否在目標小方塊周邊 * @ 3、如果在,則替換這兩個小方塊的坐標 */ mouseClick: function(event){ console.log(event) var event = event || window.event; var that = this; var target = event.target || event.srcElement; // 保證拖動的是想要的元素 if( target.parentElement.className.toLowerCase() == "item"){ var Element = target.parentElement; // 當當前點擊目標為空白小方塊時,終止函數 if(Element.getAttribute("data-index") == this.lastElement.sign){ return ; } // 存儲當前元素的top,left var thisTop = parseFloat( Element.style.top ); var thisLeft = parseFloat( Element.style.left ); // 點擊檢測空白方塊是否在當前對象周邊 if(this.mouseClickCheck(thisTop, thisLeft)){ console.log(222) // 獲取空白元素 var lastElement = document.getElementById(this.lastElement.Id); // 替換這兩個元素的坐標 Element.style.top = lastElement.style.top; Element.style.left = lastElement.style.left; lastElement.style.top = thisTop + "px"; lastElement.style.left = thisLeft + "px"; this.lastElement.left = thisLeft ; this.lastElement.top = thisTop; // 消除層級問題 setTimeout(function(){ if(that.compareArray()){ alert("恭喜你,拼圖成功!"); } }, 150); // 判斷拼圖完成 console.log(this.compareArray()) console.log(this.numberArr) } } return false; }, /* * @method 點擊檢測空白方塊是否在當前對象周邊 * @param thisTop Number 當前點擊元素的top * @param thisLeft NUmber 當前點擊元素的left * @return Boolean 是否在周邊 */ mouseClickCheck: function(thisTop, thisLeft){ var cW = this.cW, cH = this.cH; if(thisTop == this.lastElement.top && (thisLeft - cH) == this.lastElement.left){ return true; } if(thisTop == this.lastElement.top && (thisLeft + cH) == this.lastElement.left){ return true; } if((thisTop - cW) == this.lastElement.top && thisLeft == this.lastElement.left){ return true; } if((thisTop + cW) == this.lastElement.top && thisLeft == this.lastElement.left){ return true; } return false; }, /* * @method 獲取空白元素left,right */ getLastElement: function(){ // 獲取空白元素 var lastElement = document.getElementById(this.lastElement.Id); console.log(this.lastElement); this.lastElement.left = parseFloat(lastElement.style.left) ; this.lastElement.top = parseFloat(lastElement.style.top); }, /* * @method 打亂小方塊 * 以小方塊的個數為次數,每次隨機抽取兩個小於小方塊的數,然後替換兩個dom元素的定位坐標 */ upsetElement: function(){ for (var i = 0; i < this.number-1; i++) { // 獲取兩個不相等的隨機值 var n1 = Math.floor(Math.random()*this.number); var n2 = Math.floor(Math.random()*this.number); do{ n2 = Math.floor(Math.random()*this.number); }while(n1 == n2) // 替換當前的兩個小方塊的坐標 var allElement = this.Id.getElementsByClassName("item"); var Top = allElement[n1].style.top ; var Left = allElement[n1].style.left ; allElement[n1].style.top = allElement[n2].style.top ; allElement[n1].style.left = allElement[n2].style.left ; allElement[n2].style.top = Top ; allElement[n2].style.left = Left ; } }, /* * @method 比較小方塊是否拼圖完成 * @return boolean * 獲取切換小方塊後,獲取小方塊的序號並與正確排序數組進行比較 */ compareArray: function(){ // 獲取序號 var allElement = this.Id.getElementsByClassName("item"); for(var i = 0; i < this.number-1; i++){ // 比較序號 if( this.numberArr[i].x != allElement[i].style.left || this.numberArr[i].y != allElement[i].style.top ){ return false; } } return true; }, } // 實例化一個對象 var box = new JigsawGame({ Id: 'canvasBox', imgUrl: '../image/lingtai.jpg', level: 1, gameType: 1 }); // 實例化一個對象 var box2 = new JigsawGame({ Id: 'canvasBox2', imgUrl: '../image/lingtai.jpg', level: 1, gameType: 2 }); function setGame(a, b){ document.getElementById("canvasBox").style.display = a; document.getElementById("canvasBox2").style.display = b; } setGame("block", "none");
稍微修改一下樣式和觸發事件,就是一個h5版本的demo。由於沒用到項目裡,沒有考慮兼容問題
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。