拼图小游戏（前端）
判斷點擊的碎片是否能與空白部分交換即判斷當前碎片是否與空白部分相鄰
每次元素的交換都會引起數組的變化，將變化后的數組重新渲染，來實現‘交換’效果
html部分
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css"></head><body><!--用來承載這個游戲--><div id="Jigsaw"></div></body></html>css樣式部分
/*不重要，自己隨便定義也可以 */ .line{display: flex; } .line div{width: 100px;height: 100px;background-color: #e1e1e1;font-size: 15px;line-height: 100px;text-align: center;box-sizing: border-box;border: 1px solid #fff; } .line .white, #Jigsaw{background-color: #fff; }JS 部分
function Jigsaw(dom,data,size,fn){this.$data = data;//原始數據this.$size =size;//九宮格或者十六宮格this.$jigsaw_data = null //處理后的拼圖數組this.$dom = document.getElementById(dom);//承載游戲的元素this.$changeEle = null,//交換的元素this.$change = {x:null,y:null}//交換元素的坐標this.$finish = false;//游戲結束標志this.$step = 0;//移動步數this.fn = fn//自定義渲染類型 } Jigsaw.prototype.init = function(){//游初始化if(!this.$dom){console.log('要承載的對象不存在')return}if(this.data_handle()){//處理傳入的數組console.log('錯誤的數據格式')return}this.game() } Jigsaw.prototype.data_handle = function(){//處理傳入的原始數組if(this.$data.length!=(this.$size*this.$size-1)){return true //傳入的數據長度不對}var arr = []var tmp = []for(let i = 0 ; i < this.$data.length ; i++){tmp.push(this.$data[i])if(tmp.length==this.$size||i==(this.$data.length-1)){if(tmp.length<this.$size){tmp.push(null)}arr.push(tmp);tmp = []}}/**生成了一個二維數組[[1,2,3],[4,5,6],[7,8,null]]*/this.$jigsaw_data = arr } Jigsaw.prototype.createLine = function(){//渲染游戲靜態頁面this.$dom.innerHTML = ''//循環二維數序this.$jigsaw_data.forEach((item,y)=>{var line = document.createElement('div');line.className = 'line';item.forEach((eve,x)=>{var ele = document.createElement('div');ele.setAttribute('x',x)ele.setAttribute('y',y)if(eve==null){//如果值為空，則渲染成白塊ele.className = 'white'}else{//不為空則根據自己定義的函數渲染ele.appendChild(this.fn(eve))ele.className = 'sqrt'}line.appendChild(ele)})this.$dom.appendChild(line)}) } Jigsaw.prototype.exchange = function(){//添加點擊事件var sqrt = this.$dom.getElementsByClassName('sqrt');var _this = this;for(let i =0; i < sqrt.length;i++){sqrt[i].onclick=function(){//判斷是否可以交換var x =this.getAttribute('x');var y = this.getAttribute('y');var $x = x -_this.$change.x;//橫坐標與白塊的距離var $y = y -_this.$change.y;//縱坐標與白塊的距離//只有點擊的碎片與白塊相鄰才可以交換，要么上下相鄰（x坐標相同$x=0,y值差值為一），要么左右相鄰(y值相同$y=0，x值插值為一)if(Math.abs($x+$y)==1){//確認可以交換則更新數組var tmp = _this.$jigsaw_data[y][x];_this.$jigsaw_data[_this.$change.y][_this.$change.x] = tmp;_this.$jigsaw_data[y][x]=null_this.game()_this.$step ++}}} } Jigsaw.prototype.resetwhite=function(){//查找每次交換后的‘白塊’this.$changeEle = this.$dom.getElementsByClassName('white')[0];this.$change = {x:Number(this.$changeEle.getAttribute('x')),y:Number(this.$changeEle.getAttribute('y'))} } Jigsaw.prototype.game = function(){//開始游戲this.createLine();//創建domthis.endjudge();//游戲結束判斷if(!this.$finish){this.resetwhite();this.exchange()}else{console.log('游戲結束，你一共走了' + this.$step + '步')} } Jigsaw.prototype.endjudge=function(){//游戲的結束判斷，當數組的順序是升序的時候，或者符合自己自定的排列方式時var arr2 = this.$jigsaw_data.reduce(function (a, b) { return a.concat(b)} );//將二維重新轉化為一維數組for(var i = 0 ; i <arr2.length ;i ++){if(arr2[i]&&arr2[i].id !==(i+1)){//判斷碎片的id值與索引值是否一一對應,這邊我給數組的每個元素都有id值與元素對應索引值相差一this.$finish = false;break;}else{this.$finish = true;}} }var arr = [{id:1,img:'./1.png'},//這里的路徑是我自己圖片的路徑{id:7,img:'./7.png'},{id:6,img:'./6.png'},{id:2,img:'./2.png'},{id:3,img:'./3.png'},{id:5,img:'./5.png'},{id:4,img:'./4.png'},{id:8,img:'./8.png'}];var newarr=[]for( var i =8 ; i>=0;i--){var tmp = arr.splice(random(i),1)newarr = newarr.concat(tmp)}//隨機排列這些圖片 function random (n){return Math.ceil(Math.random()*n) } function f1 (obj){var img =document.createElement('img');img.style.width ='100%';img.src = obj.imgreturn img } var jigsaw = new Jigsaw('Jigsaw',newarr,3,f1); jigsaw.init() ~~（小聲嗶嗶）本來是看公司前輩寫的一個js有涉及原型，就看了一下原型鏈，也想自己整一個。感覺自己只知道原型鏈是干什么的，但是自己描述不出來，也整不明白"___proto___"和‘pototype’。就寫了這個希望能寫完就可以弄明白，但是寫完了也只會無腦加‘prototype’，害~~總結
- 上一篇： 新技能Get：使用excel更换证件照背
- 下一篇： imgcook（图像大厨）初体验，图片转