微信小程序?qū)崿F(xiàn)的數(shù)字滑塊拼圖效果

更新時間：2024年08月09日 12:21:20 作者：yoho-zhang

滑塊拼圖（Slider?Puzzle）是一種經(jīng)典的智力游戲,通常由一個3x3或更大的格子組成,其中一個格子為空,玩家通過滑動拼圖塊來達到特定的圖案或順序,這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的數(shù)字滑塊拼圖,需要的朋友可以參考下

微信小程序?qū)崿F(xiàn)的數(shù)字滑塊拼圖

【注】本文章只是記錄下實現(xiàn)的過程，個人喜好，無技術(shù)指導(dǎo)傾向，感興趣的小伙伴可以繼續(xù)往下看下實現(xiàn)過程，

總體實現(xiàn)效果如下圖，第一個界面是拼圖初始界面，第二個是拼圖過程界面

游戲玩法介紹：

滑塊拼圖（Slider Puzzle）是一種經(jīng)典的智力游戲，通常由一個3x3或更大的格子組成，其中一個格子為空，玩家通過滑動拼圖塊來達到特定的圖案或順序。

按鈕介紹

“開始/暫停” 按鈕

初次進入頁面，需要點擊開始按鈕，才能進行游戲，第一次點擊后，屏幕上面的計時器會開始計時，再次點擊暫停按鈕，計時停止，游戲界面鎖定

“重置”按鈕

將正在進行中的游戲進行還原初始化，重新開始

代碼實現(xiàn)

代碼整體目錄結(jié)構(gòu)如下：

├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
├── project.config.json
├── project.private.config.json
├── sitemap.json
└── utils
    └── util.js

感興趣的小伙伴可以下載看下
源碼下載：https://gitee.com/ZYHHYZ/slider_puzzles

app.json

該文件僅僅是定義了一個導(dǎo)航條名稱為滑塊拼圖

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "滑塊拼圖",
    "navigationBarTextStyle": "black"
  }
}

page

page文件夾只包含一個index頁面

index頁面

index.wxml

代碼如下

<view class="container">
  <!-- 計時器  -->
  <view class="timer-row">
        <view class="timer-text timer-text-m">{{ timerM }}</view>
        <view class="timer-sp timer-text-sp">:</view>
        <view class="timer-text timer-text-s">{{ timerS }}</view>
        <view class="timer-sp timer-text-sp">:</view>
        <view class="timer-text timer-text-ms">{{ timerMs }}</view>
    </view>
   <!-- 滑塊  -->
   <view class="puzzle-container">
     <block wx:for="{{tiles}}" wx:key="*this">
       <view class="puzzle-tile" bind:tap="onclickEvent" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" data-index="{{index}}">
         {{item}}
       </view>
     </block>
   </view>
   <!-- 按鈕區(qū)  -->
   <view class="button-container">
          <button class="start-button" bindtap="toggleTimer">開始/停止</button>
          <button class="restart-button" bindtap="restartPuzzle">重置</button>
     </view>
</view>

index.js

