拼图小游戏（前端）
判斷點(diǎn)擊的碎片是否能與空白部分交換即判斷當(dāng)前碎片是否與空白部分相鄰
每次元素的交換都會(huì)引起數(shù)組的變化，將變化后的數(shù)組重新渲染，來實(shí)現(xiàn)‘交換’效果
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><!--用來承載這個(gè)游戲--><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;//原始數(shù)據(jù)this.$size =size;//九宮格或者十六宮格this.$jigsaw_data = null //處理后的拼圖數(shù)組this.$dom = document.getElementById(dom);//承載游戲的元素this.$changeEle = null,//交換的元素this.$change = {x:null,y:null}//交換元素的坐標(biāo)this.$finish = false;//游戲結(jié)束標(biāo)志this.$step = 0;//移動(dòng)步數(shù)this.fn = fn//自定義渲染類型 } Jigsaw.prototype.init = function(){//游初始化if(!this.$dom){console.log('要承載的對象不存在')return}if(this.data_handle()){//處理傳入的數(shù)組console.log('錯(cuò)誤的數(shù)據(jù)格式')return}this.game() } Jigsaw.prototype.data_handle = function(){//處理傳入的原始數(shù)組if(this.$data.length!=(this.$size*this.$size-1)){return true //傳入的數(shù)據(jù)長度不對}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 = []}}/**生成了一個(gè)二維數(shù)組[[1,2,3],[4,5,6],[7,8,null]]*/this.$jigsaw_data = arr } Jigsaw.prototype.createLine = function(){//渲染游戲靜態(tài)頁面this.$dom.innerHTML = ''//循環(huán)二維數(shù)序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{//不為空則根據(jù)自己定義的函數(shù)渲染ele.appendChild(this.fn(eve))ele.className = 'sqrt'}line.appendChild(ele)})this.$dom.appendChild(line)}) } Jigsaw.prototype.exchange = function(){//添加點(diǎn)擊事件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;//橫坐標(biāo)與白塊的距離var $y = y -_this.$change.y;//縱坐標(biāo)與白塊的距離//只有點(diǎn)擊的碎片與白塊相鄰才可以交換，要么上下相鄰（x坐標(biāo)相同$x=0,y值差值為一），要么左右相鄰(y值相同$y=0，x值插值為一)if(Math.abs($x+$y)==1){//確認(rèn)可以交換則更新數(shù)組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();//創(chuàng)建domthis.endjudge();//游戲結(jié)束判斷if(!this.$finish){this.resetwhite();this.exchange()}else{console.log('游戲結(jié)束，你一共走了' + this.$step + '步')} } Jigsaw.prototype.endjudge=function(){//游戲的結(jié)束判斷，當(dāng)數(shù)組的順序是升序的時(shí)候，或者符合自己自定的排列方式時(shí)var arr2 = this.$jigsaw_data.reduce(function (a, b) { return a.concat(b)} );//將二維重新轉(zhuǎn)化為一維數(shù)組for(var i = 0 ; i <arr2.length ;i ++){if(arr2[i]&&arr2[i].id !==(i+1)){//判斷碎片的id值與索引值是否一一對應(yīng),這邊我給數(shù)組的每個(gè)元素都有id值與元素對應(yīng)索引值相差一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)}//隨機(jī)排列這些圖片 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() ~~（小聲嗶嗶）本來是看公司前輩寫的一個(gè)js有涉及原型，就看了一下原型鏈，也想自己整一個(gè)。感覺自己只知道原型鏈?zhǔn)歉墒裁吹?#xff0c;但是自己描述不出來，也整不明白"___proto___"和‘pototype’。就寫了這個(gè)希望能寫完就可以弄明白，但是寫完了也只會(huì)無腦加‘prototype’，害~~總結(jié)
- 上一篇： 新技能Get：使用excel更换证件照背
- 下一篇： imgcook（图像大厨）初体验，图片转