• 微信小程序|从零动手实现俄罗斯方块

    📌个人主页：个人主页
    ​🧀 推荐专栏：小程序开发成神之路 --【这是一个为想要入门和进阶小程序开发专门开启的精品专栏！从个人到商业的全套开发教程，实打实的干货分享，确定不来看看？ 😻😻】
    📝作者简介：从web开发，再到大数据算法，踩过了无数的坑，用心总结经验教训，助你在技术生涯一臂之力！若想获取更多精彩内容，敬请订阅专栏或者关注😁😂🤣😃😆😉😊😋😍😘🥰
    ⭐️您的小小关注是我持续输出的动力！⭐️

    干货内容推荐

    🥇入门和进阶小程序开发，不可错误的精彩内容🥇 ：

    文章目录

    需求背景

    俄罗斯方块作为童年时期的经典怀旧游戏，该游戏我们更多的是在接机或者是pc端进行的体验，这次我们自己动手实现一次在web端，以及在移动端的俄罗斯方块，想要什么效果那我们自己造。😁😂🤣😃😄😅😆

    一、效果预览

    在这里插入图片描述

    二、技术关键点

    2.1 技术栈

    • 项目使用了Vue 2.0的语法规则，并非原生的微信小程序语法！
    • 兼容了uniapp框架的扩展能力！可以借助uniapp技术将vue的语法构建打包成微信小程序语法。

    2.2 技术难点

    • (1)方块的移动

    俄罗斯方块中最重要的模块莫非在于这个宫格棋盘。在宫格棋盘中要实现模块的运动和变化，其中关键点在于控制某个模块形状在棋盘中的现实状态。

    对于棋盘我们使用一个二维数组实现: block[][]
    特别对其下落的模块进行形状的预先定义，然后再根据用户操作进行选取：
    在这里插入图片描述

    • (2)键盘的控制
      要控制方块的下落和形状，我们得采用键盘对方块进行控制。

    这时我们需要采用监听键盘得事件：

    	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;
				}
			 
			})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    三、完整源码

    <template>
	<view class="content">
		<view class="title">
			<view>分数：{{score[0]}}view>
			<view class="blockMinMap">
				<view v-for="(line, i) in blocks[nextBlock[0]][nextBlock[1]]" :key="'minimap-line-'+i" class="line">
					<view v-for="(b, j) in line" :key="'minimap-line-'+i+'-block-'+j" :class="{'block':b=1}">view>
				view>
			view>
			<view>等级：{{parseInt(score[0]/score[1])}}view>
		view>
		<view class="gameView" :style="{height:gameViewHeight+'px'}">
			<view v-for="(line, i) in getTrueMap()" :key="'map-line-'+i" class="line">
				<view v-for="(b, j) in line" :key="'map-line-'+i+'-block-'+j" :class="{'block':b>0}"
				 :style="{width:getGameViewBlockSize()+'px', height:getGameViewBlockSize()+'px'}"
				>view>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				randomIndex:1,
				//地图大小
				mapSize:[18, 10],
				//下降时间:开始，结束，每升一级减少等待时间
				downSpeed: [1500, 200, 100],
				//分数：现在分数，多少分升一级, step
				score: [0, 10, 1],
				//地图
				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()
		},
		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;
				}
			 
			})
			
		},
		methods: {
			initGame(){
				var that = this;
				this.initMap()
				this.score[0] = 0;
				this.refreshNextBlock()
				this.refreshNextBlock()
				this.gameOver = false;
				clearInterval(that.gameUpdateFunc)
				that.gameUpdateFunc = null;
				this.$nextTick(function(){
					that.tryGetGameHeight()
					that.gameUpdate()
				})
			},
			gameUpdate(){
				var that = this;
				
				that.randomIndex = Math.floor(Math.random()*5+1)
										
				
				that.gameOver = false;
				that.gameUpdateFunc = setInterval(()=>{
					
					
					//游戏循环体
					that.moveDown()
								
					
					//更新
					clearInterval(that.gameUpdateFunc)
					//游戏未结束时触发
					if(!that.gameOver){
						that.gameUpdate()
					}
					else{
						uni.showModal({
							showCancel:false,
							confirmText:'再来一局',
							title:'游戏结束',
							content:'最终分数:'+this.score[0],
							success:(res)=>{
								if(res.confirm){
									that.initGame()
								}
							}
						})
					}
				}, Math.max(
					(this.downSpeed[0]-this.downSpeed[2]*parseInt(this.score[0]/this.score[1])), 
					this.downSpeed[1]
				))
			},
			moveDown(){
				//获取底部砖块情况
				if(this.gameOver) return;
				var bottomPosition = []
				var theBlock = this.blocks[this.nowBlock[0]][this.nowBlock[1]]
				for (var i=0;i<theBlock[0].length;i++){
					bottomPosition.push(0)
				}
				for (var i=0;i<theBlock.length;i++){
					for (var j=0;j<theBlock[i].length;j++){
						if(theBlock[i][j] > 0){
							bottomPosition[j] = Math.max(bottomPosition[j], i)
						}
					}
				}
				// console.log(bottomPosition)
				var canMove = true;
				for (var i=0;i<bottomPosition.length;i++){
					if(this.blockPosition[0]+bottomPosition[i]+1 >= this.mapSize[0]){
						canMove = false;
						break;
					}
					else if(this.map[
							this.blockPosition[0]+bottomPosition[i]+1
						][
							this.blockPosition[1]+i
						] > 0){
						canMove = false;
						break;
					}
				}
				if(canMove){
					this.blockPosition[0]+=1;
					this.$forceUpdate()
				}
				else{
					//如果当前Y坐标依旧是0，游戏结束
					if(this.blockPosition[0]<=0){
						this.gameOver = true;
					}
					//触底不能移动, 锁死方块,将方块的值赋予map
					else{
						for (var i=0;i<theBlock.length;i++){
							for (var j=0;j < theBlock[i].length;j++){
								// console.log(this.blockPosition[0]+i, this.blockPosition[1]+j)
								// console.log(this.map.length, this.map[0].length)
								this.map[this.blockPosition[0]+i][this.blockPosition[1]+j] = 
									Math.max(theBlock[i][j], 
										this.map[this.blockPosition[0]+i][this.blockPosition[1]+j]);
							}
						}
						this.$forceUpdate()
						//判断当前是否有无可能消除行
						this.checkMapScore()
						//更新下个方块
						this.refreshNextBlock()
					}
				}
			},
			rotateBlock(){
				if(this.gameOver) return;
				var nextStyle = (this.nowBlock[1]+1) % this.blocks[this.nowBlock[0]].length;
				//判断当前的状态是否存在位置
				var canChange = true;
				var changeBlock = this.blocks[this.nowBlock[0]][nextStyle];
				if(this.blockPosition[1]+changeBlock[0].length > this.mapSize[1]){
					//x超出
					canChange = false;
				}
				else if(this.blockPosition[0]+changeBlock.length > this.mapSize[0]){
					//y超出
					canChange = false;
				}
				else{
					for (var i=0;i<changeBlock.length;i++){
						for (var j=0;j<changeBlock[i].length;j++){
							//旋转后部分和原始map重合
							if (changeBlock[i][j] > 0 && 
								this.map[this.blockPosition[0]+i][this.blockPosition[1]+j] > 0){
									canChange = false;
									break;
								}
						}
					}
				}
				if(canChange){
					this.nowBlock[1] = nextStyle
					this.$forceUpdate()
				}
			},
			moveLeft(){
				//判断是否可以左移
				if(this.gameOver) return;
				var theBlock = this.blocks[this.nowBlock[0]][this.nowBlock[1]];
				var leftPosition = [];
				for (var i=0;i<theBlock.length;i++){
					leftPosition.push(-1)
					for (var j=0;j<theBlock[i].length;j++){
						if(leftPosition[i] === -1 && theBlock[i][j] > 0){
							leftPosition[i] = j;
						}
					}
				}
				// console.log(leftPosition)
				var canMove = true;
				for (var i=0;i<leftPosition.length;i++){
					if (this.blockPosition[1]+leftPosition[i] == 0){
						canMove = false;
						break;
					}
					else if (this.map[
								this.blockPosition[0]+i
							][
								this.blockPosition[1]+leftPosition[i]-1
							] > 0){
						canMove = false;
						break;
					}
				}
				if(canMove){
					this.blockPosition[1] -= 1;
					this.$forceUpdate()
				}
			},
			moveRight(){
				//判断是否可以左移
				if(this.gameOver) return;
				var theBlock = this.blocks[this.nowBlock[0]][this.nowBlock[1]];
				var rightPosition = [];
				for (var i=0;i<theBlock.length;i++){
					rightPosition.push(0)
					for (var j=0;j<theBlock[i].length;j++){
						if(theBlock[i][j] > 0){
							rightPosition[i] = j;
						}
					}
				}
				// console.log(rightPosition)
				var canMove = true;
				for (var i=0;i<rightPosition.length;i++){
					if (this.blockPosition[1]+rightPosition[i]+1 >= this.mapSize[1]){
						canMove = false;
						break;
					}
					else if (this.map[
								this.blockPosition[0]+i
							][
								this.blockPosition[1]+rightPosition[i]+1
							] > 0){
						canMove = false;
						break;
					}
				}
				if(canMove){
					this.blockPosition[1] += 1;
					this.$forceUpdate()
				}
			},
			checkMapScore(){
				var newMap = []
				// 计算score并消去满足的行
				for (var i=0; i < this.map.length; i++){
					var lineSum = 0;
					for(var j=0; j < this.map[i].length;j++){
						lineSum += Math.min(this.map[i][j], 1);
					}
					// console.log(i, lineSum)
					if(lineSum >= this.map[i].length){
						this.score[0] += this.score[2];
					}
					else{
						newMap.push(JSON.parse(JSON.stringify(this.map[i])))
					}
				}
				//补充缺失的行
				while (newMap.length < this.map.length){
					var aline = []
					for (var i=0;i<this.map[0].length;i++) aline.push(0)
					newMap.unshift(aline)
				}
				this.map = newMap;
				this.$forceUpdate();
			},
			initMap(){
				this.map = []
				for (var i=0;i<this.mapSize[0];i++){
					this.map.push([])
					for (var j=0;j<this.mapSize[1];j++){
						this.map[i].push(0)
					}
				}
			},
			tryGetGameHeight(){
				var that = this;
				this.$nextTick(function(){
					that.gameViewHeight = uni.getSystemInfoSync().windowHeight - 170;
				})
			},
			getGameViewBlockSize(){
				var padding = 40
				return Math.min(
					parseInt((this.gameViewHeight-padding)/this.mapSize[0]),
					parseInt((uni.getSystemInfoSync().windowWidth-padding)/this.mapSize[1])
				)
			},
			refreshNextBlock(){
				this.nowBlock = this.nextBlock
				var nextBlock = [
					parseInt(Math.random()*this.blocks.length),
					0
				]
				nextBlock[1] = parseInt(this.blocks[nextBlock[0]].length*Math.random())
				this.nextBlock = nextBlock
				this.blockPosition = JSON.parse(JSON.stringify(this.startPosition));
				// console.log(this.blockPosition)
				this.$forceUpdate()
			},
			getTrueMap(){
				//实际map是原始map+当前方块位置
				if(this.map.length != this.mapSize[0] || this.mapSize[1] != this.map[0].length){
					return this.map;
				}
				var trueMap = JSON.parse(JSON.stringify(this.map))
				var theBlock = this.blocks[this.nowBlock[0]][this.nowBlock[1]]
				// console.log(theBlock)
				for(var i=0; i<theBlock.length; i++){
					for(var j=0; j<theBlock[i].length; j++){
						// console.log(i+this.blockPosition[0], j+this.blockPosition[1])
						trueMap[i+this.blockPosition[0]][j+this.blockPosition[1]] = Math.max(
							theBlock[i][j],
							trueMap[i+this.blockPosition[0]][j+this.blockPosition[1]]
						);
					}
				}
				// console.log(trueMap)
				return trueMap;
			}
		}
	}
