• 48
•
汉语作为被使用人数最多的语言，随着中国的强大走向世界。学习汉字成为了许多人的需要，包括中国的儿童也包括外国友人。本课题研究设计的“‘字’学成才”是一款益智游戏，旨在用游戏的方式帮助初学汉字的人认字、学字，并提高学习的兴趣。游戏的开发采用了HTML5、JavaScript 、Cnavas 等最新的前端技术，使游戏无需安装，用浏览器就可以打开，具有良好的用户体验。本论文将对“‘字’学成才”游戏项目的背景、设计、实现、和使用的工具等方面做详细的论述。
1.引言
汉字文化承载着华夏的文明，是世界上最古老的文化之一，中国国际的地位越来越高，学习汉字的热浪席卷整个世界，中国汉字讲究一笔一划，所以对字的熟悉不能光靠嘴说，汉字要从娃娃抓起。在互联网
比较发达的今天，离开互联网很多事情都无法完成，我们享受便利的时候，同时也给孩子也带来“快乐”的童年，传统的书本无法吸引孩子，传统的教育必然也会受到冲击以此来发生改革，每个人都很清楚孩子最基础的就是识字认数，所以结合网络本身将中国的汉字结合在一起，这必然会给孩子带来无穷的乐趣，同时也会提高自己的汉字水平，所以“‘字’学成才”的诞生必然是顺应时代的需要。
2.系统的总体设计
该系统总共分为三个部分：汉字偏旁制作模块、界面设计模块和算法设计模块。
算法流程图如图1所示：
基于HTML5的汉字拼装游戏
常州信息职业技术学院电子工程学院  朱桂林  周凌翱
图1 算法流程图
该算法流程首先判断时间是否超时，如果没有超时会允许用户选择两到3个部首来拼装成汉字，如果用户提交系统会判别汉字是否正确，正确加分并读出汉字读音，错误则给出错误提示。然后清空组字框。
3.界面功能实现
3.1  界面的实现
如图2所示，游戏界面简洁大方。界面左侧是一个4行4列十六个格子，用来显示供选择的偏旁部首。界面右侧是组字框，用来显示组合的汉字。将两个或三个偏旁放在组字框里之后，点击“提交”按钮就会出现结果，答对100分，答错减100分。界面在左上方有一个“等
• 49
•
级”按钮，可以供游戏玩家选择不同的等级挑战，选项有两个部首
字、三个部首字和多部首字。
图2 游戏界面图
3.2  部首叠加
在整个项目中，最大的难点之一的就是图片叠加技术，因为在一般情况下，网页上两张图片叠加在一起，上面的图片会完全覆盖下面的图片，即使两张图片的背景都是透明的也没有用。这个技术难点的解决方案是：使用了HTMl5的Canvas 图片叠加技术（赵增敏，JQuery 全面提速：机械出版社，2010）。具体代码如下：
var chars=new Array();//存放选中的部首的编号 var scores=100; //得分
var next=16;//一次出来十六个图片
for(var i=0;i<16;i++){
aLi[i].index =i;  aLi[i].imgindex =i;  aLi[i].onclick =function(){
var oChar =ElementById (“choosedchar ”);
var oCharImg =Context (“2d ”);
var img =ElementsByTagName (“img ”)[0];  oCharImg.drawImage(img,0,0,300,150);
chars.push(arr2[this.imgindex]);  //再补一个部首  if(next<arr2.length){
aLi[this.index].innerHTML =’<img src =”img/’+arr2[next]+’.png ”>’;
this.imgindex =next++;  }}}
3.3  汉字组装正误的判断
首先，把两个偏旁部首图片组合推加到arr3数组里面，具体代码如下：
Var arr3=[];
arr3.push(imgs[i][j]+imgs[i][j+1]);
if((chars[0]+chars[1]==arr3[i])||(chars[1]+chars[0]==arr3[i])){ scores+=100;
oScore.innerHTML =scores;snackbarFun(); break;}
然后对两个文字组合加以判断，以2+1和1+2为例，无论是先点击哪一个只要两个组合对应在word 数组中，就可以判断出组合是正确的，具体代码如下：
scores+=100;  //分数加100
oScore.innerHTML=scores;    //分数赋值给上面的分数部分如果出现只点击一个图片和图片超出Arr3[]的数量，或者不是Arr3[]的值，则可以判断出提醒为错误，具体代码如下：
if((i==(arr3.length-1))&&((chars[0]+chars[1]).length>0)){ scores-=100; read(“错误”);
oScore.innerHTML =scores; sorrybar(); break;}
4.重难点突破
4.1  汉字叠加的实现
在游戏的实现过程中，我们怎样才能使不同的偏旁叠加在一起形成一个汉字，而且第二个偏旁图片不覆盖掉第一个偏旁图片，因此我们想到了用PhotoShop 把个汉字拆分开来，然后把每张图片制作成透明背景，这样每张图片叠加在一起的时候不会出现覆盖等情况（张晓红，网站前端模块化开发策略研究：计算机时代，2013）。汉字叠加代码实现如下：
var chars=new Array();  //存放选中的部首的编号
var scores=100; //得分 var next=16;
for(var i=0;i<16;i++){
aLi[i].index =i;  aLi[i].imgindex =i;  aLi[i].onclick =function(){
var ElementById
(“choosedchar ”);
var oCharImg =Context(“2d ”);  var ElementsBy TagName
(“img ”)[0];
oCharImg.drawImage(img,0,0,300,150);
chars.push(arr2[this.imgindex]);
（下转第52页）
• 52
•
图5 未加入控制策略电容电压差值图
图6 加入控制策略的电容电压差值图
由仿真波形可以看出：图3在未加入控制策略的情况下，分别加在上下电容上的电压波动明显并逐渐失衡，图4为加入控制策略
后上下电容电压波形曲线，能够发现上下电容电压于0.3秒后，由一开始的不平稳逐渐趋于平衡，最终电压维持在250V 附近。图5和图6比较，能够得出在加入控制策略后上下电容电压差值在逐渐缩小，上下电容电压在容许的误差范围内合理变化。充分说明调节正负短矢量的作用时长，能够中点电位平衡。通过对仿真波形的进一步分析，说明了控制策略的有效性，方法简单而且易于实现。
6  结论
为了消除三电平NPC 整流器中点电位失衡的缺点，本文提出利用调节正负短矢量作用时长，进而控制中点电位失衡。并在Matlab/Simulink 中搭建仿真模型，分析输出波形后得出结论该均压策略有效，能够平衡中点电位。通过仿真比较也能说明本文提出的控制策略具有简单易于实现的优点。
作者简介：
姜尧（1991—），男，汉族，硕士，现就读于上海电机学院，研究方向为电力电子变压器。
邹海荣（1971—），女，汉族，博士，硕士生导师，研究方向为电力系统及其自动化。
（上接第49页）
//再补一个部首  if(next<arr2.length){
aLi[this.index].innerHTML =’<img src=”img/’+arr2[next]+’.png ”>’;
this.imgindex =next++;  }  }
}4.2  语音识别网页设计html代码大全桂林
首先我们调用百度汉字识别API ，具体网址如下：tts.baidu/text2audio?lan=zh&ie=UTF-8&spd=2&text=1
接着将接口返回的 Base64 音频文件代码，通过Blob 将文件转换为二进制：
var data = atob( Data ),    result = new Unit8Array(data.length),    audioUrl;
for(var i=0,l=data.length; i<l; i++) { result[i] = data.charCodeAt(i) }audioUrl = ateObjectURL( new Blob([result.buffer], {type: “audio/mp3”}) );
这样就能拿到一个地址，我们再把每次提交的文字放入到语音接口API 接口中，最后使用Audio 播放
即可：new Audio(audioUrl).
play()；如果每次提交的汉字能在字库中到，我们就读出用户所选择的汉字的读音，如果错误，我们就给出用户一个“错误”的语音提示。
5.系统运行结果
打开程序并运行，用户可以自己选择游戏难度进行挑战，然后会有对应难度的汉字部首供用户选择拼装。
6.总结
本系统的稳定性强、界面人性化、实用性强，采用模块化编程的方法便于系统的升级和功能的扩展。
基金项目：本文受江苏省高等职业院校高水平骨干专业（计算机应用技术）建设项目资助；该成果受“2019年江苏高校‘青蓝工程’优秀教学团队”项目资助。
作者简介：
朱桂林，现就读于常州信息职业技术学院计算机应用技术专业，研究方向为智能电子产品开发。
周凌翱，常州信息职业技术学院计算机应用技术专业教师，研究方向为网页前端技术。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。