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

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

HTML5猜灯谜,猜灯谜游戏有哪些？元宵节猜灯谜游戏推荐
猜灯谜游戏有哪些?元宵节即将来临,在元宵节,很多地方都有猜灯谜活动,非常有意思,如果你也想玩,可以下载猜灯谜游戏,那么猜灯谜游戏有哪些呢?下面给大家推荐6款有趣的猜灯谜游戏! 具体如下: 一.疯狂猜灯 ...
用H5开发微信还是开发APP？
用H5开发微信还是开发APP? 随着技术的飞速发展,HTML第五版技术标准的更新,在移动端,由于其相对较低的开发成本及强大的跨平台运行能力,越来越多的信息型产品也开始选择这样轻量级的H5页面进行快速迭 ...
猜数游戏教学设计C语言,猜数游戏优秀教学设计
猜数游戏优秀教学设计篇一:一年级<猜数游戏>教学设计教学内容:北师大版一年级上册第三单元<猜数游戏> 教学目标: 1.在猜数游戏的活动中,进一步理解加减法的意义,探索并掌握 ...
用Python写的猜灯谜软件源代码
主要实现原理:首先通过爬虫获取灯谜的数据,灯谜数据来源于汉谜网,然后用保存为csv或者表格数据,并用用tk做界面进行展示.完整程序代码包请在文末地址下载,程序运行截图: 从汉谜网爬取灯谜程序spide ...
Unity微信小游戏使用微信云开发记录
最近项目上架微信小游戏,首先使用了微信官方sdk转成微信小游戏,官方地址如下: https://github.com/wechat-miniprogram/minigame-unity-webgl-t ...
Yii Framework 开发教程(4) Hangman 猜单词游戏实例
有了前面"Hello,World"的例子和对Yii Framework Web应用基础的介绍,可以开始介绍一个简单而相对而有比较完整的Web应用-Hangman(猜单词游戏),这个 ...
python游戏最简单代码-如何利用Python开发一个简单的猜数字游戏
前言本文介绍如何使用Python制作一个简单的猜数字游戏. 游戏规则玩家将猜测一个数字.如果猜测是正确的,玩家赢.如果不正确,程序会提示玩家所猜的数字与实际数字相比是"大(high)&q ...
python猜数字游戏编程入门_如何利用Python开发一个简单的猜数字游戏
导读热词前言本文介绍如何使用Python制作一个简单的猜数字游戏. 游戏规则玩家将猜测一个数字.如果猜测是正确的,玩家赢.如果不正确,程序会提示玩家所猜的数字与实际数字相比是"大(hi ...
用html做个猜字游戏,HTML5 Canvas API制作简单的猜字游戏
这篇文章主要介绍了借助HTML5 Canvas API制作一个简单的猜字游戏的实例分享,游戏中每局会自动生成一个字母,玩家按键盘来猜测该字母是哪一个,需要的朋友可以参考下二话不说,先上效果图以及源代 ...

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

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

最新文章

热门文章