Мини-программа WeChat: Пазлы

внешний интерфейс Апплет WeChat игра
Мини-программа WeChat: Пазлы

Исходный код: https://github.com/lcp1551/lcpisfat

игровой интерфейс

Инициализируйте игру:


Успех игры:


Идеи и функции:

1. Инициализируйте, сохраните числа от 1 до 8 в массиве, объединив 9 (пустое) после случайного нарушения и измените стиль пустого

2. Нажмите на число, чтобы определить направление пустого пространства относительно его местоположения, и соответственно перемещайтесь вверх, вниз, влево и вправо.

3. Двигайтесь вверх, вниз, влево и вправо и меняйте местами два перемещенных числа в массиве.

4. Определить, являются ли элементы в массиве [1,2,3,4,5,6,7,8,9], если да, то игра успешна,

5. Тайминг, использование таймера, окончание, обнуление таймера


Код:

Данные используемые в проекте:

data: {    
    num: ['★', '★', '★', '★', '★', '★', '★', '★', '★'],   //初始化前    
    hidden: true,   //隐藏空白格中的数字    
    time:0,           //秒数    
    t:''                  //定时器  
},

Создайте страницу: index.wxml

<view class="container">
  <view class="row" wx:for="{{num}}" wx:for-item="item" wx:for-index="index">
    <button class="btn {{item == 9?'active':''}}" catchtap='onMoveTap'  data-item="{{item}}" data-index="{{index}}">{{item}}</button>
  </view>
</view>

Два фрагмента данных должны быть переданы в прошлом, один из которых является индексом нижнего индекса блока, на который нажали, и номером элемента в блоке.

Добавить стиль активных динамических пустых ячеек [9]

{{item == 9?'active':''}}

Инициализация игры:

init:function(){
    this.setData({
      num:this.sortArr([1,2,3,4,5,6,7,8]).concat([9])
    })
  },

При инициализации здесь используется sortArr(arr) для скремблирования массива и объединения пробела [9], так что пробел всегда находится в последней позиции при инициализации.

Перемешайте массив случайным образом:

sortArr: function (arr) {
    return arr.sort(function () {
      return Math.random() - 0.5
    })
  }

Здесь используется простейший метод скремблирования, недостатком которого является то, что скремблирование неполное.

Добавьте событие клика onMoveTap к каждому блоку:

onMoveTap: function (e) {
    var index = e.currentTarget.dataset.index;
    var item = e.currentTarget.dataset.item;
    if (this.data.num[index + 3] == 9) {
      this.down(e);
    }    
    if (this.data.num[index - 3] == 9) {
      this.up(e);    
    }    
    if (this.data.num[index + 1] == 9 && index != 2 && index != 5) {      
      this.right(e); 
    }
    if (this.data.num[index - 1] == 9 && index != 3 & index != 6) { 
      this.left(e);
    }  }

Если нижний индекс пустой ячейки на 3 больше, чем таблица ниже щелкнутого блока, это означает, что пустая ячейка находится ниже щелкнутого блока, а затем переместится вниз после щелчка;

Если нижний индекс пустой ячейки на 3 меньше, чем таблица ниже выбранного блока, это означает, что пустая ячейка находится над выбранным блоком, а затем перемещается вверх после щелчка;

Если нижний индекс пустой ячейки на 1 больше, чем таблица ниже кликнутого блока, это означает, что пустая ячейка находится справа от кликнутого блока, затем перемещается вправо после клика, и необходимо учитывать, щелчок находится на правом краю контейнера;

Если нижний индекс пустой ячейки меньше, чем таблица ниже кликнутого блока на 1, это означает, что пустая ячейка находится слева от кликнутого блока, а затем перемещается влево после клика, и необходимо учитывать, щелчок находится на левом краю контейнера;

переехать:

Берите пример с подъема

 up: function (e) {
    var index = e.currentTarget.dataset.index; //当前数字下标
    var temp = this.data.num[index];
    this.data.num[index] = this.data.num[index - 3]
    this.data.num[index - 3] = temp;
    this.setData({
      num: this.data.num
    })    
    if (this.data.num.toString() == [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) {
      this.success();
    }
  }

После перемещения поменяйте местами щелкнутый блок с пустым пространством в массиве и оцените, соответствует ли текущий массив условиям успеха игры, и оцените, равны ли массивы Здесь я конвертирую массив в строку для сравнения.

Успех игры:

success: function () {
    var that = this;
    wx.showToast({
      title: '闯关成功',
      icon: 'success',
      success: function () {
        that.init();
      }
    })
  }

Игра прошла успешно, всплывает интерактивное окно обратной связи, массив инициализируется и перетасовывается

Таймер:

 timeCount:function(){
    var that = this;
    var timer = that.data.time;
    that.setData({
      t:setInterval(function(){
        timer++;
        that.setData({ 
         time:timer
       })
      },1000)
    })
  }

Начать финальную игру:

 timeBegin:function(){
    clearInterval(this.data.t);
    this.setData({
      time:0
    })
    this.timeCount();
    this.init();
  },
  timeStop:function(){
    clearInterval(this.data.t);
    if (this.data.num.toString() != [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) {
      this.fail();
    }
  }

Привяжите событие timeBegin к кнопке запуска, чтобы инициализировать игру.

Привяжите событие timeStop к кнопке завершения, чтобы определить, успешна ли игра.


Попробуйте:


Исходный код:GitHub.com/Li Chengpeng1551/Ли Ченгпен…


Быть разработанным:

Выберите сложность

автобиографические картины


Категории