vue实现拼图小游戏

游戏效果

1.png
2.png

游戏规则

1. 点击图片移动拼出来完整的图片

实现思路

1. 把游戏转换为二维数组的排序
2. 0设置为空白图片
3. 点击图片判断该图片上下左右是否有0，有0则进行数据交换，实现图片移动效果
4. 点击移动方法里面把二维数字转换为一维然后校验答案，如果相同提示恭喜过关
5. 设置游戏难度低中高，提供二维数字的长度而已游戏逻辑不变

游戏源码

<template>
  <div>
    <a-spin :spinning="spinning" size="large">
      <div class="actions">
        <a-button type="danger" @click="cheat">点击作弊</a-button>
        <a-button type="primary" @click="reload">重新开始</a-button>
        <a-button type="primary" @click="getImg">换个图片</a-button>
      </div>
      <div class="actions">
        <a-button type="primary" @click="setLevel(3)">初级</a-button>
        <a-button @click="setLevel(4)">中级</a-button>
        <a-button type="danger" @click="setLevel(5)">高级</a-button>
      </div>
      <h2 class="nav">目标图片</h2>
      <div class="tip">
        <img :src="imgBase64" />
      </div>
      <h2 class="nav">
        <span>游戏区域</span> <span></span>
      </h2>
      <div class="puzzle">
        <div v-if="success" class="scu" :style="{
          background: `rgba(0, 0, 0, 0.2)`
        }">
          <div>
            <h1>恭喜过关</h1>
            <a-button @click="reload">再来一次</a-button>
          </div>
        </div>
        <div v-for="(item, inx) in puzzle" :key="inx">
          <div v-for="(itm, i) in item" :key="i" @click="movePuzzle(inx, i)">
            <div class="inx" v-if="!success">{{ itm }}</div>
            <img :src="imgBase64" :style="getClip(itm)" v-if="itm > 0 || (itm === 0 && success)" />
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 游戏难度默认低
const curLevel = ref(3)
// 加载状态
const spinning = ref(true)
// 是否成功
const success = ref(false)

// 设置游戏难度
const setLevel = (level: number) => {
  answer = getAnswer(level)
  curLevel.value = level
  reload()
}

// 获取最终答案
const getAnswer = (level: number) => {
  const answerList = []
  for (let i = 1; i < level * level; i++) {
    answerList.push(i)
  }
  answerList.push(0)
  return answerList
}

// 随机生成游戏
const getPuzzle = (level: number) => {
  const temp = getAnswer(level)
  temp.sort(() => {
    return Math.round(Math.random()) - 1
  })
  if (temp === getAnswer(level)) {
    getPuzzle(level)
  }
  const puzzle: number[][] = new Array(level)
  for (let i = 0; i < level; i++) {
    puzzle[i] = new Array(level);
    for (let j = 0; j < level; j++) {
      puzzle[i][j] = temp[level * i + j]
    }
  }

  return puzzle
}

// 校验当前拼图
const testPuzzle = () => {
  const curPuzzle: number[] = []
  puzzle.value.forEach((itm: number[]) => {
    itm.forEach((it: number) => {
      curPuzzle.push(it)
    })
  })
  return curPuzzle.join('') === answer.join('')
}

// 点击操作
const movePuzzle = (x: number, y: number) => {
  const clickItem = puzzle.value[x][y]
  if (clickItem === 0) {
    return
  }
  let targetX = -1
  let targetY = -1
  if (checkAdjacent(x - 1, y)) {
    targetX = x - 1
    targetY = y
  }
  if (checkAdjacent(x + 1, y)) {
    targetX = x + 1
    targetY = y
  }
  if (checkAdjacent(x, y - 1)) {
    targetX = x
    targetY = y - 1
  }
  if (checkAdjacent(x, y + 1)) {
    targetX = x
    targetY = y + 1
  }
  if (targetX > -1 && targetY > -1) {
    const temp = puzzle.value[x][y]
    puzzle.value[x][y] = puzzle.value[targetX][targetY]
    puzzle.value[targetX][targetY] = temp
    if (testPuzzle()) {
      console.log('success');
      success.value = true
    }
  } else {
    console.log('无法移动');
  }

}

