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

作者：姜照昶; 苏宇^*; 丁凯孟

来源：计算机技术与发展, 2019, 29(12): 167-172.

• HTML5
• 绘图画布
• 本地存储
• Ajax

HTML5是最新一代的HTML规范,在支持HTML5的浏览器上可以不使用插件时实现许多实用且强大的功能。文中利用HTML5的Canvas(画布)、WebSocket(实时通信)、Audio(音频)技术及(javascript) JQuery库编程方法,设计并实现一个基于Web的中英文打字游戏软件。该软件具有用户设置难易度、分数等级、音乐开关、中文/英文单词或文本选择、动态游戏场景选项、历史数据存储与成绩查询等功能,同时利用HTML5的若干新技术和新特性如Canvas绘图API、轻量型动画引擎、localStorage(本地存储)结合CSS和JQuery库的技巧性设计,实现了控制页面的锚定布局和动画特效。用JavaScript实现游戏算法,Access创建数据库储存单词,解决了一般打字游戏中的文本单词选择性差等问题。简洁有趣的字符飞行、消失等动画界面,软件功能实用、界面友好、操作简便,支持多种浏览器运行环境。

• 单位
  中国科学院地理科学与资源研究所; 资源与环境信息系统国家重点实验室; 中国电子科技集团第五十四研究所