自己动手开发小程序版俄罗斯方块

最近自己写了一个俄罗斯方块的小程序,基本处理完了所有BUG,尽量做到了代码简洁、功能完善,目前感觉唯一不太完美的地方是下键的短按和长按效果,完整源码如下:

WXML(使用了weui组件库的图标)

复制代码
 1 <view class='container'>
 2   <view class="flex output">
 3     <view>分数:{{score}}</view>
 4     <view>等级:{{speed}}</view>
 5     <view>最高分:{{maxScore}}</view>
 6   </view>
 7   <view class='map'>
 8     <view wx:for="{{newMap}}" wx:for-item="rows" class='flex'>
 9       <view wx:for="{{rows}}" class='block block{{item}}'></view>
10     </view>
11   </view>
12   <view class="flex control">
13     <view>
14       <view class="flex button">
15         <mp-icon type="field" icon="back2" color="#FF0000" size="{{80}}" data-dir="left" bindlongpress="longPress" bindtap="horTap" bindtouchend="touchEnd" />
16         <mp-icon extClass="icon-right" type="field" icon="back2" color="#FF0000" size="{{80}}" data-dir="right" bindlongpress="longPress" bindtap="horTap" bindtouchend="touchEnd" />
17       </view>
18       <view class="center">
19         <mp-icon extClass="icon-down" type="field" icon="back2" color="#FF0000" size="{{80}}" data-dir="down" bindlongpress="longPress" bindtap="downTap" bindtouchend="touchEnd" />
20       </view>
21     </view>
22     <view>
23       <view class="center">
24         <mp-icon type="field" icon="{{icon}}" color="#FF0000" size="{{60}}" bindtap="play" />
25       </view>
26       <view>
27         <view wx:for="{{newNextMap}}" wx:for-item="rows" class='flex'>
28           <view wx:for="{{rows}}" class='block-next block{{item}}'></view>
29         </view>
30       </view>
31     </view>
32     <view>
33       <mp-icon type="field" icon="refresh" color="#FF0000" size="{{100}}" bindtap="rotateBlock" />
34     </view>
35   </view>

WXSS

复制代码
 1 .map {
 2   margin-top: 30rpx;
 3 }
 4 .flex {
 5   display: flex;
 6 }
 7 .output {
 8   width: 90%;
 9   justify-content: space-between;
10 }
11 .block {
12   width: 50rpx;
13   height: 50rpx;
14   border: 1px solid #eee;
15   background: #000;
16 }
17 .block1 {
18   background: green;
19 }
20 .control {
21   margin-top: 20rpx;
22   justify-content: space-between;
23   align-items: center;
24 }
25 .center {
26   text-align: center;
27 }
28 .button {
29   justify-content: space-between
30 }
31 .icon-right {
32   transform: rotate(180deg);
33 }
34 .icon-down {
35   transform: rotate(-90deg);
36 }
37 .block-next {
38   width: 30rpx;
39   height: 30rpx;
40   border: 1px solid #eee;
41 }

JS

