Javascript实现俄罗斯方块

最新推荐文章于 2025-03-21 13:48:29 发布

GMF_CodingBoy

最新推荐文章于 2025-03-21 13:48:29 发布

阅读量2.4k

点赞数 23

文章标签：游戏 javascript

本文链接：https://blog.youkuaiyun.com/qq_41199852/article/details/107721420

版权

本文介绍了如何使用JavaScript实现俄罗斯方块，强调了梳理思路和绘制流程图的重要性。作者提到了实现功能的关键步骤，包括边界判断、底部判断、消除判断及消除处理。文章展示了程序截图、流程图，并详细解释了模型移动、定位和键盘事件处理的逻辑。代码注释清晰，有助于理解整个游戏的运行流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前文

完成俄罗斯方块所需要完成的流程想起来比较简单，但是要考虑的事情并不算很少，边界的判断，到达底部的判断，消除的判断，消除后的处理都需要考虑在里面，一开始自己写的时候其实思维是很容易混乱的，所以这时候你要自己去捋顺了思路，画一个简易的流程图是很有必要的，同时要保证能够实现函数之间的低耦合高内聚，通俗的说，你要让自己的函数尽量只实现一个功能.

实现的功能截图

常规运行截图
在这里插入图片描述

流程图

说明：

这里每个生成的模型的移动是通过16宫格位置和模型相对16宫格位置重新定位实现的，里面有些英语单词拼错了，罪恶罪恶，sublime text3确实在代码补全方面挺头疼的

主流程图

制作模型流程(createModel())
在这里插入图片描述

生成模型完成定位流程图(localtionBlocks())
在这里插入图片描述
定位完成的模型开始移动(autoDown())

onKeyDown

这里就不用流程图进行说明了，无法向上移动，向左是move(-1,0)，向右是move(1,0),向下就是move(0,1),向上是变化就是函数rotate(),该函数的判断逻辑是生成一个新的模型对象，形状位置是即将变化后的形状位置，利用函数isMeet()判断，如果重叠了则无变化，没重叠则当前的模型位置和形状就是变化后的

模型样式

在这里插入图片描述

代码

整个代码的运行逻辑就是前面所放置的逻辑流程图，耐心看的话很容易理解。有关于一些常量没有说明，但是代码的注释说明清楚了，看看就行。

<!DOCTYPE html>
<html>
<head>
	<title>俄罗斯方块</title>
	<meta charset="utf-8">
	<style type="text/css">
		.container{
   
			left: 50px;
			height: 360px;
			width:200px;
			background-color: #000000;
			position:relative;

		}
		.activity_model{
   
			height: 20px;
			width: 20px;
			top:0px;
			left:0px;
			border-style:solid;
			border-width: 1px;
			border-color: #ffffff;
			background-color: #0000FE;
			position: absolute;
		}
		.fixed_model{
   
			height: 20px;
			width: 20px;
			top:0px;
			left:0px;
			border-style:solid;
			border-width: 1px;
			border-color: #333333;
			background-color: #fefefe;
			position: absolute;
		}
		.score{
   
			height: 100px;
			width: 300px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.score_score{
   
			height: 50px;
			width: 300px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	</style>
	<script type="text/javascript" src="http://cdn.bootcss.com/lodash.js/4.16.6/lodash.min.js"></script>
	<script type="text/javascript">
		//分数
		var GAME_SCORE = 0;
		//暂停状态
		var CANCEL_STATE = false;
		//游戏速度
		var LEVEL = 1;
		//游戏默认得分
		var SCORE = 100;
		//常数值
		const STEP = 20;
		const ROW_COUNT = 18;
		const COL_COUNT = 10;

		//定时器
		var mInterval = null;

		//模型类
		const MODELS = [
			//L
			{
   
				0:{
   
					row:2,
					col:0
				},
				1:{
   
					row:2,
					col:1
				},
				2:{
   
					row:2,
					col:2
				},
				3:{
   
					row:1,
					col:2
				}
			},
			//凸形
			{
   
				0:{
   
					row:1,
					col:1
				},
				1:{
   
					row:0,
					col:0
				},
				2:{