拼图小游戏（前端）
程序员文章站
2022-07-13 08:27:38
...
每次元素的交换都会引起数组的变化，根据这个，来完成页面的重新渲染实现‘交换’效果，莫得动画
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 = []
}
}
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;
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();
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)){
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’，害~~
上一篇： # java拼图小游戏
下一篇： 原生js实现贪食蛇小游戏