// 校验是否能够移动
const checkAdjacent = (x: number, y: number) => {
  if (x < 0 || x === curLevel.value) {
    return false
  }
  if (y < 0 || y === curLevel.value) {
    return false
  }
  return puzzle.value[x][y] === 0
}

// 用于图片渲染
const getClip = (index: number) => {
  const w = 360 / curLevel.value
  if (index === 0) {
    return {
      top: - w * (curLevel.value - 1) + 'px',
      left: - w * (curLevel.value - 1) + 'px'
    }
  }
  const temp = index - 1
  const top = parseInt((temp / curLevel.value).toString()) * w
  const left = temp % curLevel.value * w
  return {
    top: -top + 'px',
    left: -left + 'px'
  }
}

// 重新开始游戏
const reload = () => {
  success.value = false
  puzzle.value = getPuzzle(curLevel.value)
}

// 作弊器，用于开发调试
const cheat = () => {
  const temp = getAnswer(curLevel.value)
  let pz: number[][] = []
  for (let i = 0; i < curLevel.value; i++) {
    pz[i] = []
    for (let j = 0; j < curLevel.value; j++) {
      pz[i][j] = temp[curLevel.value * i + j]
    }
  }
  pz[curLevel.value - 1][curLevel.value - 1] = pz[curLevel.value - 2][curLevel.value - 1]
  pz[curLevel.value - 2][curLevel.value - 1] = 0
  puzzle.value = pz
}

// 默认图片
const imgBase64 = ref(`data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gAXR2VuZXJhdGVkIGJ5IFNuaXBhc3Rl/9sAQwAKBwcIBwYKCAgICwoKCw4YEA4NDQ4dFRYRGCMfJSQiHyIhJis3LyYpNCkhIjBBMTQ5Oz4+PiUuRElDPEg3PT47/8AACwgAHgAeAQERAP/EANIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCxAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/9oACAEBAAA/APZqKKKKKKKKKKKKKKK//9k=`)

// 获取图片和更新图片
const getImg = () => {
  spinning.value = true
  const imgUrl = `https://picsum.photos/600/600?r=${new Date().getTime()}`
  fetch(imgUrl, {
    headers: new Headers({
      'Origin': location.origin
    }),
    mode: 'cors'
  }).then(res => {
    res.blob().then(b => {
      let oFileReader = new FileReader();
      oFileReader.onloadend = function (e: any) {
        spinning.value = false
        imgBase64.value = e.target.result
      };
      oFileReader.readAsDataURL(b);
    })
  })
}

let answer = getAnswer(curLevel.value)
const puzzle = ref<number[][]>(getPuzzle(curLevel.value))
getImg()
</script>

<style scoped lang="scss">
.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 360px;
  height: 45px;
}

.tip {
  width: 360px;
  height: 180px;
  margin: 16px auto;

  img {
    width: 180px;
    height: 180px;
  }
}

.nav {
  width: 360px;
  margin: 0px auto;
}

.puzzle {
  margin: 16px auto;
  width: 360px;
  height: 360px;
  display: flex;
  flex-direction: column;
  position: relative;

  &>div {
    flex: 1;
    display: flex;
    flex-direction: row;

    &>div {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border: 1px solid #ace;
      position: relative;
      overflow: hidden;
      background: #ace;

      .inx {
        font-size: 14px;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        color: #fff;
        background: rgba($color: #000000, $alpha: .5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
        position: absolute;
        right: 4px;
        top: 4px;
      }

      img {
        position: absolute;
        width: 360px;
        height: 360px;
        z-index: 1;
      }
    }
  }

  .scu {
    width: 360px;
    height: 360px;
    background-size: 360px 360px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    // background: $bgImg no-repeat center;

    &>div {
      height: 100%;
      width: 100%;
      background: rgba($color: #000000, $alpha: .5);
      position: relative;

      h1 {
        width: 100%;
        height: 100%;
        font-size: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ace;
      }

      button {
        position: absolute;
        bottom: 50px;
      }
    }
  }
}
</style>