摘要：网页上的游戏常采用Flash技术实现，但随着HTML5技术的发展，越来越多的浏览器不再支持Flash。针对当下Flash不再更新的问题，设计并实现了HTML5的海底鱼大作战游戏，采用HTML5、JavaScript、Canvas等前端相关技术进行设计和实现，使该游戏不用依靠Flash便能在网页上实现其动画效果。该文首先结合HTML5的相关发展背景，提出该课题研究背景及其意义，接着介绍关于课题中会使用到的HTML5相关技术及其新特性，之后对该游戏进行可行性分析，同时设计出海底鱼大作战游戏的整体游戏框架并且完成相关功能模块，最终根据设计方案对该游戏功能进行实现并且对课题项目进行测试。
关键词：HTML5;游戏;Canvas;海底鱼
中图分类号：TP391 文献标识码：A
文章编号：1009-3044（2021）31-0097-03
1 引言
随着HTML5技术的不断进步，同时带动了游戏行业的快速发展，游戏在人们生活中随处可见。目前较为成熟的网页技术仍以Flash为平台为主，但随着HTML5技术的快速发展，
Flash已经被越来越多浏览器所禁用。正是由于HTML5技术的日益成熟，网页中较多的功能效果将会采用HTML5技术来实现。目前HTML5技术在支持音频、图像、动画以及与设备交互上具有明显优势，又因为HTML5具有强大的跨平台能力，使得其成为最热门的互联网应用开发技术之一。本文将采用HTML5技术来完成海底鱼大作战游戏的设计与开发。
2 关键技术
2.1 HTML5技术
自从最原始的HTML创建以来，其应用于Web上的效果非常明显，网页效果的展示也变得越来越多元化，HTML5不仅是Web的基础，也是构建互联网网页结构的主要语言。HTML5被认定将成为下一代互联网的标准，也会是构建和呈现互联网内容的语言方式。相比于HTML4，HTML5为网页提供了许多新特性，这些新特性将作为HTML5开创Web时代的基石。
2.2 Canvas画布
Canvas作为HTML5中新元素，使得用户可以通过与应用数据对象的图形进行交互操
初阳明作，不仅使得用户更能理解，而且能带给用户直观的感受。Canvas元素的出现可以直接使用硬件来完成渲染工作，若直接使用该元素将可以完成2D图形渲染，如果再结合WebGL等语言的使用还能完成3D图形渲染，让页面变得丰富。Canvas元素为HTML5中能够支持高性能的动画提供方法，让网页无需安装Flash等插件便可以在浏览器中将图形或动画图像直接展示。
2.3多媒体元素
HTML5中多媒体元素能够支持音频视频是它最大特，其中主要为多媒体进行音频、视频使用支持的是<audio>、<video>这两个标签，该标签使得网页内无需安装插件就可以完成音频、视频的播放。新增的元素使得音频、视频文件在浏览器中的运行摆脱了对插件的依赖，减少了浏览器的污染程序，加快了加载页面的速度，扩展了互联网中对于多媒体技术的发展空间。
2.4 WebSocket通信
HTML5定义了WebSocket协议，使浏览器与服务端能够进行实时通信，还能节省服务端的带宽资源。
怎么向银行贷款 3 海底鱼大作战游戏分析
3.1 技术可行性分析
正是由于HTML5技术的发展为海底鱼大作战游戏实现提供了技术可行性，这其中可概括为三方面的内容：HTML5规范的发展和完善决定了移动终端网络游戏的流行性;浏览器对HTML5新功能和特点的支持为基于网页游戏的应用程序提供环境和平台;互联网公司的参与为网页游戏的发展提供了强大的技术支持。
饮酒驾驶处罚 3.2 推广和应用的可行性分析
网页游戏的流行是有一定的原因，其轻便、跨平台性、无需占用较大的内存，这便使得其越来越受欢迎。根据易观智库数据统计，2019年中国网页游戏市场规模达到109亿元，2020年虽降至99亿元，但其所占规模也是巨大的。之前的网页游戏大部分都是基于PC端，且需要Flash的承载，而目前HTML5技术在移动端也有了巨大成就，且其自带的画图等轻便功能将为手机端网页游戏的推行产生重要的影响。目前，HTML5的2D绘画效果与Flash效果相媲美，但其耗电和稳定性等功能相比于Flash则是相当大的改进。
3.3 用户体验分析
宋洋个人资料 网页游戏的制作完成服务的将是用户，而用户体验则是用户在玩此游戏时的主观感受。以人为本的游戏设计理念将是网页等游戏发展的长久之计，一个不以用户为导向的产品将不会受到用户的欢迎，特别是在更具竞争力的IT行业。本文的海底鱼大作战游戏则需要将用户体验放在第一位，并且还需将HTML5的交互性体现出来。本文的用户体验主要还是体现在以下方面：1）丰富的视觉效果;2）游戏体验时间;3）网页的高效性。其中网页的高效性是指除了视觉效果之外，良好的Web应用环境也能提高用户体验。如果为了做出酷炫的视觉效果，忽略掉网页加载时间等问题，用户可能会放弃此网页游戏。由此可见，高速、方便、快捷的网页对于用户体验的重要性。
4 海底鱼大作战游戏设计与实现
4.1 游戏框架设计
通过对HTML5新特性的了解，遵循网页游戏制作结构清晰、视图控制等相分离的原则，设计出海底鱼大作战游戏的游戏框架，其基本流程如图1所示：
其中可以将海底鱼大作战游戏流程大致分为三大过程：初始化——主循环——结束。胡定欣三级
王喜微博 1）加载资源与配置
在剛刚开始启动游戏时，首先加载的是运行海底鱼大作战游戏必备的各类基础资源和配置。
2）主循环
加载资源和配置后后，进入海底鱼大作战游戏的主循环部分，点击开始游戏后便能进入游戏循环中。海底鱼大作战游戏则通过键盘来控制游戏中鲨鱼的上下左右移动，空格键来控制鲨鱼的猎杀行动。海底鱼大作战游戏中，按下空格键后，鲨鱼就会进行发射子弹的行动，然后更新是否射中反方鱼。事实上，整个过程并不一定需要等到外部设备的操作，有可能是由内部游戏的其他对象引发的，比如说鲨鱼碰到反方任意一条鱼之后就会消失一条生命值。事实上，这部分也可以看出游戏的主要逻辑处理部分，一旦满足退出游戏逻辑，那么游戏主循环就结束，从而结束游戏。为提高用户视觉体验，游戏场景需要被渲染出来。
发布评论