五颜六色拼一拼是一款益智类小游戏。把不同的卡片进行方向调整叠加组成一个新的图案，这个新的图案与目标图案一样，则挑战成功。
整体设计
游戏分四大关，按照 简单、一般、中级、复杂 分级。每一大关分6小关。
具体玩法说明：
- 选择您需要的卡片，按正确的顺序，拖动至左侧蓝色框里，一层一层堆叠起来。
- 您需要考虑砖块的形状、颜色和顺序，以及怎么用最少的卡片叠放出右侧粉色框里要展示的图案。
- 卡片移动至蓝色框里，双击可以旋转卡片。
- 在一些挑战中你需要使用白色的卡片来完成您的组成。
- 同颜色不同形状的两个卡片可以结合创建出各式各样的新图像。
- 当你的组合完全符合挑战时，你就完成了挑战！
本游戏使用小程序开发完成。最终实现结果为：
WechatIMG26.png
功能设计
具体功能设计如下：
- 排列卡片区域
- 结果图片放置区域
- 组合卡片区域
- 关卡设置
- 分享朋友圈
- 提示功能
详细设计实现说明
从这里开始我们对这个小游戏进行具体的细节设计实现说明。
- 排列卡片区域的实现
首先我们把图片地址存放在一个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>
-
结果图片放置区域 和 关卡设置
每完成一小关，我们进入下一关，并把目标图片放置在结果图片区域。首先我们要配置每一关相关的data参数以便进行到当前关进行初始化数据，主要包括关卡配置、目标图片配置、组合图片结果数组等。最终我们放置在左边的图片组合与组合图片结果数组一致，说明组合成功，这一小关通过。
通过在data.js里的expected配置。grade表示第几大关，number表示第几小关，com_srces里表示目标结果匹配，有多种结果，每一种由哪几个card组成，每个card由card_index和card_degree组成。 -
组合卡片区域
把下面的卡片进行拖拽到组合卡片区域，给它放大、旋转调整，加上叠加的效果，可以显示出和右边目标图片一样的展示。那图片如何拖拽，怎么放入框内，如何放大，如何旋转，如何保存我们的组合结果，就是我们要关心的问题。
首先，图片如何拖拽？我们采用小程序的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，提示“恭喜你，通关了！”。
- 提示功能
当用户多次尝试仍未通过时，我们给出了提示功能，提升用户的体验。在这里我们只需要循环配置好的结果目标答案卡片的第一种就可以。即
wx:for="{{expected[mission].com_srces[0]}}" 。mission表示当前处于哪个题目上。 - 分享朋友圈
我们使用onShareAppMessage实现分享朋友圈功能。见index.js
以上就是这个小游戏的说明。
网友评论