微信小程序翻牌游戲如何做,微信小程序翻牌游戲?qū)崿F(xiàn)效果

背景

ps：本次開發(fā)基于wepy框架
由于最近接到一個(gè)需求--抽獎(jiǎng)活動(dòng)；
翻牌打亂活動(dòng)抽獎(jiǎng)活動(dòng)，大概需求是這樣的，九宮格卡牌，先正面展示所有獎(jiǎng)品，然后卡牌翻轉(zhuǎn)，打亂排序，點(diǎn)擊卡牌，然后抽獎(jiǎng)。

這個(gè)需求本身其實(shí)不難，主要是分為三步；

1. 展示所有卡牌，然后翻轉(zhuǎn)。
2. 打亂所有卡牌
3. 點(diǎn)擊其中一張卡牌，抽獎(jiǎng)

第一步：卡牌翻轉(zhuǎn)

我們先在dom中渲染9個(gè)卡牌。

1. {{cardItem.front}}
2. {{cardItem.back}}

script

1. allMove () {
2. // 110 是卡牌寬度加邊距
3. this.methods.shuffle.call(this, 110)
4. let timer = setTimeout(() => {
5. clearTimeout(timer)
6. this.methods.shuffle.call(this, 0)
7. this.$apply()
8. }, 1000)
9. },
10. // 洗牌
11. shuffle (translateUnit) {
12. let curCardData = this.cardData
13. curCardData.map((item, index) => {
14. let animation = wepy.createAnimation({
15. duration: 500,
16. timingFunction: 'ease'
17. })
18. animation.export()
19. switch (index) {
20. case 0:
21. animation.translate(translateUnit, translateUnit).step()
22. break
23. case 1:
24. animation.translate(0, translateUnit).step()
25. break
26. case 2:
27. animation.translate(-translateUnit, translateUnit).step()
28. break
29. case 3:
30. animation.translate(translateUnit, 0).step()
31. break
32. case 4:
33. animation.translate(0, 0).step()
34. break
35. case 5:
36. animation.translate(-translateUnit, 0).step()
37. break
38. case 6:
39. animation.translate(translateUnit, -translateUnit).step()
40. break
41. case 7:
42. animation.translate(0, -translateUnit).step()
43. break
44. case 8:
45. animation.translate(-translateUnit, -translateUnit).step()
46. break
47. }
48. item.animationData = animation.export()
49. })
50. this.cardData = curCardData
51. this.$apply()
52. },

算法后面需要優(yōu)化，我們先完成功能效果，

第三步：卡牌翻轉(zhuǎn)

dom代碼

1. {{cardItem.front}}
2. {{cardItem.back}}

script代碼

1. data中定義一個(gè)curIndex = -1的對(duì)象
2. data = {
3. curOpen: -1,
4. }
5. methods = {
6. // 抽獎(jiǎng)
7. itemChage (item, curIndex) {
8. this.cardData[curIndex].front = 'iphone x'
9. console.log(item, curIndex)
10. this.curOpen = curIndex
11. }
12. }

less

1. .card.getprize{
2. .front{
3. z-index:2;
4. transform: rotateY(0deg);
5. }
6. .back{
7. z-index:1;
8. transform: rotateY(180deg);
9. }
10. }

現(xiàn)在我們就已經(jīng)完成了基本的需求；但是在位移動(dòng)畫時(shí)候代碼寫的太丑陋了。
我們來想想怎么優(yōu)化算法；
我們現(xiàn)在就九宮格布局，我們可以看成是二維布局

那我們是不是可以在卡牌中也使用二維數(shù)組布局屬性

1. resetData () {
2. const total = 9 // 總數(shù)
3. const lineTotal = 3 // 單行數(shù)
4. curCardData.map((item, index) => {
5. let curCardData = this.cardData
6. let x = index % lineTotal
7. let y = parseInt(index / lineTotal)
8. item.twoArry = {x, y}
9. })
10. }

在位移動(dòng)畫中使用二維布局的差值進(jìn)行位移

1. // 洗牌
2. shuffle (translateUnit) {
3. let curCardData = this.cardData
4. curCardData.map((item, index) => {
5. let animation = wepy.createAnimation({
6. duration: 500,
7. timingFunction: 'ease'
8. })
9. animation.export()
10. const translateUnitX = translateUnit * (1 - item.twoArry.x)
11. const translateUnitY = translateUnit * (1 - item.twoArry.y)
12. animation.translate(translateUnitX, translateUnitY).step()
13. item.animationData = animation.export()
14. })
15. this.cardData = curCardData
16. this.$apply()
17. },

這樣整個(gè)動(dòng)畫就算完成了，