JavaScript实现俄罗斯方块

最新推荐文章于 2024-04-21 11:04:37 发布
最新推荐文章于 2024-04-21 11:04:37 发布
阅读量1.3k 收藏 16
点赞数 5
分类专栏： 前端 文章标签： JavaScript 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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":-20},{"x":0,"y":0},
		{"x":20,"y":0},{"x":20,"y":20}],//四个方块，Z字型
		[{"x":0,"y":0},{"x":-20,"y":0},
		{"x":0,"y":20},{"x":-20,"y":20}],//四个方块，田字型
	],

};

/*
*定义一个Cube类，用Cube类来实现下落的方块
*/
//cubes_site数组保存每个小方块的坐标，
//game是Game对象
function Cube(cubes_site,game) {
	this.cubes_site = [];//小方块坐标
	for (var i = 0; i < cubes_site.length; i++) {
		var c = {};
		c.x = cubes_site[i].x;
		c.y = cubes_site[i].y;
		this.cubes_site.push(c);
	}
	this.cubes = []; //小方块div对象
	this.center = {};//初始化旋转中心点
	this.center.x = config.center.x;
	this.center.y = config.center.y;
	//console.log(config.center);
	this.box = game.box; //指向box 框
	this.game = game;    //指向游戏类
	this.distance = 0;    //下落距离
	var init_rotate = randomNum(0,3); //初始化旋转
	for (var i = 0; i <init_rotate; i++) {
		this.rotate(1);
	}
	this.draw();
	// this.bindEvent();
}
//定义类原型
Cube.prototype = {
	//下落
	fall:function(){
		this.distance += config["cube_size"];//增加行进距离
		this.center.y += config["cube_size"];//改变中心点坐标
		for (var i = 0; i < this.cubes_site.length; i++) {			
			this.cubes[i].top += config["cube_size"];//改变实时坐标
			this.cubes[i].style.top = this.cubes[i].top+"px";//设置位置属性			
		}
		// console.log(this.distance);
	},
	//左右移动,1:右移，-1：左移
	move:function(direction){
		if(this.moveCollision(direction))
			return;
		var d = config["cube_size"]*direction;
		//移动中心点
		this.center.x += d;
		//移动小方块
		for (var i = 0; i < this.cubes_site.length; i++) {
			this.cubes[i].left += d;
			this.cubes[i].style.left = this.cubes[i].left+"px";
		}
	},

	//移动碰撞
	moveCollision:function(direction){
		for (var i = 0; i < this.cubes.length; i++) {
			//不能移出游戏框,触碰到边界则返回true
			if(this.cubes[i].left == 0 && direction==-1 ){
				return true;
			}else if(this.cubes[i].left == config.box_width-config.cube_size 
				&& direction==1
				){
				return true;
			}else{//检测和落地的方块是否相撞
				var x = this.cubes[i].left + 
					direction*config.cube_size;
				var y = this.cubes[i].top;
				if(this.game.parallel_sites[x].some(function(u){
					if(u==undefined)return false;
					return Math.abs(u.top-y)<20;
				})){
					return true;
				}
			}
				
		}

		return false;
			
	
	},

	// 绕center中心点旋转旋转，direction=1，顺时针旋转九十度，
	// direction=-1逆时针旋转九十度
	rotate:function (direction) {	
		//改变相对于中心点的坐标	
		for (var i = 0; i < this.cubes_site.length; i++) {
			var tmp = 0;
			tmp = this.cubes_site[i]["x"];
			this.cubes_site[i]["x"] =
			this.cubes_site[i]["y"]*direction;
			this.cubes_site[i]["y"] = -tmp*direction;
			
		}
		
	},

	//响应旋转事件
	rotateEvent:function(){
		this.rotate();
		for (var i = 0; i < cubes.length; i++) {
			var site = this.siteConvert(this.cubes_site[i]["x"],
				this.cubes_site[i]["y"]);
			cubes[i].top = site.y;
			cubes[i].left = site.x;
			cubes[i].style.top = site.y+"px";
			cubes[i].style.left = site.x+"px";
		}
	},

	
	//在box中显示方块
	draw:function(){
		for (var i = 0; i < this.cubes_site.length; i++) {
			var div = document.createElement("div");
			//console.log(this.center["x"]);
			var site = this.siteConvert(this.cubes_site[i]["x"],
				this.cubes_site[i]["y"]);
			div.top = site.y;   //相对于box元素的纵坐标
			div.left = site.x;  //相对于box元素的横坐标
			div.style.top = site.y+"px"; //设置style属性，进行定位
			div.style.left = site.x+"px";
			//给小方块添加边框要考虑到边框占据的像素，
			//这里用随机颜色加以区分
			// div.style.backgroundColor = config.color[randomNum(0,3)];
			div.className = "cube";
			this.cubes.push(div);
			this.box.appendChild(div);
		}
	},
	
	//坐标转换,把相对于旋转中心的坐标转换为box中的坐标
	siteConvert:function (x, y) {
		var site = {};
		site.x = x-config.half_cube_size+this.center["x"];
		site.y = y-config.half_cube_size+this.center["y"];

		return site;
	},

};

