使用js編寫實現(xiàn)拼圖游戲

更新時間：2022年07月12日 17:21:52 作者：checkMa

這篇文章主要為大家詳細介紹了使用js編寫實現(xiàn)拼圖游戲，一種是拖拽拼圖，一種是經(jīng)典的九宮格拼圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了用js編寫實現(xiàn)拼圖游戲的具體代碼，供大家參考，具體內(nèi)容如下

目標

使用原生js編寫一個拼圖游戲，我這里寫了兩種拼圖的方法。一種是拖拽拼圖，一種是經(jīng)典的九宮格拼圖，可以自定義參數(shù)設置游戲難度

先看看截圖效果

拖拽模式（拖拽圖片切換圖片）

點擊模式（點擊圖片與空白區(qū)域切換位置）

不多說，直接上代碼

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 游戲參數(shù)
?? ??? ??? ? * {
?? ??? ??? ? * ?? ?@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);

?? ??? ??? ??? ?// 關(guān)卡（簡單：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;

?? ??? ??? ??? ?// 記錄的小方塊個數(shù)
?? ??? ??? ??? ?this.number = 0;
?? ??? ??? ??? ?// 正確的數(shù)組
?? ??? ??? ??? ?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){
?? ??? ??? ??? ??? ??? ??? ?// 監(jiān)聽拖動
?? ??? ??? ??? ??? ??? ??? ?that.Id.addEventListener("mousedown",function(event){
?? ??? ??? ??? ??? ??? ??? ??? ?that.mouseDown(event);
?? ??? ??? ??? ??? ??? ??? ?}, false);
?? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ??? ?// 獲取空白小方塊坐標
?? ??? ??? ??? ??? ??? ??? ?that.getLastElement();

?? ??? ??? ??? ??? ??? ??? ?// 監(jiān)聽點擊
?? ??? ??? ??? ??? ??? ??? ?that.Id.addEventListener("click",function(event){
?? ??? ??? ??? ??? ??? ??? ??? ?that.mouseClick(event);
?? ??? ??? ??? ??? ??? ??? ?}, false);
?? ??? ??? ??? ??? ??? ?}

?? ??? ??? ??? ??? ?}

?? ??? ??? ??? ?},

?? ??? ??? ??? ?/*
?? ??? ??? ??? ? * @method 初始化小方塊?
?? ??? ??? ??? ? * @param i Number 循環(huán)值
?? ??? ??? ??? ? * @param j Number 循環(huán)值
?? ??? ??? ??? ? * @param j LevelW 小方塊寬
?? ??? ??? ??? ? * @param j LevelH 小方塊高
?? ??? ??? ??? ? */
?? ??? ??? ??? ?initCube: function(i, j, LevelW, LevelH){

?? ??? ??? ??? ??? ?// 創(chuàng)建一個小方塊
?? ??? ??? ??? ??? ?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)
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?// 每添加一個就壓入一次到數(shù)組
?? ??? ??? ??? ??? ?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在容器范圍內(nèi)
?? ??? ??? ??? ??? ?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 返回目標對象下標
?? ??? ??? ??? ? * 通過三角函數(shù)檢測當前拖動對象中心點和其他所有對象中心點距離，離誰最近就和誰替換
?? ??? ??? ??? ? */
?? ??? ??? ??? ?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;
?? ??? ??? ??? ??? ??? ?}?
?? ??? ??? ??? ??? ??? ?// 后續(xù)判斷
?? ??? ??? ??? ??? ??? ?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;
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?// 當當前點擊目標為空白小方塊時，終止函數(shù)
?? ??? ??? ??? ??? ??? ?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 打亂小方塊
?? ??? ??? ??? ? * 以小方塊的個數(shù)為次數(shù)，每次隨機抽取兩個小于小方塊的數(shù)，然后替換兩個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
?? ??? ??? ??? ? * 獲取切換小方塊后，獲取小方塊的序號并與正確排序數(shù)組進行比較
?? ??? ??? ??? ? */
?? ??? ??? ??? ?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");

稍微修改一下樣式和觸發(fā)事件，就是一個h5版本的demo。由于沒用到項目里，沒有考慮兼容問題

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: