微信小程序-俄罗斯方块源码

微信小程序-俄罗斯方块开发实现

• 技术栈 vue2.0+uniapp

程序使用uniapp开发，开发工具HBuilder X，直接关联微信小程序就行。具体设置参考开发文档https://uniapp.dcloud.net.cn/

• 单纯小程序，无需其他任何条件

纯vue页面，使用提供的源码即可直接运行。

• 程序代码部分

主要可以设置方块大小，速度，等具体逻辑要在methods里面实现

data() {
			return {
				randomIndex: 1,
				//地图大小
				mapSize: [18, 10],
				//下降时间:开始，结束，每升一级减少等待时间
				downSpeed: [1500, 200, 100],
				//分数：现在分数，多少分升一级, step
				score: [0, 100, 1],
				isPaused: false, // 新增暂停状态
				//地图
				map: [],
				//7种方块，及其朝向
				blocks: [
					[
						[
							[0, 1, 1],
							[1, 1, 0]
						],
						[
							[1, 0],
							[1, 1],
							[0, 1]
						]
					],
					[
						[
							[1, 1, 0],
							[0, 1, 1]
						],
						[
							[0, 1],
							[1, 1],
							[1, 0]
						]
					],
					[
						[
							[1, 1, 1, 1]
						],
						[
							[1],
							[1],
							[1],
							[1]
						]
					],
					[
						[
							[1, 1],
							[1, 1]
						]
					],
					[
						[
							[0, 1, 0],
							[1, 1, 1]
						],
						[
							[0, 1],
							[1, 1],
							[0, 1]
						],
						[
							[1, 1, 1],
							[0, 1, 0]
						],
						[
							[1, 0],
							[1, 1],
							[1, 0]
						]
					],
					[
						[
							[0, 0, 1],
							[1, 1, 1]
						],
						[
							[1, 1],
							[0, 1],
							[0, 1]
						],
						[
							[1, 1, 1],
							[1, 0, 0]
						],
						[
							[1, 0],
							[1, 0],
							[1, 1]
						]
					],
					[
						[
							[1, 0, 0],
							[1, 1, 1]
						],
						[
							[0, 1],
							[0, 1],
							[1, 1]
						],
						[
							[1, 1, 1],
							[0, 0, 1]
						],
						[
							[1, 1],
							[1, 0],
							[1, 0]
						]
					],
				],
				//方块开始位置
				startPosition: [0, 4],
				//方块现在位置
				blockPosition: [0, 0],
				//当前方块限制：方块种类，方块朝向
				nowBlock: [0, 0],
				//下一个方块限制: 方块种类，方块朝向
				nextBlock: [0, 0],
				//游戏窗口高度:
				gameViewHeight: 450,
				//游戏结束
				gameOver: false,
				//游戏循环体
				gameUpdateFunc: null,
			}
		},
		mounted() {
			this.refreshNextBlock()
			this.refreshNextBlock()
		},
		 onUnload() {
		    document.removeEventListener('keydown', this.keydownHandler);
		  },
		onLoad() {
			this.initGame()
			var that = this

			document.addEventListener('keydown', function(e) {

				// console.log("----->当前按键keyCode:" + e.keyCode);

				switch (e.keyCode) {
					case 37:
						that.moveLeft();
						break;
					case 38:
						that.rotateBlock();
						break;
					case 39:
						that.moveRight();
						break;
					case 40:
						that.moveDown();
						break;
					case 32: // 空格键
						that.togglePause();
						break;
				}

			})

		},

• 程序运行截图

程序提供下面按钮操作，也支持键盘操作，具体功能对应代码

		<view class="foot">
			<view class="act-button" @click="moveLeft">左</view>
			<view class="act-button" @click="moveRight">右</view>
			<view class="act-button" @click="moveDown">下</view>
			<view class="act-button" @click="rotateBlock">变</view>
			<view class="act-button" @click="togglePause">{{isPaused ? '继' : '暂'}}</view>
		</view>

游戏提供暂停、继续功能。

具体源码可关注公众号点击下方菜单免费获取


关注后点击【源码】即可获取