HTML5游戏_基于DOM平台跳跃小游戏开发
解析地图数组
- 视频讲解
HTML5基于DOM平台跳跃小游戏开发
- 这一章我们就要开始接触JavaScript的一些基础知识了,我会在每章最前面列出本章会用到的相关知识,方便大家学习.
- 变量 是数据值的容器,只有一个单一值.
//这段代码把一个单一值(劳斯莱斯)赋给名为 汽车品牌 的变量:
var 汽车品牌 = "劳斯莱斯";
- 对象 也可以看作变量,但是对象包含很多值.每一个值都是对象的属性.
//这段代码把多个属性(品牌, 型号, 排量)赋给名为 汽车 的对象
var 汽车 =
{
品牌: "劳斯莱斯",
型号: "幻影",
排量:"6.7T"
};
- 函数 function 是一段代码,需要通过函数名称来进行调用.它能将一些数据(给函数传递的参数)传递进去进行处理,然后返回一些数据(函数的返回值)也可以不返回数据.
function 函数名称(给函数传递的参数)
{
return 函数的返回值;
}
- 方法 function 是通过对象调用的函数.也就是说,方法也是函数,只是比较特殊的函数.
function 函数(){} //函数
var 对象= //对象
{
方法:function() //方法
{
函数(); //调用函数
}
}
对象.方法(); //调用对象方法
- this.属性名称 为函数定义一个属性,this是最终指向的是那个调用它的函数或对象.
- push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
- 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/