HTML5新技术的应用设计与实现技巧探究

李正君

通常我们将用来描述网页文档构造和超文本标记的一种语言称为HTML5，万维网联盟（W3C ）对于促进SGML（标准通用标记语言）、XML 以及部分新型标记语言例如说SVG（可缩放矢量图形）、XForms 和MathML 等[1]。因为HTML5 具有通信、离线使用、本地存储、设备访问和音频视频等多种功能，导致其逐渐发展为搭建Web 应用的全新标准和HTML 规范，HTML5 在Web 得到了广泛的应用和支持[2]。并且它拥有多样化的标签，使用HTML5 的浏览器不使用任何插件便可以播放音频或视频，Canvas 标签为程序设计者提供了极大的便利，主要包括绘图API 功能和存储功能。Web 中的一项技术性创新便是HTML5，它完全突破了传统模式下游戏需经由Flash 打开的模式。近些年来，人们对于HTML5 的应用更为广泛，越来越多支持HTML5 的浏览器随之问世。本文对HTML5 新技术的应用设计进行了详细的阐述，并基于HTML5 中的画布、实时通信、音频技术、库编程方法，设计并实现一个Web 下的中英文游戏软件。

1 CSS 与界面设计

层叠样式表（cascading style sheet，CSS）的主要作用为展示HTML 元素，并对应用程序的界面进行控制，借助CSS 完成了Web 内容界面同其表现形式的分离工作，进一步提升了程序设计的效率，为程序设计提供了便捷。样式表（Stylesheet）是一个独立存在的文件，能够应用link 元素和CSS中的@import 语句将其放入至HTML 文档。style是全部HTML 都支持的一种元素，可以将其放置在HTML 文档中。一般情况下样式储存在样式表中，能够有效减少HTML 中的一些非内容元素，并且将全部样式储存于文件中，便于管理。

通常情况下使用样式表的位置对其范限加以控制，假如一个样式表适用性较强，那么应将其储存至网站的根目录中。如果适用性较弱，例如只适用于某一文档，那么则将其储存至一个目录中。HTML文档中有一个head 部分，可以在其中加入一个link 元素，这样便实现了样式表和HTML 的连接，并且link 元素的href 属性能够指定样式表的URL。全新的CSS3 的特性十分丰富，应用好它的特性有利于达到很多绚丽的效果。打字程序的主要问题是字符串问题，因此界面过于单一，界面上有专门调控音乐的选项，其样式位于word.ass 文件。

2 Ajax 和随机单词生成

Ajax 是在XML 的基础上的一种异步JavaScript，主要功能为描述异步加载页面。过往大多Web 应用都需要包括大量的页面刷新，用户打开某一链接，试图传送至服务器，之后服务器依据用户操作再返回对页面进行刷新。虽然用户只是看到了页面的一丝变化，也需要对整个页面进行刷新，例如公司标志、网站导航、上部区域和下部区域等。将Ajax 应用其中便可以达到只刷新页面一小部分的效果，无需加载其他内容，用户的操作同往常一样便可。

Ajax 的最大优点在于对页面的请求通过异步的方法传送至服务器。并且服务器无需应用全部页面回应请求，在后台对请求进行处理，同时用户仍能够继续浏览页面。脚本则能够依据用户需求加载和创建页面内容，而不会对用户的浏览体验造成任何影响。Ajax 有专门的使用范限。它依靠Javascript，所以可能部分浏览器并不支持它。它的关键便是XMLHttpRequest 对象。该对象作为浏览器客户端和服务器之间的媒介而存在。过往的请求都通过浏览器发送，而JavaScript 则可以自主传达请求，同时也可以自主相应。本游戏软件设计所应用的单词便获得于数据库。因为纯Java Script只可以运行于IE 浏览器，并且安全性不高。所以该程序使用Ajax 技术和服务器进行交互，应用GET方式提供给服务器一个随机账号，之后得到该账号对应的单词。

3 JQuery 库和字符判断