复制代码
  1 Page({
  2   data: {
  3     //地图大小
  4     mapSize: [18, 10],
  5     //地图
  6     map: [],
  7     newMap: [],
  8     nextMap: [],
  9     newNextMap: [],
 10     //方块
 11     block: [],
 12     nextBlock: [],
 13     //游戏状态
 14     icon: '',
 15     status: '',
 16     timer: null,
 17     quickTimer: null,
 18     speed: 1,
 19     score: 0,
 20     maxScore: 0,
 21     //方块位置
 22     blockPos: [0, 0],
 23     //七种方块
 24     blocks: [
 25       [[1, 0], [1, 1], [1, 2], [2, 1]],
 26       [[1, 1], [2, 1], [3, 1], [3, 2]],
 27       [[1, 2], [2, 2], [3, 1], [3, 2]],
 28       [[1, 0], [1, 1], [2, 1], [2, 2]],
 29       [[1, 1], [1, 2], [2, 0], [2, 1]],
 30       [[1, 1], [1, 2], [2, 1], [2, 2]],
 31       [[0, 1], [1, 1], [2, 1], [3, 1]]
 32     ]
 33   },
 34   onLoad(options) {
 35     let maxScore = 0
 36     if (wx.getStorageSync("tetrisScore")) {
 37       maxScore = wx.getStorageSync("tetrisScore")
 38     }
 39     //初始化地图
 40     let map = this.initMap(this.data.mapSize)
 41     let nextMap = this.initMap([4, 4])
 42     //随机一个方块
 43     let nextBlock = this.data.blocks[Math.floor(Math.random() * 7)]
 44     this.setData({
 45       map: map,
 46       newMap: map,
 47       nextMap: nextMap,
 48       newNextMap: nextMap,
 49       nextBlock: nextBlock,
 50       icon: 'play',
 51       status: 'stop',
 52       score: 0,
 53       speed: 1,
 54       maxScore: maxScore
 55     })
 56   },
 57   //初始化地图
 58   initMap: function (size) {
 59     let map = []
 60     for (let i = 0; i < size[0]; i++) {
 61       let rows = []
 62       for (let j = 0; j < size[1]; j++) {
 63         rows.push(0)
 64       }
 65       map.push(rows)
 66     }
 67     return map
 68   },
 69   //初始化方块
 70   initBlock: function () {
 71     //随机方向
 72     let block = this.rotateFun(this.data.nextBlock, Math.floor(Math.random() * 4))
 73     //移到中间
 74     this.moveFun(block, [-3, 3], 0)
 75     //生成下一个方块
 76     let nextBlock = this.data.blocks[Math.floor(Math.random() * 7)]
 77     //更新小图
 78     let newNextMap = JSON.parse(JSON.stringify(this.data.nextMap))
 79     for (let item of nextBlock) {
 80       newNextMap[item[0]][item[1]] = 1
 81     }
 82     this.setData({
 83       block: block,
 84       nextBlock: nextBlock,
 85       newNextMap: newNextMap
 86     })
 87   },
 88   play: function () {
 89     let icon, status = this.data.status
 90     if (status == 'play') {
 91       icon = 'play'
 92       status = 'pause'
 93       clearInterval(this.data.timer)
 94     } else {
 95       if (status == 'stop') {
 96         this.initBlock()
 97       }
 98       this.fallFun()
 99       icon = 'pause'
100       status = 'play'
101     }
102     this.setData({
103       icon: icon,
104       status: status
105     })
106   },
107   //下落方法
108   fallFun: function () {
109     let that = this
110     this.data.timer = setInterval(function () {
111       that.moveFun(that.data.block, that.posFun(that.data.blockPos, 'down'), 1)
112     }, (21 - that.data.speed) * 50)
113   },
114   //左、右短按
115   horTap: function (e) {
116     if (this.data.status == 'play') {
117       this.moveFun(this.data.block, this.posFun(this.data.blockPos, e.currentTarget.dataset.dir))
118     }
119   },
120   //下短按
121   downTap: function () {
122     if (this.data.status == 'play') {
123       let that = this
124       let i = 0
125       let timer = setInterval(function () {
126         that.moveFun(that.data.block, that.posFun(that.data.blockPos, 'down'))
127         i++
128         if (i >= 5) clearInterval(timer)
129       }, 10)
130     }
131   },
132   //长按
133   longPress: function (e) {
134     if (this.data.status == 'play') {
135       let that = this
136       this.data.quickTimer = setInterval(function () {
137         that.moveFun(that.data.block, that.posFun(that.data.blockPos, e.currentTarget.dataset.dir))
138       }, 10)
139     }
140   },
141   //按键手指移开
142   touchEnd: function (e) {
143     clearInterval(this.data.quickTimer)
144   },
145   //计算移动后坐标
146   posFun: function (pos, dir) {
147     let newPos = []
148     switch (dir) {
149       case 'left':
150         newPos = [pos[0], pos[1] - 1]
151         break;
152       case 'right':
153         newPos = [pos[0], pos[1] + 1]
154         break;
155       case 'down':
156         newPos = [pos[0] + 1, pos[1]]
157         break;
158     }
159     return newPos
160   },
161   //移动方法,type:0初始移到中间,1正常下落
162   moveFun: function (block, pos, type) {
163     let m = pos[0], n = pos[1]
164     let mapSize = this.data.mapSize
165     let maxX = m, reLoop = true
166     let map = JSON.parse(JSON.stringify(this.data.map))
167     for (let index = 0; index < block.length; index++) {
168       let i = block[index][0] + m, j = block[index][1] + n
169       //超出边界,或已有方块,取消移动
170       if (i >= mapSize[0] || j < 0 || j >= mapSize[1] || (i >= 0 && map[i][j] == 1) == 1) {
171         if (type == 1) {
172           clearInterval(this.data.timer)
173           //游戏结束
174           if (map[0][j] == 1) {
175             let scroe = this.data.score
176             wx.showModal({
177               title: '游戏结束',
178               content: '得分:' + scroe,
179               showCancel: false,
180             })
181             if (scroe > this.data.maxScore) wx.setStorageSync("tetrisScore", scroe)
182             this.onLoad()
183             return false
184           }
185           //消除
186           let newMap = this.data.newMap
187           loop: for (let a = mapSize[0] - 1; a >= 0; a--) {
188             for (let val of newMap[a]) {
189               if (val == 0) continue loop
190             }
191             newMap.splice(a, 1)
192           }
193           let len = mapSize[0] - newMap.length
194           for (let a = 0; a < len; a++) {
195             let row = []
196             for (let b = 0; b < mapSize[1]; b++) {
197               row.push(0)
198             }
199             newMap.unshift(row)
200           }
201           //初始化方块
202           let score = this.data.score
203           if (len > 0) score += (len * 100 - 50)
204           let speed = parseInt(score / 1000) + 1
205           if (speed > 20) speed = 20
206           this.setData({
207             map: newMap,
208             score: score,
209             speed: speed
210           })
211           this.initBlock()
212           this.fallFun()
213         }
214         return false
215       }
216       if (type == 0) {
217         if (reLoop) {
218           //计算方块最大横坐标
219           if (i > maxX) maxX = i
220           //开始下一次循环
221           if (index == block.length - 1) {
222             index = -1
223             reLoop = false
224           }
225           continue
226         }
227         if (maxX > m) i -= maxX
228       }
229       //移动到新位置
230       if (i >= 0) map[i][j] = 1
231     }
232     this.setData({
233       blockPos: [(maxX > m ? m - maxX : m), n],
234       newMap: map
235     })
236     return true
237   },
238   //按键转动
239   rotateBlock: function (e) {
240     if (this.data.status == 'play') {
241       let block = this.rotateFun(this.data.block, 1)
242       if (this.moveFun(block, this.data.blockPos)) {
243         this.setData({
244           block: block
245         })
246       }
247     }
248   },
249   //顺时针旋转方块
250   rotateFun: function (block, m) {
251     if (m > 0) {
252       let newBlock = []
253       for (let i in block) {
254         newBlock.push(this.rotateRe(block[i], m))
255       }
256       return newBlock
257     }
258     return block
259   },
260   rotateRe: function (arr, m) {
261     arr = [arr[1], 3 - arr[0]]
262     if (m == 1)
263       return arr
264     return this.rotateRe(arr, m - 1)
265   },
266   onUnload() {
267     clearInterval(this.data.timer)
268   }
269 })