JavaScript实现俄罗斯方块

最新推荐文章于 2019-09-16 21:26:46 发布

Deepmilu

最新推荐文章于 2019-09-16 21:26:46 发布

阅读量1.4k

点赞数 5

分类专栏：前端文章标签： JavaScript 前端学习

本文链接：https://blog.youkuaiyun.com/ldy_2017/article/details/95314330

版权

网页版俄罗斯方块

刷完了《JavaScript权威指南》后，我决定用原生js实现一个简单的俄罗斯方块游戏。JavaScript这门语言发展了这么多年，已经有很多优秀的代码库、框架可以帮我们快速实现一些功能，但是抱着学习的态度，还是有必要了解原生的语言特性，而深入了解一门语言最好的办法就是不断的使用它，这个道理不只适用于JavaScript，也同样适用于Python、Java或者自然语言如英语、法语。

设计思路

在web应用中，显示功能依赖于HTML和CSS，前者控制文档的结构，后者控制文档的颜色、位置、边框、布局。JavaScript在客户端浏览器中控制交互、处理事件、实现动画。因此，我们用HTML和CSS完成显示方块的功能，然后用JavaScript改变文档块的CSS属性实现动画。因为JavaScript是一门面向对象编程的脚本语言，因此可以用类和对象来实现。但JavaScript中的“类”比较特殊，和Java不同，它是通过原型继承的方式来实现。按面向对象的思路，我定义了两个类来实现，一个类控制下落得方块，再需要一个类来控制游戏的运行、场景打印。此外，还需要定义一个全局变量config，用来保存游戏运行配置。必要的时候通过修改配置参数改变游戏运行参数。

config对象
- 保存游戏配置参数，方便修改。
Cube类
- 控制方块下落、移动、旋转
- 处理和方块有关的事件
Game类
- 绘制游戏区域
- 控制游戏运行
- 判断游戏结束

tetris.html

因为重点在JavaScript的实现，因此只写了些基本的样式，并将样式放在html文件的style标签中。以下是代码文件：

<!DOCTYPE html>
<html>
<head>
	<title>俄罗斯方块</title>
	<meta charset="utf-8">
	<style type="text/css">
		.cube{
    
			/*border:rder: solid 1px #ff0000;*/
			height: 20px;
			width: 20px;
			position: absolute;
			background-color: #CC6633;
			/*padding: 5px;*/
		}
		.over{
    
			border:solid 5px #FFCC66;
			position: relative;
			top:150px;
			margin: auto;
			height: 30px;
			width:150px;
			display: -webkit-flex;
			display: flex;
			-webkit-align-items:center;
			align-items:center;
			-webkit-justify-content:center;
			justify-content:center;
			background-color:blue;
		}

		body{
    
			background-color: #C0C0C0;
		}
	</style>
</head>
<body>
	<script type="text/javascript" src="tetris.js"></script>
	<script type="text/javascript">
		window.onload = function(){
    			
			var game = new Game();
			game.startGame();
		};		
	</script>
</body>
</html>

在script标签中引入了js文件，通过Game对象运行游戏。

tetris.js文件

//全局变量config，保存游戏配置
var config = {
   
	"box_width":400,      //游戏框宽度，单位px
	"box_height":600,     //游戏框高度，单位px
	"cube_size":20,       //小方块的尺寸,单位px
	"interval":500,       //下落速度；刷新位置时间间隔，单位ms
	"half_cube_size":10,  //半边长度,单位px
	"color":["#FFCC66","#C0C0C0","#FF0000","#FF33CC"],//颜色
	center:{
        //投放中心点
		x:210,
		y:50,
	},
	"cubes_site":[ //方块初始坐标
		[{
   "x":0,"y":0}],//一个方块
		[{
   "x":0,"y":0},{
   "x":0,"y":-20}],//两个方块
		[{
   "x":0,"y":0},{
   "x":0,"y":-20},
		{
   "x":0,"y":-40},{
   "x":0,"y":20}],//四个方块，长条形
		[{
   "x":0,"y":-40},{
   "x":0,"y":-20},
		{
   "x":0,"y":0},{
   "x":20,"y":0}],//四个方块，L字型
		[{
   "x":0,"y":-40},{
   "x":0,"y":-20},
		{
   "x":0,"y":0},{
   "x":-20,"y":0}],//四个方块，L字型
		[{
   "x":0,"y":-20},{
   "x":-20,"y":0},
		{
   "x":0,"y":0},{
   "x":20,"y":0}],//四个方块，品字型
		[{
   "x":0,"y":

最低0.47元/天解锁文章