HTML5小游戏研究（四）:完结：增加多个关卡，手机支持, 记分牌

最新推荐文章于 2021-06-28 20:49:28 发布

2byte

最新推荐文章于 2021-06-28 20:49:28 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML5 前端自习室文章标签： html5 小游戏 canvas

本文链接：https://blog.youkuaiyun.com/twoByte/article/details/52066942

关卡

本来按照只有一关的思路设计，整个逻辑都是循环，突然我说要加上多个关卡，猛的不适应，考虑了一下，无耻的去看原著的代码，发现原著是使用了一个数组，来定义地图上障碍物的位置与高度，于是完全拷贝过来为己用。

var levelMap=[
    [0, 0, 0, 0, 0, 50, 60, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 10, 0, 0, 0, 30, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 5, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

这个数组就很明确了，把地图分为若干个小块，如果数组为0，表示什么也没有，如果有值，代表障碍物的高度。

然后增加一个变量level代表关数，当方块到右侧胜利时，改为关数增加一，然后调用开局函数，在开局函数增加level的判断，如果当前level不为最大值，则绘制当前关数的地图，然后就可以循环进行游戏了。