https://github.com/hsiangleev/vue-puzzle
vue实现16格拼图
https://github.com/hsiangleev/vue-puzzle
Last synced: 8 months ago
JSON representation
vue实现16格拼图
- Host: GitHub
- URL: https://github.com/hsiangleev/vue-puzzle
- Owner: hsiangleev
- Created: 2017-09-17T04:24:46.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-17T04:26:56.000Z (almost 9 years ago)
- Last Synced: 2024-12-28T06:10:08.817Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://hsiangleev.github.io/vue-puzzle/
- Size: 70.3 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### vue拼图
[链接地址]( https://hsiangleev.github.io/vue-puzzle/ )
>1. 定义组件box
> 2. 使用slot在父组件插入button，调用子组件this.$children[0].randomNum()重新生成随机数组达到重新开始游戏的目的
> 3. 子组件中使用v-for生成li，再添加样式时使用 (!val) 给空值添加样式
> 4. 代码思路：
> * 定义两个数组，一个为完成后的，一个为打乱的
> 打乱数组代码:
> ```javascript
> this.randomArr.sort(function (a,b){
> return Math.random()-0.5;
> })
> ```
> * 每次移动前获取点击的 value 值，和其上下左右的 value 值
> * 判断若四周有value值为空，则交换数组顺序
> 交换数组顺序代码:
> this.randomArr.splice(index,1,lNum);
> this.randomArr.splice(index-1,1,cNum);
> * 每次移动后判断两个数组是否相等
> 代码:
> ```javascript
> if(this.numArr.join(" ")==this.randomArr.join(" ")){
> return true;
> }else{
> return false;
> }
> ```
***