基于HTML5的跨平台游戏设计与实现

游戏要跨平台，画面自适应屏幕大小是非常关键的一步。刚好JS提供了window.innerWidth（后文以W简称）和window.innerHeight（后文以H简称）两个对象属性获取当前游戏运行环境窗口的宽高。然后再以该宽高为基础，进行游戏的坐标系统的设计。比如当前运行窗口的宽高已知，我们就可以知道窗口的四个顶点坐标，中点坐标等等。无论是游戏UI布局还是游戏对象的移动都变得非常简单。

JS可以在所有的浏览器里运行，而浏览器是手机，电脑设备都自带的系统级软件，这给跨平台游戏带来了极大的便利。解决了设备硬件层的问题。剩下的工作只需将游戏画面的自适应做好，就可以顺利完成一个跨平台游戏的开发。

（三）敌人AI实现

AI是人工智能的简写，是对人的意识，信息，思维过程的模拟。会使玩家体验到更真实的游戏。当然本设计只是设计了几个简单的AI：做直线运动且会在水平线上瞬移的敌人AI，左右水平匀速循环运动的敌人AI以及根据三角函数做弧形运动的AI。以此增加游戏难度和趣味性。

敌人直线运动且会在水平线上瞬移：在update()方法里，根据游戏帧计数器frames(该变量会在后面章节介绍)进行取模算法，实现每隔10帧（一般游戏以60帧运行，那么10帧相当于1/6秒）对当前敌人的position属性进行改变x,y坐标改变，则可以实现该AI动作。我们为了使运动更加拟真，不对position属性直接操作，而是改变敌人的velocity属性为velocity.x = W/2，如此敌人便会在下一帧游戏画面渲染时，瞬间移动到屏幕中央。当检测position.x<0或position.x>W时，也就是到达屏幕窗口边界时，需要对velocity.x作反方向运动：velocity.x = -W/2，以避免移动出屏幕窗口外。

敌人左右水平匀速循环运动：这是在上一个AI基础上变化而来的，需要游戏中每帧都进行一次位置改变。运动所需基础属性，设置velocity.x为当前敌人size。也就是每帧向x正轴运动size像素。这只是单方向，当x正轴坐标到达屏幕边界时，再改变size为-size。同理，当x<0时，也就是坐标到屏幕左边界时，也需要改变回size，如此可实现敌人左右匀速循环运动。

斜线运动AI：该敌人不再是水平线移动，而是以当前点x坐标轴与到屏幕边界的连线成45度夹角方向运动。到达屏幕边界后，再次以45度夹角向x轴反方向运动，循环往复。这里取了下三角函数的小窍门。在坐标系中，求45度的夹角刚好是等腰的。所以每次移动只需要x==y像素就可以。这里设置velocity.x 和velocity.y同时等于size即可。同样需要判定当x到达屏幕边界0和W时，要进行-size反转。

（四）元素绘制

使用JS可以轻松完成游戏元素绘制。设置全局变量canvas = document.getElementById('game');获取html文件的canvas标签。设置全局变量ctx = canvas.getContext("2d");获取canvas上下文。这是canvas API提供给JS绘画交互的核心。canvas.width = W;canvas.height = H;将当前的游戏绘制窗口与设备屏幕大小设置为一样。

（五）碰撞检测

游戏边界的碰撞已经在实体类的update()方法里实现了，现在只剩下玩家子弹和敌人的碰撞检测，就可以完成整个游戏的碰撞系统。游戏的碰撞检测方法有很多，2d的就有：多外接图形判别法--1.轴对称包围盒（Axis-Aligned Bounding Box），即无旋转矩形外接图形判别法；2.圆形碰撞；3.圆形与矩形（无旋转）；4.圆形与旋转矩形（以矩形中心点为旋转轴）。光线投射法--1.分离轴定理；2.其他；3.地图格子划分；4.像素检测等等。

碰撞不是本次毕业设计的重点，并且是小游戏类型，因此选用最简单经典的AABB无旋转矩形判定。rect1.x < rect2.x + rect2.width &&rect1.x + rect1.width > rect2.x &&rect1.y < rect2.y + rect2.height &&rect1.height + rect1.y > rect2.y。如图4-1所示：

图4-1 AABB无旋转矩形碰撞判定

（六）游戏循环实现

window.requestAnimationFrame()函数是JS提供的专门为动画和游戏准备的循环函数，该函数会以每秒60次的速度调用，准确的描述是当上一次执行完，会尽最快速度调用下一次执行。

声明一个Game对象，来进行游戏世界的运转控制。加入对象方法loop()控制循环逻辑。window.requestAnimationFrame(Game.loop)，实现游戏每秒60次的调用loop()函数。在loop函数中，给全局帧计数器变量frames++，判定游戏当前场景为开始菜单场景渲染和游戏场景渲染，并且调用实体的render()和update()方法，更新游戏世界中对象的行为逻辑。实体类加上如图4-2所示update()函数，实现游戏中的运动规则计算。

图4-2 游戏实体的位置更新和边界判定

（七）交互实现

首页上一页 1 2 3 下一页尾页 2/3/3

基于HTML5的跨平台游戏设计与实现(二)