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

最新推荐文章于 2023-06-19 18:30:04 发布

原创

最新推荐文章于 2023-06-19 18:30:04 发布 · 6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5

本文介绍了如何使用JavaScript和HTML5开发一个猜灯谜游戏，包括游戏的运行机制、预加载图片、游戏场景的构成，以及源代码分析。游戏通过Ajax获取随机谜题，用户在预生成的21个字中选择答案，完成一定数量的题目后显示正确率。文章还提及了背景图片和音乐的设置方法。

最近码友问我：“你的优快云是不是废了？”，我一看，握了个大草，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个字；
　