微信小程序实现的数字滑块拼图

微信小程序实现的数字滑块拼图

【注】本文章只是记录下实现的过程，个人喜好，无技术指导倾向，感兴趣的小伙伴可以继续往下看下实现过程，

总体实现效果如下图，第一个界面是拼图初始界面，第二个是拼图过程界面

游戏玩法介绍：

滑块拼图（Slider Puzzle）是一种经典的智力游戏，通常由一个3x3或更大的格子组成，其中一个格子为空，玩家通过滑动拼图块来达到特定的图案或顺序。

按钮介绍

“开始/暂停” 按钮

初次进入页面，需要点击开始按钮，才能进行游戏，第一次点击后，屏幕上面的计时器会开始计时，再次点击暂停按钮，计时停止，游戏界面锁定

“重置”按钮

将正在进行中的游戏进行还原初始化，重新开始

代码实现

代码整体目录结构如下：

├── 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

该文件仅仅是定义了一个导航条名称为 滑块拼图

{
   
  "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>
   <!-- 按钮区  -->
   <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,