HTML5游戏_基于DOM平台跳跃小游戏开发
生成关卡地图
- 视频讲解
HTML5基于DOM平台跳跃小游戏开发
- 效果图
- 本章的知识点:
- 对象.prototype.新属性或方法 prototype能使您有能力向对象添加属性和方法.
- 现在我们要把解析出来的地图元素输出到浏览器中
- 简单说下生成关卡地图的流程
1.创建游戏场景
正常来说我本在body中写一个div,class=游戏场景
<body>
<div class="游戏场景"></div>
</body>
但这样需要手写,我们希望在js脚本里能自动生成我们所需要的HTML标签
所以我们需要写一个公用的类似的工具一样的函数来完成这个操作
这些工具函数我们专门建立一个"工具函数,js"来存放他们
工具函数.js
/**
*@描述: 生成html标签 函数
*@传参: 名称(html标签类型) 类名称(html标签类名)
*@参数:
*@返回值: 标签(html标签)
*@创建人: 王天宇
*@创建时间:2021/02/24
*@修改人和其它信息:
**/
function 生成html标签(名称, 类名称)
{
//定义变量 标签 保存创建的html标签
var 标签 = document.createElement(名称);
//类名称不为空
if (类名称)
{
//修改html标签的class属性
标签.className = 类名称;
}
//返回标签
return 标签;
}
这样我们调用 生成html标签函数 就可以得到所需要的html标签了
同时我们也把地图二维数组也单独保存成 地图数据.js
地图数组.js
//定义变量二维字符串数组 地图数组
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",
"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!",
]
];
把上一章的 生成地图数据 函数 也保存成 生成地图数据.js
生成地图数据.js
/**
*@描述: 生成地图数据 函数
*@传参: 地图 (地图数组的一项,如 地图数组[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(元素行);
}
}
接着我们来在html里创建 游戏场景div
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html跳跃小游戏</title>
<!--CSS样式-->
<link rel="stylesheet" type="text/css" href="./css/css样式.css">
</head>
<body>
<!--JS脚本-->
<script type="text/javascript" src="./js/地图数组.js"></script>
<script type="text/javascript" src="./js/生成地图数据.js"></script>
<script type="text/javascript" src="./js/工具函数.js"></script>
<script>
/**
*@描述: 生成关卡 方法
*@参数: 父框架(生成关卡的所在标签) 新地图数据(生成关卡地图)
*@返回值: 无
*@创建人: 王天宇
*@创建时间:2021/02/24
*@修改人和其它信息:
**/
function 生成关卡(父框架, 新地图数据)
{
//定义属性 游戏场景 来保存添加到父框架的html标签
this.游戏场景 = 父框架.appendChild(生成html标签("div", "游戏场景"));
//添加关卡地图数据=生成的新关卡地图数据
this.关卡地图数据 = 新地图数据;
}
//开始关卡 函数
function 开始关卡(n)
{
//定义对象 新地图数据 引用 生成地图数据 对象
var 新地图数据 = new 生成地图数据(地图数组[n]);
//定义对象 新关卡 引用 生成关卡 对象
var 新关卡 = new 生成关卡(document.body, 新地图数据);
}
//初始化程序 函数
function 初始化()
{
//开始第一个关卡
开始关卡(0);
}
//初始化游戏
初始化();
</script>
</body>
</html>
2.在游戏场景里添加地图table
根据解析出来的地图元素依次生成对应的td,每个td的大小为15px*15px
function 生成关卡(父框架, 新地图数据)
{
//定义属性 游戏场景 来保存添加到父框架的html标签
this.游戏场景 = 父框架.appendChild(生成html标签("div", "游戏场景"));
//添加关卡地图数据=生成的新关卡地图数据
this.关卡地图数据 = 新地图数据;
//将关卡地图数据中的table地图画出并添加到游戏场景中
this.游戏场景.appendChild(this.画地图());
}
//定义变量 游戏单元尺寸
var 尺寸 = 15;
/**
*@描述: 生成关卡 添加 画地图 方法
*@参数: 无
*@返回值: 地图表格(table标签)
*@创建人: 王天宇
*@创建时间:2021/02/24
*@修改人和其它信息:
**/
生成关卡.prototype.画地图 = function()
{
//生成地图table
var 地图table = 生成html标签("table", "地图");
//设置地图table的css样式宽为 关卡地图数据.宽 * 尺寸
地图table.style.width = this.关卡地图数据.宽 * 尺寸 + "px";
//设置地图table的css样式高为 关卡地图数据.高 * 尺寸
地图table.style.height = this.关卡地图数据.高 * 尺寸 + "px";
//遍历关卡地图数据.方格数组来定义对应元素的表格
this.关卡地图数据.元素数组.forEach(function(行)
{
//生成地图table一行 行tr
var 行tr = 地图table.appendChild(生成html标签("tr"));
//设置行tr的css样式高为 尺寸
行tr.style.height = 尺寸 + "px";
//遍历行 根据元素类型标注到td标签的ClassName中,使得td标签显示出对应的CSS样式变成不同的方块
行.forEach(function(元素类型)
{
//生成每一个单元格 行tr并指定class=元素类型
行tr.appendChild(生成html标签("td", 元素类型));
});
});
//返回地图table
return 地图table;
};
运行效果
最后别忘了把 生成关卡 函数 也单独写成 生成关卡.js
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