Page({
  data: {
    successTiles: [1, 2, 3, 4, 5, 6, 7, 8, ''],
    tiles: [1, 2, 3, 4, 5, 6, 7, 8, ''],
    emptyIndex: 8,
    selector: {
      x: 0,
      y: 0,
      index: 0
    },
    isGameing: false,
    timer: '00:00:00',
    timerM: '00',
    timerS: '00',
    timerMs: '00',
    timerRunning: false,
    timerInterval: null
  },
  onLoad: function () {
  },
  touchStart: function (e) {
    // console.log("移動開始", e.currentTarget.dataset)
    if(!this.data.timerRunning){
      console.log("請點擊 開始按鈕")
      return
    }
    const touch = e.touches[0];
    let index = e.currentTarget.dataset.index;
    let xy = this.getXY(index, 3)
    // console.log(xy)
    this.setData({
      startX: touch.clientX,
      startY: touch.clientY,
      selector: xy
    });
  },
  touchMove: function (e) {
    // console.log("移動進行中", e)
    const touch = e.touches[0];
    this.setData({
      moveX: touch.clientX,
      moveY: touch.clientY,
    });
  },
  touchEnd: function (e) {
    // console.log("移動結(jié)束", e)
    const endX = this.data.moveX;
    const endY = this.data.moveY;
    const startX = this.data.startX;
    const startY = this.data.startY;
    const deltaX = endX - startX;
    const deltaY = endY - startY;
    // console.log("deltaX ", deltaX," deltaY ", deltaY)
    if (Math.abs(deltaX) > Math.abs(deltaY)) {
      // 水平滑動
      if (deltaX > 30) {
        // 向右滑動
        // console.log("→")
        this.slideTiles('right');
      } else if (deltaX < -30) {
        // 向左滑動
        // console.log("←")
        this.slideTiles('left');
      }
    } else {
      // 垂直滑動
      if (deltaY > 30) {
        // 向下滑動
        // console.log("↓")
        this.slideTiles('down');
      } else if (deltaY < -30) {
        // 向上滑動
        // console.log("↑")
        this.slideTiles('up');
      }
    }
  },
  slideTiles: function (direction) {
    // 根據(jù)方向交換空白塊和相鄰塊
    // 這里需要添加實際的交換邏輯，確?？瞻讐K可以移動
    // 例如，你可以在這里交換兩個塊的位置，但要確?？瞻讐K可以移動
    // 以下是一個簡單的示例，實際邏輯會更復(fù)雜
    let newTiles = this.data.tiles.slice();
    let emptyIndex = this.data.emptyIndex;
    let selector = this.data.selector;
    emptyIndex = selector.index
    console.log(selector, direction)
    switch (direction) {
      case 'right':
        if (emptyIndex % 3 < 2) {
          // 判斷相鄰的要移動的是否為空白塊
          if (newTiles[emptyIndex + 1] != '') {
            console.log("不能移動", direction)
            return
          }
          [newTiles[emptyIndex], newTiles[emptyIndex + 1]] = [newTiles[emptyIndex + 1], newTiles[emptyIndex]];
          this.setData({
            tiles: newTiles,
            emptyIndex: emptyIndex + 1
          });
        }
        break;
      case 'left':
        if (emptyIndex % 3 > 0) {
          if (newTiles[emptyIndex - 1] != '') {
            console.log("不能移動", direction)
            return
          }
          [newTiles[emptyIndex], newTiles[emptyIndex - 1]] = [newTiles[emptyIndex - 1], newTiles[emptyIndex]];
          this.setData({
            tiles: newTiles,
            emptyIndex: emptyIndex - 1
          });
        }
        break;
      case 'up':
        if (emptyIndex >= 3) {
          if (newTiles[emptyIndex - 3] != '') {
            console.log("不能移動", direction)
            return
          }
          [newTiles[emptyIndex], newTiles[emptyIndex - 3]] = [newTiles[emptyIndex - 3], newTiles[emptyIndex]];
          this.setData({
            tiles: newTiles,
            emptyIndex: emptyIndex - 3
          });
        }
        break;
      case 'down':
        if (emptyIndex < 6) {
          if (newTiles[emptyIndex + 3] != '') {
            console.log("不能移動", direction)
            return
          }
          [newTiles[emptyIndex], newTiles[emptyIndex + 3]] = [newTiles[emptyIndex + 3], newTiles[emptyIndex]];
          this.setData({
            tiles: newTiles,
            emptyIndex: emptyIndex + 3
          });
        }
        break;
    }
    this.isSuccess()
  },
  isSuccess: function () {
    let ti = this.data.tiles
    let su = this.data.successTiles
    console.log(su == ti)
    let ti_str = ti.join(',')
    let su_str = su.join(',')
    // console.log(ti_str == su_str)
    // console.log("isSuccess", ti, ti_str, su_str)
    if (ti_str == su_str) {
      this.stopTimer();
      wx.showToast({
        title: '操作成功',
        icon: 'success',
        duration: 2000
      });
    }
  },
  shuffleArray: function (array) {
    for (let i = array.length - 1; i > 0; i--) {
      // 生成一個隨機索引從 0 到 i
      const j = Math.floor(Math.random() * (i + 1));
      // 交換元素
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  },
  onclickEvent: function (e) {
    if(!this.data.isGameing){
      console.log("請點擊 開始按鈕")
      return
    }
    let index = e.currentTarget.dataset.index;
    let newTiles = this.data.tiles.slice();
    let tiles = this.data.tiles
    let currentTile = tiles[index]
    if (currentTile == "") {
      // console.log("不能移動")
      return
    }
    let upIndex, downIndex, leftIndex, rightIndex = null;
    // 查詢 上下左右的索引
    let xy = this.getXY(index, 3)
    let selector = this.data.selector;
    let emptyIndex = selector.index
    // 可以向右移動
    if (emptyIndex % 3 < 2) {
      if (newTiles[emptyIndex + 1] == '') {
        [newTiles[emptyIndex], newTiles[emptyIndex + 1]] = [newTiles[emptyIndex + 1], newTiles[emptyIndex]];
        this.setData({
          tiles: newTiles,
          emptyIndex: emptyIndex + 1
        });
      }
    }
    // 可以向左運動
    if (emptyIndex % 3 > 0) {
      if (newTiles[emptyIndex - 1] == '') {
        [newTiles[emptyIndex], newTiles[emptyIndex - 1]] = [newTiles[emptyIndex - 1], newTiles[emptyIndex]];
        this.setData({
          tiles: newTiles,
          emptyIndex: emptyIndex - 1
        });
      }
    }
    // 可以向上運動
    if (emptyIndex >= 3) {
      if (newTiles[emptyIndex - 3] == '') {
        [newTiles[emptyIndex], newTiles[emptyIndex - 3]] = [newTiles[emptyIndex - 3], newTiles[emptyIndex]];
        this.setData({
          tiles: newTiles,
          emptyIndex: emptyIndex - 3
        });
      }
    }
    // 向下運動
    if (emptyIndex < 6) {
      if (newTiles[emptyIndex + 3] == '') {
        [newTiles[emptyIndex], newTiles[emptyIndex + 3]] = [newTiles[emptyIndex + 3], newTiles[emptyIndex]];
        this.setData({
          tiles: newTiles,
          emptyIndex: emptyIndex + 3
        });
      }
    }
    console.log("點擊事件", xy, )
  },
  getXY: function (index, num) {
    let x = Math.floor(index / num) + 1
    let y = index % num + 1
    return {
      x,
      y,
      index
    }
  },
  startTimer: function () {
    if (!this.data.timerRunning) {
      let tiles = this.data.tiles
      let isGameing = this.data.isGameing
      if (!this.data.isGameing) {
        // 游戲未開始 ，打亂順序
        tiles = this.shuffleArray(tiles)
        isGameing = true
      }
      this.setData({
        tiles: tiles,
        timerRunning: true,
        isGameing: isGameing
      });
      this.data.timerInterval = setInterval(() => {
        let timers = this.data.timer.split(":")
        let m = Number(timers[0])
        let s = Number(timers[1])
        let ms = Number(timers[2])
        if (ms < 99) {
          ms += 1
        } else {
          ms = 0
          if (s < 59) {
            s = s + 1
          } else {
            s = 0
            m += 1
          }
        }
        let timestr = `${this.formatNumber(m,2)}:${this.formatNumber(s,2)}:${this.formatNumber(ms,2)}`
        console.log("--------", timers, timestr)
        this.setData({
          timer: timestr,
          timerM:this.formatNumber(m,2),
          timerS:this.formatNumber(s,2),
          timerMs:this.formatNumber(ms,2)
        });
      }, 10);
    }
  },
  stopTimer: function () {
    if (this.data.timerRunning) {
      this.setData({
        timerRunning: false
      });
      clearInterval(this.data.timerInterval);
    }
  },
  toggleTimer: function () {
    if (this.data.timerRunning) {
      this.stopTimer();
    } else {
      this.startTimer();
    }
  },
  restartPuzzle:function(){
    // let tiles = this.data.tiles
    // tiles = this.shuffleArray(tiles)
    this.stopTimer()
    this.setData({
      successTiles: [1, 2, 3, 4, 5, 6, 7, 8, ''],
      tiles: [1, 2, 3, 4, 5, 6, 7, 8, ''],
      emptyIndex: 8,
      selector: {
        x: 0,
        y: 0,
        index: 0
      },
      isGameing: false,
      timer: '00:00:00',
      timerM: '00',
      timerS: '00',
      timerMs: '00',
      timerRunning: false,
      timerInterval: null
    })
// this.startTimer()
  },
  formatNumber: function (num, length) {
    return num.toString().padStart(length, '0');
  },
});

index.wxss

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fffaf0;
  font-family: 'Comic Sans MS', cursive, sans-serif;
}
.timer-row {
  display: flex;
  align-items: center;
  margin-bottom: 100px;
  animation: blink 2s infinite;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #ffb6c1;
  border-radius: 15px;
  padding: 15px;
}
.timer-text {
  width: 90px;
  height: 100px;
  background-color: #ffcccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 64px; /* 增大字體大小 */
  font-weight: bold; /* 加粗字體 */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
  /* border-radius: 5px; */
  color: #ffffff; /* 粉色調(diào)字體 */
}
.timer-sp {
  width: 10px;
  height: 100px;
  background-color: #ffcccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 64px; /* 增大字體大小 */
  font-weight: bold; /* 加粗字體 */
  position: relative;
  color: #ffffff; /* 粉色調(diào)字體 */
}
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}
/*  */
.button-container {
  display: flex;
  justify-content: space-between; /* 使按鈕分布在容器的兩端 */
  width: 100%; /* 容器寬度為100% */
  margin-top: 50px; /* 與拼圖塊之間添加一些間距 */
}
.start-button {
  background-color: hsl(0, 100%, 90%);
  color: #cf77a3;
  width: 110px;
  border: 1px solid #ffb6c1;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bolder;
  cursor: pointer;
}
.restart-button {
  background-color: #ffcccc;
  color: #cf77a3;
  border: 1px solid #ffb6c1;
  padding: 5px 10px;
  width: 110px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}
/* 滑塊樣式 */
.puzzle-container {
  margin-top: -50px;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-gap: 10px;
  perspective: 1000px;
}
.puzzle-tile {
  width: 100px;
  height: 100px;
  background-color: #ffcccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid #ffb6c1;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  color: #ff69b4;
}
.puzzle-tile {
  width: 100px;
  height: 100px;
  background-color: #ffcccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 64px; /* 增大字體大小 */
  font-weight: bold; /* 加粗字體 */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid #ffb6c1;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  color: #ffffff; /* 粉色調(diào)字體 */
}
/* 當(dāng)拼圖塊被點擊時，添加一些動畫效果 */
.puzzle-tile:active {
  transform: scale(0.5);
}

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)的數(shù)字滑塊拼圖的文章就介紹到這了,更多相關(guān)微信小程序數(shù)字滑塊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: