[小程序][五颜六色拼一拼]

五颜六色拼一拼是一款益智类小游戏。把不同的卡片进行方向调整叠加组成一个新的图案，这个新的图案与目标图案一样，则挑战成功。

整体设计

游戏分四大关，按照 简单、一般、中级、复杂 分级。每一大关分6小关。

具体玩法说明：

1. 选择您需要的卡片，按正确的顺序，拖动至左侧蓝色框里，一层一层堆叠起来。
2. 您需要考虑砖块的形状、颜色和顺序，以及怎么用最少的卡片叠放出右侧粉色框里要展示的图案。
3. 卡片移动至蓝色框里，双击可以旋转卡片。
4. 在一些挑战中你需要使用白色的卡片来完成您的组成。
5. 同颜色不同形状的两个卡片可以结合创建出各式各样的新图像。
6. 当你的组合完全符合挑战时，你就完成了挑战！

本游戏使用小程序开发完成。最终实现结果为：

WechatIMG26.png

功能设计

具体功能设计如下：

1. 排列卡片区域
2. 结果图片放置区域
3. 组合卡片区域
4. 关卡设置
5. 分享朋友圈
6. 提示功能

详细设计实现说明

从这里开始我们对这个小游戏进行具体的细节设计实现说明。

1. 排列卡片区域的实现
   首先我们把图片地址存放在一个data里，然后用module.exports给他抛出。然后在页面中require出data，保存在当前页面的card_list里。然后使用wx:for给他循环展示在页面中。具体代码实现：

//data.js
const card = () => {
    let data = [
        'https://img.haomeiwen.com/i2586412/7544f1558e14a83a.png',
        ...
    ]
    return data
}
module.exports = {
    card: card
  }
//index.js
var datas = require('../datas/data.js')
Page({
  data: {
    card_list : []
  },})
//index.wxml
    <block wx:for="{{card_list}}" wx:key="">
      <movable-view class="{{item.class}} box_card_{{index}}" >
        <image class="card" 
          src="{{item.src}}"></image>
      </movable-view>
    </block> 

2. 结果图片放置区域 和 关卡设置
   每完成一小关，我们进入下一关，并把目标图片放置在结果图片区域。首先我们要配置每一关相关的data参数以便进行到当前关进行初始化数据，主要包括关卡配置、目标图片配置、组合图片结果数组等。最终我们放置在左边的图片组合与组合图片结果数组一致，说明组合成功，这一小关通过。
   通过在data.js里的expected配置。grade表示第几大关，number表示第几小关，com_srces里表示目标结果匹配，有多种结果，每一种由哪几个card组成，每个card由card_index和card_degree组成。

3. 组合卡片区域
   把下面的卡片进行拖拽到组合卡片区域，给它放大、旋转调整，加上叠加的效果，可以显示出和右边目标图片一样的展示。那图片如何拖拽，怎么放入框内，如何放大，如何旋转，如何保存我们的组合结果，就是我们要关心的问题。
   首先，图片如何拖拽？我们采用小程序的movable-area给出一个可拖拽区域和movable-view给出可被拖拽卡片，然后给卡片上监听catchtouchstart、catchtouchend事件，在执行对应函数时获取到相关数据并做相关的业务处理，具体代码如下：

//index.wxml
data-index="{{index}}"
catchtouchstart='moveImgTouchstart'
catchtouchend='moveImgTouchend'
//index.js
moveImgTouchend(e){
    // console.log('---end---', e)
  ...
  },

然后我们在moveImgTouchend里，
1、通过e.currentTarget.dataset.index获取到是正在操作的是哪张图片；
2、通过e.changedTouches[0].pageY和e.changedTouches[0].pageX获取到被拖拽图片的位置，并在它们小于300的时候，设其x，y为1，即图片被放置在框中；大于300时，设其x，y为原来的值originalx，originaly，即图片被放回原处。
3、通过data.card_list[card.idx].w和data.card_list[1+2*data.inside].h设置图片的大小，放在框内时为100，移出框时为50。
4、通过e.timeStamp - this.touchStartTime来判断是否是双击，如果小于300表示为一个双击事件，图片旋转90度。与第3个一起，在wxml中通过style="width:{{item.w}}px;height:{{item.h}}px;transform:rotate({{item.degree}}deg);"改变展示效果。
5、通过与目标结果卡片expected.com_srces匹配比较，看是否匹配成功。成功返回good为true，提示“恭喜你，通关了！”。

4. 提示功能
   当用户多次尝试仍未通过时，我们给出了提示功能，提升用户的体验。在这里我们只需要循环配置好的结果目标答案卡片的第一种就可以。即
   wx:for="{{expected[mission].com_srces[0]}}" 。mission表示当前处于哪个题目上。
5. 分享朋友圈
   我们使用onShareAppMessage实现分享朋友圈功能。见index.js

以上就是这个小游戏的说明。