//定义Game类，控制游戏运行
function Game() {
	this.box_width = config.box_width;
	this.box_height = config.box_height;
	this.parallel_sites = []; // 纵向记录坐标
	this.cross_sites = [];    //横向记录坐标
	//每行最多方块数
	this.cross_cube_num = parseInt(config["box_width"]/config["cube_size"]);
	//初始化
	for (var i = 0; i < config.box_width; i+=config.cube_size) { 
		this.parallel_sites[i] = [];
	}
	//初始化
	for (var i = config.box_height; i >=0; i-=config.cube_size) {
		this.cross_sites[i] = [];
	}
	//最大纵坐标
	this.max_y = config.box_height - config.cube_size;
	//最大横坐标
	this.max_x = config.box_width - config.cube_size;
	//时间间隔
	this.interval = config.interval;
	//绑定事件
	this.bindEvent();
	// console.log(this.parallel_sites);
}
//Game类原型
Game.prototype = {
	//绘制游戏区域
	draw:function(){
		//清空屏幕
		document.body.innerHTML = '';
		//创建游戏框
		var div = document.createElement("div");
		div.id = "#box";
		div.style.width  =  this.box_width+"px";
		div.style.height =  this.box_height+"px";
		div.style.borderStyle = "solid";
		div.style.borderWidth = "10px";
		div.style.borderColor = "#33FF33";
		div.style.position = "fixed";
		div.style.backgroundColor = "#00CCFF";
		div.style.left = (window.innerWidth-this.box_width)/2+"px";
		div.style.top = "30px";
		document.body.appendChild(div);
		
		this.box = div;
				
	},

	//绑定事件
	bindEvent:function(){
		var game = this;
		document.onkeydown = function (event) {
			if(game.game_state == 0){
				return false;
			}
			if(event.keyCode == 39){     //右箭头，右移方块
				game.blocks.move(1);
			}else if(event.keyCode == 37){ //左移方块
				game.blocks.move(-1);
			}else if(event.keyCode == 40){//向下加速下落
				if(game.speed_up == 0){
					game.interval = 50;
					clearTimeout(game.fall);
					game.run();
					game.speed_up = 1;
				}
			}
		};

		document.onkeyup = function(){
			if(game.game_state == 0){
				return false;
			}
			if(event.keyCode==40){//停止加速
				game.interval = config.interval;
				clearTimeout(game.fall);
				game.run();
				game.speed_up = 0;
			}
		};
	},
	//div块向下滑动
	slideCube:function(div, distance){

		// slide();
		div.top += distance;
		div.style.top = div.top+"px";
	},
	
	//开始游戏
	startGame:function(){
			
		//绘制游戏区域	
		this.draw();
		
		//随机生成一组方块，投放方块到box
		var blocks = new Cube(
			config.cubes_site[randomNum(0,config["cubes_site"].length-1)],this);
		//在game对象中保存对blocks的引用
		this.blocks = blocks;
		//定义游戏状态
		this.game_state = 1;
		//加速
		this.speed_up = 0;
		//保存game对象
		var game = this;

		console.log(game.cross_sites);
		console.log(game.parallel_sites);

		var run = function() {			
			//下落是碰撞检测
			if(game.fallCollision(blocks)){
				if(blocks.distance == 0){
					game.game_state = 0;//结束游戏
				}else{ //处理落下的方块并且生成新的方块
					game.addNewBlocks(blocks);
					blocks = new Cube(
						config.cubes_site[randomNum(0,config["cubes_site"].length-1)],game);
					game.blocks = blocks;
				}
			}else{
				blocks.fall(); //go
			}

			if(game.game_state==1){
				//继续下落
				game.fall = setTimeout(run, game.interval);
			}else{
				game.endGame();
			}
		};

		this.run = run;

		this.run();
		
	},

	//“吸收”新的方块
	addNewBlocks:function(blocks){
		var y = [];
		for (var i = 0; i < blocks.cubes.length; i++) {
			this.parallel_sites[blocks.cubes[i].left].push(
				blocks.cubes[i]);
			this.cross_sites[blocks.cubes[i].top].push(
				blocks.cubes[i]);
			if(y.indexOf(blocks.cubes[i].top)<0)
				y.push(blocks.cubes[i].top);
		}
		y = y.sort(function(a,b){
			return b-a;
		});
		// console.log(y);
		var fall = 0;
		for (var i = 0; i < y.length; i++) {			
			y[i] += fall;
			// console.log(y[i]);
			//判断该行是否可消除
			if(this.cross_sites[y[i]].length == this.cross_cube_num){
				//移除该行方块
				for (var j = 0; j < this.cross_cube_num; j++) {
					var cube = this.cross_sites[y[i]][j];
					//移除方块
					this.box.removeChild(cube);
					var index = this.parallel_sites[cube.left].indexOf(
						cube);
					this.parallel_sites[cube.left].splice(index,1);
					// index = this.cross_sites[cube.top].indexOf(
					// 	cube);
					// this.cross_sites[cube.top].splice(index,1);
				}
				this.cross_sites[y[i]] = [];
				var init = y[i] - config.cube_size;
				//让上面的方块下落
				while(this.cross_sites[init].length != 0){
					//下落
					for (var j = 0; j < this.cross_sites[init].length; j++) {						
						this.slideCube(this.cross_sites[init][j],config.cube_size);
					}
					this.cross_sites[init+config.cube_size] = this.cross_sites[init];
					init -= config.cube_size;
				}
				this.cross_sites[init+config.cube_size] = [];
				//改变fall值
				fall += config.cube_size;
			}
		}

		
		
	},


	//碰撞检测，与已存在的方块或底部相撞
	fallCollision: function(blocks) {
		var x,y;
		// var bottom = config.box_height - config.cube_size;
		for (var i = 0; i < blocks.cubes.length; i++) {
			x = blocks.cubes[i].left;
			y = blocks.cubes[i].top;
			if( y == this.max_y){
				return true;
			}
			if(this.parallel_sites[x].some(function(u){
				if(u==undefined)return false;
				return u.top-y==config.cube_size;
			})){
				return true;
			}
			
		}
		return false;
	},

	
	//结束游戏
	endGame:function(){
		// console.log("Game Over");
		//打印一个游戏结束框
		var div = document.createElement("div");
		div.className = "over";
		var node = document.createTextNode("Game Over!");
		div.appendChild(node);

		//给div块绑定事件
		div.onmouseover = function(){
			this.textContent = "Click to restart.";
		};

		div.onmouseout = function(){
			this.textContent = "Game Over!";
		};

		div.onclick = function(){
			var game = new Game();
			game.startGame();
		};

		//添加到游戏框
		this.box.appendChild(div);
	},
};

