HTML5游戏_基于DOM平台跳跃小游戏开发_4.解析地图数组

HTML5游戏_基于DOM平台跳跃小游戏开发

解析地图数组

• 视频讲解

HTML5基于DOM平台跳跃小游戏开发

• 这一章我们就要开始接触JavaScript的一些基础知识了,我会在每章最前面列出本章会用到的相关知识,方便大家学习.

1. 变量 是数据值的容器,只有一个单一值.

//这段代码把一个单一值（劳斯莱斯）赋给名为 汽车品牌 的变量：
var 汽车品牌 = "劳斯莱斯";

2. 对象 也可以看作变量,但是对象包含很多值.每一个值都是对象的属性.

//这段代码把多个属性（品牌, 型号, 排量）赋给名为 汽车 的对象
var 汽车 = 
{
	品牌: "劳斯莱斯", 
	型号: "幻影",
	排量："6.7T"
};

3. 函数 function 是一段代码,需要通过函数名称来进行调用.它能将一些数据(给函数传递的参数)传递进去进行处理,然后返回一些数据(函数的返回值)也可以不返回数据.

function 函数名称(给函数传递的参数)
{
	return 函数的返回值;
}

4. 方法 function 是通过对象调用的函数.也就是说,方法也是函数,只是比较特殊的函数.

function 函数(){}	//函数
var 对象=			//对象
{                       
	方法:function()	//方法
	{
		函数();		//调用函数
	}	            
}
对象.方法();			//调用对象方法

5. this.属性名称 为函数定义一个属性,this是最终指向的是那个调用它的函数或对象.
6. push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
7. JavaScript中的 == 与 === 的区别,注意 === 只在JavaScript中有.

//console.log 向浏览器控制台输出内容
console.log(34 == "34");	//输出true
console.log(34 === "34");	//输出false
//因此，==只判断值，不判断类型，===不仅判断值，还需要判断类型，只有两者都相同时，才会输出true

---

---

• 生成地图关卡就是将我们写好的二维字符串数组的内容变成table标签显示出来的过程.
• 原理就是遍历二维字符串数组,然后去判断获取到的每一个字符的内容并生成对应的table标签.
  遍历二维字符串数组

//定义二维字符串数组变量 地图数组
var 地图数组 = 
[
	[
		"x                    xxx         x",
		"x                    x!x         x",
		"x                    xvx         x",
		"x                                x",
		"x                                x",
		"x            o    o          |   x",
		"x  @      x=        x           ox",
		"xxxxxxx   xxxxxxxxxxx   xxxxxxxxxx",
		"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!",
	]
]
/**
 *@描述:	生成地图数据 函数
 *@传参:	地图 (地图数组的一项,如 地图数组[0] )
 *@参数:	宽,高,元素数组
 *@返回值:	无
 *@创建人:	王天宇
 *@创建时间:2021/02/24
 *@修改人和其它信息:
**/
function 生成地图数据(地图)
{
	//定义属性 宽 为地图[]数组的长度
	this.宽 = 地图[0].length;
	//定义属性 高 为地图数组的长度
	this.高 = 地图.length;
	//定义属性 方格数组 用来存放游戏里每个地图元素对应地图数据中的元素类型
	this.元素数组 = [];
	//遍历地图数组,识别地图元素
	for (var y = 0; y < this.高; y++) 
	{
		//定义变量 行 来存放地图里一行的数据
		var 行 = 地图[y];
		//定义数组 元素行 来存放解析地图一行数据后的元素类型
		var 元素行 = [];
		//遍历一行地图数据
		for (var x = 0; x < this.宽; x++) 
		{
			//定义变量 元素 来存 行[] 里的数据
			var 元素 = 行[x];
			//定义变量 元素类型 来存解析后的元素类型
			var 元素类型 = null;
			//判断元素
			if (元素 === "o")
			{
				元素类型 = "金币";
			}
			else if (元素 === "x")
			{
				元素类型 = "墙体";
			}
			else if (元素 === "@")
			{
				元素类型 = "玩家";
			}
			else if (元素 === "!")
			{
				元素类型 = "熔岩";
			}
			else if (元素 === "|")
			{
				元素类型 = "熔岩";
			}
			else if (元素 === "=")
			{
				元素类型 = "熔岩";
			}
			else if (元素 === "v") 
			{
				元素类型 = "熔岩";
			}
			//push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
			//将元素类型添加到方格行
			元素行.push(元素类型)
		}
		//将一行数据添加到方格数组
		this.元素数组.push(元素行);
	}
	//向控制台打印 元素数组 内容
	console.log(this.元素数组);
}

运行后便可在控制台看到我们把地图字符转换为元素类型的结果了

B站讲解视频 https://www.bilibili.com/video/BV1KX4y1V7Yn/