JQuery 库是一种合并CSS3 的轻量级JavaScript 库，可以兼容多种浏览器。JQuery 库便于用户处理Web 文档、事件和多种特效。当JavaScript 问世后，Web 的网页内容不再是单一的文本，它的交互性得到了极大的改善。并且JavaScript 是一种解释性较强的脚本语言，往往只能借助Web 浏览器去进行部分操作但无法同普通意义的程序那样自主运转，因为它还需要Web 浏览器的解释执行。JavaScript 的优势在于它对DOM 的操作，进而生成诸多JavaScript 特效[3]。

游戏中亟需解决的问题是字符串问题，而JavaScript 的String 对象提出了很多解决方法和相关属性，有利于解决字符串问题，打字游戏中判断和识别输入字符是重中之重。在主界面点击smallgame 便可以进入到游戏中，游戏过程中屏幕上方会随机掉落字母或数字，用户输入相应的键便能够将其清除。当这些字母或字掉落至底部时，如果用户尚未消除，那么生命值则会减少，如果生命值为9，游戏结束。

对于按键事件onkeydown。因为FireFox 和IE具有不同的处理函数，所以处理时也应分别进行处理。在Firefox 中需要一个参数，对应按键的字符是which 属性在IE 或其他浏览器不需要的参数，相应按键字符是event.keyCode。该模式需要着手解决的问题是用户对于按键的分析以及如何正确消除字母块和数字块。解决方法便是每次生成字母块和数字块时，将其放入数组，当该块下降至底部，将其从数组中清除，所以当用户敲击正确的字符，正确的字符也会消失。在 HTML 中 ，该函数适用于字母和数字块的生成，并能够展示动画特效[4]。

4 localStorage 与模式设定

因为创建一个数据库储存统计分数但变量为1，所以数据库具有复杂性，所以便可以使用HTML5的新特性，localStorage（本地存储）功能，它的目的是取代之前的cookie。但是该特性也有一个BUG，可以将用户硬盘占满。如果想正确使用这一特性，就必须保证浏览器不会被清除缓存，因为localStorage 的存储数据和cookie 具有一致性。

当用户设置好单词数进入游戏时，屏幕会从数据库中获得单词及释义并随机显示出来，并将该单词某一字母空出以下划线替代，用户可在空缺处填入对应的字母，如果正确则会进入下一单词，全部完成便会显示用户分数。游戏中遇到用户不会的单词可以点击NEXT 按钮进入下一单词，或点击BACK返回主菜单，结束游戏。点击设置按钮便可进入设置页面，注意这一选项只适用于游戏模式，用户可以通过该选项设置单词数量，计算时间[5]。

5 Ajax 和服务器交互

使用Ajax 服务器交互首先要建立一个XMLHttpRequest 对象，该对象能够从后台和后台的数据库中实行数据的交换。换而言之，就是说无需加载全部的页面内容，只需要对一部分的网页内容进行更新，也就是局部刷新。创建一个专门的XMLHttpRequest 对象。向服务器传达请求：如果需要将请求传送至服务器，使用XMLHttpRequest 对象的open（）方法和send（）方法，其中open 方法中的method 参数表示请求的种类，既是GET 也可以是POST，其中url 表示在服务器上的具体位置，async 宝石是否存在一些异步请求；send 方法被应用于请求传送至服务器，POST 方法仅应用string。

6 结语

设计并实现一个以Web 为基础的中英文打字游戏软件，并且具有多种功能，如难易度设置、分数、音乐、中/英选择、历史存档等，同时对于HTML5的新特性和新技术，例如Canvas 绘图 API、轻量型动画引擎、本地储存与CSS、JQuery 的结合性设计，达到了动画特效和页面锚定布局控制的效果，有效解决了打字游戏中文本单词选择性较差的问题。并且游戏服务端配置要求较低、画面生动形象、游戏体验感较强、操作容易、可以再多个支持HTML5 的浏览器上运行。