基于THML5移动智能引擎设计

邵天会

【摘要】 随着计算机网络的发展我们的工作模式随着改变，计算机网络思维逐渐改变着各个领域，移动终端也提出了更高的要求。进行移动终端智能引擎设计的技术随之改变，从产品的前台到后台的管理，从硬件的速度和功耗，到软件的效率和人性化，原来的技术已经无法满足需求，HTML5的定义给了更多的改变的空间和实现的可能。HTML5的特性和CSS3的优点结合，让移动智能引擎更强。

【关键字】 HTML5 智能移动终端 引擎

一、基于HTML5的优点

网站访问过程中客户端对服务器发出的请求导致服务器压力增大，解决服务器压力瓶颈是我们一直努力的方向。目前应用最广泛的技术是HTML5，通过HTML5和JS的结合，逻辑处理的大部分转移到客户端，服务器端负责接口。我们以往使用的HTML进行移动网站访问，其中嵌入大量的Flash动画，Flash动画不仅需要相应的插架支持，并且需要占用大量的硬件资源。在移动设备中显然不允许，HTML5的出现解决了这个问题。HTML本身的特性让我们实现移动引擎更优化。

HTML5是HTML的第五次修订，2010年推出以来，由于优秀的特点对浏览器的完美支持，得到了业内的广泛支持和应用，2014年10月正式标准化。

HTML5相对传统HTML的优点：

1.跨平台

在Windows、IOS以及Linux平台上HTML5都可以完美运行并显示出优秀的特性，不论手机移动设备或者电脑终端，都完美支持。移动终端应用目前大部分都转向HTML5。

2.硬件要求低

程序员只需要简单配置的电脑就可以进行开发设计，针对用户最关心的运行配置问题，可以说目前任何配置的设备都可以比传统HTML更快运行，比传统HTML显示更优的效果。

3.优秀的动画、视频显示效果

HTML5动画、视频处理能力相比传统HTML更优秀，HTML5利用自身的功能把动画和视频与浏览器进行结合，不需要其他的插件配合，更好的利用硬件資源和网络资源，做到更快的访问和显示，给用户更好的体验，开发人员也更容易开发，并更好的去控制显示格式和效果。

4.canvas标签的应用

HTML5增加了canvas标签来进行图形的设计，对于复杂的图形特别是多维、特效等要求的图形，canvas标签有着优秀的体现，并且给用户更好的视觉效果。

5.媒体访问控制

在传统的HTML中视频通常应用插件支持比如flash等，这种解决方式占用大量的硬件资源，html5的媒体访问控制很好的解决了此类问题，不需要任何插件的支持，浏览器自动支持声音和视频文件的播放，同时针对不同显示大小的终端设备可以进行不同的自动调节。同时对于现在流行的app和一些图像识别等有着良好的支持和优秀的表现。

6.优秀的离线存储

针对用户的本地离线存储html5更好的支持，让用户体验更短的启动时间，更快的网速等特性。

二、移动智能引擎设计

利用HTML5对移动智能引擎进行模块框架设计。移动终端区别PC终端：屏幕大小多样，横屏和竖屏模式切换操作，移动终端硬件资源有限等。本模块设计兼顾了移动终端和PC终端的特性，因此同样适用PC终端。只有部分功能适用移动终端。

游戏的功能模块在软件中占比重大，模块的实现也相对复杂，我们选择游戏作为HTML5移动终端智能引擎的样本，进行游戏的要素实现。找到PC终端和移动终端的共同点进行设计模块，做到适用移动终端的同时满足最大的通用性。

1.动画模块

游戏重要的元素是动画，动画的效果直接影响游戏的代入感和体验感，其他的软件中动画是游戏中的第一要素，丰富的动画效果使游戏的动感大大增强。同样，其他APP中的设计动画展现出的图形、图像元素是必不可少的。HTML5中的canvas可以利用drawImange（）实现基于HTML页面图片的直接操作。

2.声音模块

HTML5利用Audio中的方法可以直接在页面中进行播放声音，虽然很多浏览器对声音格式的要求不一，并且多重声音进行同时播放产生重叠效果时，处理的方式比较特殊，但是Audio的方法很好的解决了此类问题，兼容了各种浏览器，并且让移动终端不需要占用很多资源。

3.资源模块

游戏良好的体验需要资源加载的保障，游戏的每次执行占用了大量的系统资源和硬件资源，同时资源的下载需要良好的网络带宽，加载过慢或者缓存过少，用户的游戏无法顺畅进行，自然无法得到很好的体验，我们将资源模块进行了批量下载处理，解决了此类问题。

4.人物模块

游戏中的基本元素是人物，人物的多样性和共同性同时存在，这里我们参考了面向对象的类的方法，人物的共性进行类的方法设置，多样性进行在此基础上特定的设置，从而实现了资源共享的模块方式。

5.背景模块

背景是游戏发生的地理位置，时间的总和，移动终端具有屏幕小的特点，我们利用HTML5进行所有元素都要展示时，需要进行元素的归类，当某个元素出现时，我们可以在屏幕的某个位置进行按钮设置，按钮的点击会出现该元素的具体属性，这种方法很好的解决了移动重点屏幕小但是又可以方便的展示所有的元素方法。

6.触摸应答模块

现在的移动终端设备大多使用触摸功能，用户的操作主要依靠触摸屏幕来实现，HTML5的媒体控制可以完美解决此类问题，对用户触摸位置即使相应，判断用户要执行的操作内容，屏幕进行相应的应答。

7.数据的离线存储、读取

为了游戏的通畅，我们往往采用部分数据的离线存储，方便游戏随时调用，反映及时，HTML5中的Storage利用localStorage把数据进行离线存储到移动终端保证游戏的流畅度，同时关闭浏览器也不会影响存储。

8.模块之间的逻辑处理

为了各个模块能够按照预先设定逻辑进行执行，本模块起到综合调度功能，对各个模块产生的数据进行分析判断，通过参数进行寻找下个模块入口，进而启动相应的模块。

在开发模块的过程中，主要的问题：

1.干扰性

JS的本身特点，全局变量在各模块中需要注意是否被无意更改，各模块中随时使用私有方法来保护自己本身的变量，并且保证软件的延展性。

2.通用性

我们设计的模块中一类为构造函数模块，一类为具体实现模块。为了达到模块的通用性我们将模块中的基础部分进行类的操作，类包含同样的属性，后者的模块进行了方法的实现，我们对其进行私有方法设置。

3.模块的高效性

移动终端引擎主要应用范围是移动终端，我们移动终端的资源一般是少于PC终端，所以开发模块中要注意模块运行速度，整体提高引擎的速度。

参 考 文 献

[1]陈志泊编著.数据仓库与数据挖掘[M].北京：清华大学出版社，2009，89-106

[2]安淑芝编著.数据仓库与数据挖掘[M].北京：清华大学出版社，2006，150-171

[3]张路斌.HTML5 Canvas游戏开发实战[M].机械工业出版社，2013：100-186

[4]李东博.HTML5+CSS3从入门到精通[M].清华大学出版社，2013：23-59