众所周知,网站的前端页面结构通常是由div组成,父div包涵子div,子div包涵各类标签和项,前端
同理,游戏中咱们也将若干游戏模块拆分红层,在后续的代码维护和游戏程序逻辑中将更加清晰和便于控制。布局
Web页面的层结构:网站
游戏中的层结构:debug
以下图,用谷歌debug一下能够看到游戏初始化后,自动生成了一个Canvas画布,设计
那么咱们本篇讨论的重点就是在Canvas中如何设计分层。3d
依照“怪兽必须死”这个游戏,主要的玩法就是升级英雄、技能、镶嵌宝石等一系列提高属性的功能来攻击屏幕中心的若干怪兽,blog
同时还有全屏技能,点击攻击等玩法,咱们由浅入深,先从最基本的功能模块划分开始,设想一下,刚进入游戏时咱们最早看到的是什么,教程
应该先加载什么,很显然,首先是游戏背景,其次是英雄层,怪物层,菜单层,头部游戏信息层,对照游戏实际画面,大的分层应以下图:游戏
如上图所示,这是显式分层,是肉眼能看见的大致布局,但在实际开发过程当中,这样的分层并不能知足咱们的要求,开发
就会有隐式的层结构,更加便于开发,例如怪物层,同层级关系下其实还有怪物被攻击时显示的数字层,爆出金币的效果层等等,
这在后续的教程中咱们将深刻浅出,跟随项目进度和源代码,实现一个完整的游戏层结构。
本篇结束 主要是一些基本概念 下一篇咱们将讲解 游戏中图像的加载与操做