课程笔记：用vue+css3编写拖拽拼图小游戏（初级课程）

本文链接：https://blog.csdn.net/qq978165754/article/details/118042144

简介：

1.所用知识：vue+css3
2.从最初级讲起，不会vue的也可以学会
3.基础知识比较少，用到什么就会讲什么，主要是拼图的一些逻辑讲解；不涉及浏览器兼容性问题
4.工具：vscode（live server插件） chrome浏览器
5.系列视频教程地址：https://www.ixigua.com/7013566246612369957

基础框架

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拼图</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue 拼图!'
      }
    })
  </script>
</body>
</html>

html的编写

层级

z-index: 1;

伪类

.content:after{
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      filter: blur(5px);
      background: url('/bgimg.png') no-repeat;
      background-size: cover;
      z-index: 2;

    }

模糊效果

filter: blur(5px);

背景大小

background-size: cover;
contain

背景图位置

background-position: -300px -150px;

		  <div class="image_list" style="left:0;top:0;background-position: 0px 0;"></div>
          <div class="image_list" style="left:100px;top:0;background-position: -100px 0;"></div>
          <div class="image_list" style="left:200px;top:0;background-position: -200px 0;"></div>
          <div class="image_list" style="left:300px;top:0;background-position: -300px 0;"></div>

          <div class="image_list" style="left:0;top:150px;background-position: 0px -150px;"></div>
          <div class="image_list" style="left:100px;top:150px;background-position: -100px -150px;"></div>
          <div class="image_list" style="left:200px;top:150px;background-position: -200px -150px;"></div>
          <div class="image_list" style="left:300px;top:150px;background-position: -300px -150px;"></div>

js动态渲染

for循环

    const img_arr=[]
    for (let index = 0; index < 16; index++) {
      img_arr.push(index)      
    }

…语法，作用：避免原始数组被改变

[...img_arr]

逻辑的计算分析

[
0,1,2,3
4,5,6,7
]

0px 0;
-100px 0;
-200px 0;
-300px 0;



0px -150px;
-100px -150px;
-200px -150px;
-300px -150px;

index 计算 background-position


0
-150px
-300px

---------------------

[
1,2,3,4 1
5,6,7,8 2
]

Math.ceil((index+1)/4) - 1

---------------------

[
0,1,2,3
4,5,6,7
]

0px 0;
100px 0;
200px 0;
300px 0;


0px 150px;
100px 150px;
200px 150px;
300px 150px;

v-for

v-for="(item,index) in img_arr" :data-index="index" :data-item="item"

css动画

transition: all .5s ease 0s;

vue触发视图渲染

this.$set(this.img_arr,'2',1)

随机打散提示

sort算法随机排列数组

 this.img_arr.sort(function(a,b){ return Math.random()-0.5})

正序和倒序

sort a-b b-a

定时器控制打散的次数

dasan(){
          let max=1
          let tm = setInterval(() => {
            if(max==0){
              clearInterval(tm)
            }
            this.suiji()
            max--
          }, 500);
        }

显示

xianshi(){
   this.display = 'block'
    setTimeout(() => {
      this.display = 'none'
      
    }, 3000);
  }

click点击事件

@click="dasan()"

交换顺序

diaohuan(arr,index1,index2){
          return arr[index2] = arr.splice(index1,1,arr[index2])[0]
        }
splice 删除指定位置的1个或几个元素，并且同时在那个地方插入1个或多个元素
返回的是一个数组，删除了谁

鼠标（手指）拖拽交换顺序

阻止默认事件

event.preventDefault()

touchstart touchmove touchend

document.elementFromPoint

obj.getAttribute

mouseup(index){
          console.log('鼠标抬起 index: ', index);
          console.log(event);
          let obj = document.elementFromPoint(event.changedTouches[0].clientX,event.changedTouches[0].clientY)

          let end_index = obj.getAttribute('data-index')

          this.diaohuan(this.img_arr,index,end_index)


          console.log(this.img_arr);

        }

鼠标跟随动画

记录点击时的坐标

this.start_x=event.targetTouches[0].clientX
this.start_y=event.targetTouches[0].clientY

记录点击时的元素

this.target = event.target

记录点击时的位置

this.start_left = parseInt(this.target.style.left)
this.start_top = parseInt(this.target.style.top)

记录点击时的index

this.start_index = index

移动的时候

计算偏移量
let x = event.changedTouches[0].clientX - this.start_x
let y = event.changedTouches[0].clientY - this.start_y

设置元素的位置
this.target.style.left = left+x+‘px’
this.target.style.top = top+y+‘px’

复位

this.target.style.left = this.start_left+‘px’
this.target.style.top = this.start_top+‘px’

什么时候算是完成了

JSON.stringify(this.img_arr) == JSON.stringify(img_arr)

计时器

setInterval 100毫秒执行一次

clearInterval 完成时清除掉

new Date getMinutes getSeconds getMilliseconds

转换成2位数

dbl(s){
   return s<10?'0'+s:s>100?parseInt(s/10):s
}

完成！