这是一个基于vue的Demo，可以实现拼图动画，但是具体的没有写拼图成功的逻辑，鼠标悬停移动。周期刷新
我把它放到的我的博客园界面上了。刷新界面可以看到。
演示地址
：https://liruilongs.github.io/jigsawPuzzle.github.io/
部分代码
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>vue.js fifteen puzzle</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="jigsawID" ></div> <script src='vue.min.js'></script> <script src="./script.js"></script> </body> </html>
style.css，
script.js，
*, *:before, *:after {
box-sizing: inherit;
}
.wrapper {
position: relative;
95vmin;
height: 95vmin;
max- 500px;
max-height: 500px;
border-radius: 8px;
list-style: none;
overflow: hidden;
padding: 8px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
100%;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
border: 1px solid #000;
font-size: 18px;
font-family: inherit;
cursor: pointer;
transition: opacity 0.2s ease, visibility 0s linear;
}
.overlay-hidden {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 4px;
height: 100%;
100%;
margin: 0;
padding: 0;
list-style: none;
}
.item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
.button {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
100%;
padding: 0;
border-radius: 5px;
border: 1px solid Transparent; box-shadow: 0 0 5px #303133;
font-size: 18px;
font-family: inherit;
background: #fff;
cursor: pointer;
}
.button:focus {
outline: none;
color: #fff;
background: #00f;
}
.button:focus:active {
background: #fff;
color: inherit;
}
.button:disabled {
color: inherit;
cursor: default;
}
.hidden {
visibility: hidden;
}
.list-move {
transition: -webkit-transform 0.4s ease;
transition: transform 0.4s ease;
transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
const FIFTEEN = Array.from({ length: 15 }, (e, i) => i + 1);
FIFTEEN.push(false);
const arraysEqual = (arr1, arr2) => {
if (arr1.length !== arr2.length) return false;
for (let i = arr1.length; i--;) {
if (arr1[i] !== arr2[i]) return false;
}
return true;
};
const isPlayable = (emptyIndex, tileIndex, width) =>
emptyIndex % width !== 0 && emptyIndex - 1 === tileIndex ||
emptyIndex % width !== width - 1 && emptyIndex + 1 === tileIndex ||
emptyIndex - width === tileIndex ||
emptyIndex + width === tileIndex;
const app = document.createElement('div');
document.getElementById("jigsawID").appendChild(app);
new Vue({
el: app,
data: function () {
return {
mounted: false,
state: [...FIFTEEN] };
},
computed: {
completed: function () {
return this.mounted && arraysEqual(FIFTEEN, this.state);
} },
mounted: function () {
this.mounted = true;
this.shuffleState();
},
methods: {
updateState(i) {
const updated = [...this.state];
updated[this.state.indexOf(false)] = this.state[i];
updated[i] = false;
this.state = updated;
},
shuffleState() {
this.state.sort(() => Math.random() - 0.5);
} },
render(h) {
const empty = this.state.indexOf(false);
return h(
'div',
{ class: 'wrapper' },
[
h(
'transition-group', {
class: 'grid',
props: { tag: 'ul', name: 'list' } },
this.state.map((num, i) => h(
'li', {
class: { 'item': true, 'hidden': !num },
key: num },
[h(
'img',
{
attrs: { disabled: this.completed || !isPlayable(empty, i, 4) ,src:"./hzw-0"+num+".gif"},
class: 'button',
on: !this.completed && isPlayable(empty, i, 4) ? { mouseover: e => {
this.updateState(i);
e.currentTarget.blur();
} } : {} },
)]))),
h(
'button',
{
attrs: { disabled: !this.completed },
class: { overlay: true, 'overlay-hidden': !this.completed },
on: this.completed ? { mouseover: () => this.shuffleState() } : {} },
'Congratulations! Play again?')]);
} });