//生成从minNum到maxNum的随机数
function randomNum(minNum,maxNum){ 
    switch(arguments.length){ 
        case 1: 
            return parseInt(Math.random()*minNum+1,10); 
        break; 
        case 2: 
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
        break; 
            default: 
                return 0; 
            break; 
    } 
}
在浏览器中运行

最后在浏览器中打开tetris.html文件运行游戏：

俄罗斯方块

总结

将复杂的问题进行拆分；
采用面向对象的思想可以让思路更清晰

Deepmilu
关注
  • 5
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
tetris.js:javascript中的画布俄罗斯方块克隆
05-22
＃Tetris.js 用Javascript编写的经典基于画布的游戏 ＃＃特征 通过仅重绘屏幕上已更改的部分，游戏可以流畅快速地渲染。 同样，游戏仅在浏览器准备绘制下一帧时才使用requestAnimationFrame进行绘制。 所有的Tetrominoes都是它们自己的对象，它们具有shape属性，该属性将每个单元格对象存储在一个数组数组中。 这样，只有活动的tetromino单元才能对HTML5的画布进行绘制调用。 调用画布的次数较少，因此可以保持游戏的高帧率。 旋转也是在飞行中计算的，而不是将预旋转的零件存储在tetromino类中。 通过动态计算片段转换并保持严格的对象继承层次，代码库保持非常精简和可维护。
Js实践之俄罗斯方块
玉案轩窗的博客
02-09 1047
前言 快到春节假期了，最近工作上没什么事情，浏览技术文章的时候看见关于俄罗斯方块相关的内容，才会起意实现下俄罗斯方块，主要目的有如下几条： 回顾下Js部分的知识 学习理解俄罗斯方块游戏的具体实现思想 具体实现 实现看下具体的实现效果，实现效果如下： 本次实现是简易版的俄罗斯方块包含基本俄罗斯方块的基本功能，本次实现的俄罗斯方块的基本功能有： 形状变换 满行消除 下一个形状提示...
用JS写一个《俄罗斯方块》小游戏
KISS
04-06 2680
最近网上上映一部名叫，想起自己学习JS时，编写《俄罗斯方块》小游戏程序作为练习，现在分享一下，看能不能蹭一下热度。: )
js实现俄罗斯方块
最新发布
wubeidangziqiang的博客
04-21 255
1，左右移动到达边界之后由于数组大小有限，超过边界之后并未处理出现异常。额应该还有其他问题目前就发现这么多，然后就是面向对象的思想问题。3，未制作游戏开始以及失败判定。目前的话有以下问题未解决。2，方块形状没有解决。
利用js轻松实现俄罗斯方块小游戏的实现
weixin_44856221的博客
02-13 151
利用js轻松实现俄罗斯方块小游戏的实现，就是玩
js版俄罗斯方块
Rare's Tech-Blog
11-21 618
 前些天学习javascript时写的，linux下firefox3.5调试通过 /** * tetris.js */var block_color = ["#AA5555", "#5555AA", "55AA55", "#F0A000", "AA55AA"];var block_table = [[[-1, 0, 0, 0], [-1, -1, 0, 1]], [
js 实现俄罗斯方块
weixin_39394140的博客
01-27 8070
实现思路 MVC思路。三个端分工合作。可以仔细看。整个俄罗斯方块为一个二维数组。C控制M, M控制二维数组，V只要把二维数组渲染出来就行 。 视图层 html部分 <canvas id="canvas"></canvas> js部分 // 画背景 function drawBG(){ CTX.lineWidth = 1; CTX.fil...
用javascript写俄罗斯方块
2301_78098294的博客
06-02 461
【代码】用javascript写俄罗斯方块。
JavaScript实现俄罗斯方块.rar
08-26
总的来说，JavaScript实现俄罗斯方块是一个很好的学习项目，它涵盖了事件处理、数组操作、定时器、DOM操作以及简单的游戏逻辑等多个JavaScript编程的关键点。通过这个项目，开发者可以深入理解JavaScript在实时交互...
javascript实现俄罗斯方块游戏的思路和方法
10-24
【JavaScript实现俄罗斯方块游戏】 实现俄罗斯方块游戏的核心在于理解游戏规则，处理方块的移动、旋转、碰撞检测以及游戏区域的填充。以下是一些关键知识点： 1. **游戏区域表示**： - 使用二维数组`area[18][10]...
JavaScript实现俄罗斯方块游戏
11-25
用H5和JS实现俄罗斯方块。 需要注意以下几点： 1.Canvas 的坐标信息与数组的维度信息恰好相反 2.在因为移动当前下落 的单元格，而更新对应坐标信息时，注意整个游戏平面的坐标信息更新 3.通过settimeout去设置按固定...
Tetris.js:用JavaScript编写的简单俄罗斯方块
05-13
俄罗斯方块 用JavaScript编写的简单俄罗斯方块 屏幕截图： 执照： MIT许可证（MIT） 版权所有（c）2015 MateuszBagiński 特此免费授予获得此软件和相关文档文件（“软件”）副本的任何人无限制地处理软件的权利，包括但不限于使用，复制，修改，合并的权利，发布，分发，再许可和/或出售本软件的副本，并允许具备软件的人员这样做，但须满足以下条件： 以上版权声明和此许可声明应包含在本软件的所有副本或大部分内容中。 该软件按“原样”提供，不提供任何形式的明示或暗示担保，包括但不限于对适销性，特定目的的适用性和非侵权性的担保。 无论是由于软件，使用或其他方式产生的，与之有关或与之有关的合同，侵权或其他形式的任何索赔，损害或其他责任，作者或版权所有者概不负责。软件。
java俄罗斯方块源码-tetris-js:javascript中简单的俄罗斯方块实现
06-05
java俄罗斯框源码俄罗斯方块JS 这是我编写的一个简单的俄罗斯方块实现，用于在 java 脚本中进行游戏编程实验。 完整的源代码版本是 游戏在画布元素上呈现。 实现是在 ES5 严格模式下完成的。 所以需要兼容 ES5 的浏览器才能运行游戏。 带注释的完整源代码为 14K。 缩小版为 3.5K。
tetris.js:通过重新构建俄罗斯方块来学习 Javascript 和 JQuery
07-08
俄罗斯方块.js 通过重新构建俄罗斯方块来学习 Javascript 和 JQuery 在准备作为编程新手的 Hack Reactor 入学面试时，我挑战自己使用 Javascript 和一些 JQuery 重新构建经典游戏俄罗斯方块。 我发现这个练习对巩固我的 Javascript 和一般编程基础非常有帮助，这绝对帮助我被 Hack Reactor 接受。 如果您是编程新手，我希望这对您有帮助，就像对我有帮助一样。 表中的内容 您可以在提交历史中找到与每个部分相关的源代码。 构建 DOM 在网格上绘制 左右移动形状 定义 Tetromino 旋转你的形状 修复两个错误 添加重力 生成新形状 修复更多错误 空整行
TetrisJS:一个Tetris类型的游戏，使它对JavaScript更加熟悉
05-19
俄罗斯方块 一个Tetris类型的游戏使人们对JavaScript更加熟悉。
Javascript 实现俄罗斯方块游戏
04-18
JavaScript实现俄罗斯方块游戏涉及到许多核心的编程概念和技巧，主要涵盖了前端开发中的HTML、CSS以及JavaScript语言的应用。下面将详细解析这个项目中可能涉及的知识点。 1. **HTML结构**：HTML是网页的基础，用于...
JavaScript实现俄罗斯方块游戏过程分析及源码分享
10-24
JavaScript实现俄罗斯方块游戏涉及到多个核心知识点，包括游戏逻辑、数据结构、边界检查、旋转算法以及事件处理。以下是对这些知识点的详细解析： 1. **游戏逻辑**：俄罗斯方块的基本逻辑是控制不同形状的方块从...
俄罗斯方块游戏——Javascript
Nemo0210的专栏
04-18 426
一、背景 二、实现思路 1. 将整个游戏界面看着是多个小正方形拼接而成 2. 运动中的图形由游戏界面对应的四个正方形渲染颜色构成，每个图形都记录需要染色的坐标 3.移动，相当于修改图形中正方形对应的坐标值，然后重新渲染游戏界面 4.变换图形，指定每个图形变换的下个图形的对象 三、具体实现 1.创建游戏界面，由10*20个正方形组成，并且给每个正方形编号“data-index”,Js代...
Javascript 俄罗斯方块 游戏代码
精选资讯文章
06-01 1380
通过设置的 Options.width, Options.height 列数与行数，以及设置的小方格宽度，初始化了一个宽：Options.width列，高为 Options.height 的表格界面出来；共7种方块，以1,2,3,4,5,6,7 索引键表示，方块是四个小块组成，每块都有各自的坐标，1-4表示组成该块的初始坐标位置，5表示旋转点；OLSFK.play 正常下落的方法，也得判断下落一格是否有被占用的格，如果没有，清除当前方块，绘制方块新位置;以及左右，向下及旋转动作判断，重新渲染方块位置；
用javascript实现一个俄罗斯方块游戏
05-17
好的，以下是用 JavaScript 实现俄罗斯方块游戏的代码： HTML 代码： ``` <!DOCTYPE html> <title>Tetris canvas { border: 1px solid #000; margin: 0 auto; display: block; } ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值