script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		    background-color: #020000d4;
			    height: 100vh;
	}
	
	.title{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 90%;
		padding: 8% 5px;
		height:58px;
		border: #d9d9d9 solid 5px;
		    color: #fff;
		    border-radius: 10px;
		    font-weight: bold;
			margin-top: 10px;
			background: #3da5c482;
	}
	
	.blockMinMap{
		display: flex;
		flex-direction: column;
		width: 48px;
		height: 48px;
		align-items: center;
		justify-content: center;
	}
	
	.blockMinMap .line, .gameView .line{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.blockMinMap .line view{
		width: 12px;
		height: 12px;
	}
	
	.gameView .line view{
		border: 1px solid #e6e6e6;
		width: 40upx;
		height: 40upx;
	}
	
	.blockMinMap .line .block{
		border: 1px solid #333333;
		width: 10px;
		height: 10px;
	}
	
	.gameView .line .block{
		border: 1px solid #333333;
		background-color: #4CD964;
		/* width: 40upx;
		height: 40upx; */
	}
	
	
	
	.block1{
		border: 1px solid #333333;
		background-color: #4CD964;
		/* width: 40upx;
		height: 40upx; */
	}
	
	.block2{
		border: 1px solid #333333;
		background-color: #0055ff;
	}
	 .block3{
		border: 1px solid #333333;
		background-color: #ff007f;
	}
	.block4{
		border: 1px solid #333333;
		background-color: #ffaa00;
	}
	.block5{
		border: 1px solid #333333;
		background-color: #ff55ff;
	}
	
	
	
	.gameView{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.buttonView{
		width: 90%;
		padding: 5% 5px;
		border-top: #C0C0C0 solid 1px;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.buttonView view{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 30%;
		border: #555555 solid 1px;
		border-radius: 10px;
		height: 30px;
		background-color: #FFFFFF;
	}
	
	.buttonView view:active{
		background-color: #C0C0C0;
	}
style>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361
    • 362
    • 363
    • 364
    • 365
    • 366
    • 367
    • 368
    • 369
    • 370
    • 371
    • 372
    • 373
    • 374
    • 375
    • 376
    • 377
    • 378
    • 379
    • 380
    • 381
    • 382
    • 383
    • 384
    • 385
    • 386
    • 387
    • 388
    • 389
    • 390
    • 391
    • 392
    • 393
    • 394
    • 395
    • 396
    • 397
    • 398
    • 399
    • 400
    • 401
    • 402
    • 403
    • 404
    • 405
    • 406
    • 407
    • 408
    • 409
    • 410
    • 411
    • 412
    • 413
    • 414
    • 415
    • 416
    • 417
    • 418
    • 419
    • 420
    • 421
    • 422
    • 423
    • 424
    • 425
    • 426
    • 427
    • 428
    • 429
    • 430
    • 431
    • 432
    • 433
    • 434
    • 435
    • 436
    • 437
    • 438
    • 439
    • 440
    • 441
    • 442
    • 443
    • 444
    • 445
    • 446
    • 447
    • 448
    • 449
    • 450
    • 451
    • 452
    • 453
    • 454
    • 455
    • 456
    • 457
    • 458
    • 459
    • 460
    • 461
    • 462
    • 463
    • 464
    • 465
    • 466
    • 467
    • 468
    • 469
    • 470
    • 471
    • 472
    • 473
    • 474
    • 475
    • 476
    • 477
    • 478
    • 479
    • 480
    • 481
    • 482
    • 483
    • 484
    • 485
    • 486
    • 487
    • 488
    • 489
    • 490
    • 491
    • 492
    • 493
    • 494
    • 495
    • 496
    • 497
    • 498
    • 499
    • 500
    • 501
    • 502
    • 503
    • 504
    • 505
    • 506
    • 507
    • 508
    • 509
    • 510
    • 511
    • 512
    • 513
  • 相关阅读:
    pandasGUI：一款开源的功能异常强大的数据可视化分析工具
    合并K个升序链表
    InnoDB存储引擎状态详解
    NLP：如何计算两个句子的相似度
    抖音矩阵系统源码，抖音矩阵系统，抖音SEO源码。、
    第十课 贪心
    十分钟带你上手egg，写自己的后端接口
    Tax4Fun软件安装包
    wireguard windows版本的配置
    Excel最基本的常用函数
  • 原文地址：https://blog.csdn.net/weixin_37797592/article/details/127937943