1200字范文 > 自定义上传图片拼图游戏

自定义上传图片拼图游戏

时间：2022-12-28 05:38:05

相关推荐

自定义上传图片拼图游戏

1. 游戏访问连接

点击跳转

2. 九宫格拼图原理

图例原理：

上图的九宫格图例，每个格子都有一个(x,y)的坐标，假如格子9是空白格子，怎么知道6和8是它的直接相邻格子呢。这时候就体现出格子坐标(x,y)的作用了，使用公式：|(x6 - x9)| + |(y6 - y9)| = 1，将空白格子9的坐标与格子6的坐标进行对应坐标的差值的绝对值的和等于1，就证明它们是直接相邻格子，可进行移动互换。详细原理请点击：跳转

3. 实现过程，代码分析

flex实现九宫格布局：

现在的布局是这样子的：

3. 分析：每个li代表一个格子，自定义属性data-x和data-y代表坐标(x, y)；而样式order用于对格子进行移动排序；格子9添加id='empty'用于标识为空白格子。 4. 因为格子的宽度是通过百分比设置的，会根据不同屏幕宽度的变化而变化；而且我们需要正方形的小格子，所以格子的高度需要js动态计算：

// 设置格子的高度、背景图片的尺寸setChildStyle() {this.childWidth = window.getComputedStyle(this.oChild[0], false).width; // 获取格子宽度console.log(this.childWidth);for (let i = 0; i < this.oChild.length; i++) {this.oChild[i].style.height = `${this.childWidth}`;}}复制代码

现在变成

6. 现在给每个格子设置背景图片的尺寸（background-size），将格子的background-size的宽度设置成格子父节点ul的宽度，高度为auto，然后通过backgound-position进行定位，用格子的背景拼凑成一张完整的图片

setChildStyle() {this.childWidth = window.getComputedStyle(this.oChild[0], false).width;console.log(this.childWidth);for (let i = 0; i < this.oChild.length; i++) {this.oChild[i].style.height = `${this.childWidth}`;this.oChild[i].style.backgroundSize = `${this.ulWidth} auto`;this.setBgpositon(this.oChild[i]);}}复制代码

其实每个格子的背景图片都是同一张，只不过是通过background-position 对背景图片进行定位，让每个格子只显示图片背景的九分之一，

// 设置背景图在格子的位置setBgpositon(chiObj) {let x = chiObj.getAttribute('data-x') - 1;let y = chiObj.getAttribute('data-y') - 1;chiObj.style.backgroundPosition = `${-x*parseInt(this.childWidth)}px ${-y*parseInt(this.childWidth)}px`;}复制代码

如下图视：

设置默认背景图片后：

// 设置格子的背景图片setBgImg(imgUrl) {for (let i = 0; i < this.oChild.length - 1; i++) {this.oChild[i].style.backgroundImage = `url(${imgUrl})`;}}复制代码

接下来把格子撸成可移动的，与空白格子直接相邻的格子都可以与空白格子换位，一开始的order样式就起作用了。点击格子，首先比较该格子是否与空白格子直接相邻，如果是就交换格子的data-x、data-y和order值进行换位：

childEvent() {let that = this;let oEmptyChild = document.getElementById('empty'); // 获取空白的格子对象this.oUl[0].addEventListener('click', function(ev){let target = ev.target;let targetX, targetY, targetOrder;let iEmptyX, iEmptyY, iEmptyOrder;if (target.className != 'child' ) return false;iEmptyX = oEmptyChild.getAttribute('data-x');iEmptyY = oEmptyChild.getAttribute('data-y');iEmptyOrder = window.getComputedStyle(oEmptyChild, false).order;targetX = target.getAttribute('data-x');targetY = target.getAttribute('data-y');targetOrder = window.getComputedStyle(target, false).order;if (Math.abs(targetX - iEmptyX) + Math.abs(targetY - iEmptyY) == 1) {// data-x data-y order 值互换[iEmptyX, targetX] = [targetX, iEmptyX];[iEmptyY, targetY] = [targetY, iEmptyY];[iEmptyOrder, targetOrder] = [targetOrder, iEmptyOrder];oEmptyChild.setAttribute('data-x', iEmptyX);oEmptyChild.setAttribute('data-y', iEmptyY);oEmptyChild.style.order = iEmptyOrder;target.setAttribute('data-x', targetX);target.setAttribute('data-y', targetY);target.style.order = targetOrder;}}, false);}复制代码

接下来是把上传的img图片设置成格子背景，通过监听input type='file'的change事件来获取图片文件files：

imgEvent() {let that = this;this.oFile.addEventListener('change', function(){let imgUrl = window.URL.createObjectURL(this.files[0]); // 该方法将files转换成img可访问的本地路径that.oImg.setAttribute('src', imgUrl);that.oImg.onload = function() {that.setBgImg(imgUrl); // 重新设置格子背景}}, false);}复制代码

源码地址点击访问

（完）

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。