HTML5游戏开发/微信游戏开发--猜灯谜游戏源代码分析

最近码友问我：“你的CSDN是不是废了？”，我一看，握了个大草，1年半没更新了……工作、家里琐事太多，每天挤遍全身乳沟也不超过3个小时，所以……所以这全TMD都是借口！有好几个码友问我能不能写点基础的东西，好吧，这段时间利用晚上挤出来的一点时间写了个HTML小游戏——猜灯谜（试玩地址），没有用任何游戏框架，纯JS、CSS，JQuery打造，这里简单地对游戏的运行机制及源代码分析一下（水平有限，欢迎大家指正）。
一、运行机制
游戏分两个场景（js文件里类名为whsgScene），一个是启动场景，另一个是游戏场景


启动场景主要负责预加载游戏场景使用的图片（请各位无视我那拙劣的PS技能），游戏场景负责与玩家交互。
启动场景没什么技术含量，至于那个进度条，实际上是两个DIV，一个带背景图片其z-index高于另一个纯色DIV，进度条滚动效果是用JQuery的animate函数修改纯色DIV的宽度。图片预加载就是new一个Image对象，将其src属性设为要加载的url，在其onload事件中处理滚动条滚动。

游戏场景从上至下分三个部分，上面是信息提示部分（js文件里类名为whsgInfoBox），负责显示剩余时间、答对/错题数及设置菜单；中间部分是谜题部分（js文件里类名为whsgQuessBox），最下面是文字选择区（js文件里类名为whsgSelectBox）。游戏运行机制如下：
1、以Ajax方式从后台随机获取谜题；
2、接着随机生成21个字；
3、将谜题答案随机替换21个字的随机几个字，通过whsgSelectBox对象显示出来，供用户选择；
4、显示whsgQuessBox对象，将谜题显示出来，用户点击文字选择区中的字将显示在谜题下面；判断本题是否回答完毕，如是的话统计答对/错数，并开始出下一题（回答完指定数目的谜题将显示正确率，并提示用户重新开始游戏）。

二、源代码分析
1、随机出题，由于涉及数据库及后台操作，一篇文章讲不完，有机会再讲这部分，先跳过。随机出题就是在前台生成一个随机数，然后以此数调用后台的接口，后台将返回一个JSON对象{r:谜题内容,a:答案,l:答案长度}；
2、随机生成21个字供用户选择，即从一个长字符串g_strChar中随机选择字；
3、替换21个字中的随机几个字（答案有几个字就替换几个字），首先看这21个字（保存在whsgSelectBox.oWS中）中有没有答案中的字，有的话替换并标记出来，接着对未替换的答案中的字进行处理，将它们替换21个字中的随机几个字（还剩几个就替换几个），详细源代码请参见whsgSelectBox.prototype.rWPWA=function(){……}函数，此外，whsgSelectBox对象还负责处理用户点击事件，用户点击一个字后，要将此字显示在谜题面板下面（调用whsgQuessBox对象的uAQ函数），同时将点击的字设置为不可点击（灰色显示），详细代码请参见whsgSelectBox.prototype.dCW=function(i){……}函数；
4、显示用户点击字的代码请参见whsgQuessBox.prototype.uAQ=function©{……}函数，此函数判断用户点击的字数是否与答案字数一样长，是的话判断是否正确，并更新答对/错题数，再随机出题；
最后说一说设置菜单（类名为whsgMenu），只说背景图片设置和背景音乐设置，即从用户手机中选择图片设为背景，从用户手机中选择mp3作为背景音乐播放。出于安全因素，你不能直接将file对象的文件名设置为背景图片或背景音乐，必须用createObjectURL转换一下。如果你不知道答案，点一下调试菜单，屏幕顶部会显示答案。

郴州微信游戏开发 HTML5游戏开发 手机游戏开发 QQ群：367812089