拼图小游戏（前端）

最新推荐文章于 2024-05-05 07:41:03 发布

小沅白

最新推荐文章于 2024-05-05 07:41:03 发布

阅读量885

点赞数 2

文章标签： js html javascript

本文链接：https://blog.csdn.net/O0_0O__/article/details/106947252

版权

判断点击的碎片是否能与空白部分交换即判断当前碎片是否与空白部分相邻
每次元素的交换都会引起数组的变化，将变化后的数组重新渲染，来实现‘交换’效果

效果图

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();//创建dom
    this.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.img
    return img
}
var jigsaw = new Jigsaw('Jigsaw',newarr,3,f1);                                                                                                     
jigsaw.init()                                                                                                                                          ~~（小声哔哔）本来是看公司前辈写的一个js有涉及原型，就看了一下原型链，也想自己整一个。感觉自己只知道原型链是干什么的，但是自己描述不出来，也整不明白"___proto___"和‘pototype’。就写了这个希望能写完就可以弄明白，但是写完了也只会无脑加‘prototype’，害~~

小沅白

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
拼图小游戏（前端）

每次元素的交换都会引起数组的变化，根据这个，来完成页面的重新渲染实现‘交换’效果，莫得动画html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen
复制链接

扫一扫