最近自己写了一个俄罗斯方块的小程序，基本处理完了所有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 })