js怎么在js打地鼠游戏戏中加进度条

来源：蜘蛛抓取(WebSpider) 时间：2016-08-28 04:18 标签： js打地鼠游戏代码
 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
正在努力加载中...
打地鼠游戏js开发代码
下载积分：840
内容提示：打地鼠游戏js开发代码
文档格式：DOC|
浏览次数：235|
上传日期： 15:41:43|
文档星级：
该用户还上传了这些文档
打地鼠游戏js开发代码
官方公共微信& & 演示地址：http://demo.jb51.net/js/mouse/index.html& & 打包下载地址 http://www.jb51.net/jiaoben/32434.html& & 这个是我无聊的时候写的，先看看效果(UI做得比较丑)：& & & & 说明：红色的点击得分100，蓝色的点击扣分100.& & 只是想用js来写个小游戏，顺便练练js的代码。& & 先看html部分：& & html& & 复制代码代码如下:& &&&&&js写的打地鼠游戏
js写的打地鼠游戏
js写的打地鼠游戏，在Chrome下测试的，浏览器兼容没有太考虑。比较简陋！
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
开发技术下载排行　　我们经常会看到，一些站点在首次进入的时候会先显示一个进度条，等资源加载完毕后再呈现页面，大概像这样：
　　然后整个页面的操作就会非常流畅，因为之后没必要再等待加载资源了。尤其是在移动端，或者是页游中，这样做能避免页面出现白屏（等待加载图片），很大程度提升用户体验。那这种技术是如何实现的呢？其实非常简单，本文就来从基础细节探究一番。
为什么需要资源预加载
&&&& 大多时候，我们的页面并不是一次渲染完毕的，而是随着用户的操作，不断修改DOM节点，如果你动态插入了一个图片节点，那么浏览器要马上发一个http请求，把图片加载下来然后渲染在页面上，如果用户此时的网速不佳，那么加载这张图片可能就会消耗几秒钟时间，此时页面上什么都没有（白屏）。最坏的情况，如果你的应用图片很多，半天加载不出几张图，用户很可能就在白屏的那几秒跳走了。在游戏中更严重，主角的图片如果加载不出来，让用户玩空气去？
&&&& 除了在DOM中插入图片节点，其他凡是涉及到要展示一张新图片的操作，浏览器都得即时去请求图片。比如，为某个节点添加如下css类来增加背景图片：
background: url(/t01eddc0.jpg);
　　或者是动态修改了src属性、在canvas绘制图片等，这些都会即时请求新资源。
&&&& 那么，资源预加载为什么能解决上述问题呢？
&&&& 我们预加载的资源，浏览器会缓存下来，再次使用的时候，浏览器会检查是不是已经在缓存中，如果在，则直接用缓存的资源，不发送请求，或者由服务端返回304 not modified(304只带请求头信息，不传输资源)。这样使用一张图片的时间会大大缩减，我们的页面看起来会非常流畅，妈妈再也不用担心用户会跳走了~
&&&& 也就是说，预加载的资源我们并不需要手动保存，由浏览器自动放到缓存了。
资源预加载的场景
&&&& 什么样的项目需要预加载资源呢？
&&& 范围应该锁定单页面应用，SPA的视图一般都是一步一步来呈现的，各种资源通过异步请求来获取，为了追求原生app般的流畅体验，可以把一些资源预加载下来。当然对于一些业务相关的图片资源，也可考虑延迟加载，但延迟加载不是本文讨论的范畴。
&&&& 视图/图片较多的专题页面，或者是需要逐帧图片来完成的动画效果，最好都要做预加载。
&&&& HTML5游戏，图片一般都比较多，而且很多逐帧动画，必须要预加载，事实上一些游戏引擎都会提供相应功能。
&&&& 哪些资源需要预加载呢？
&&&& web中包含的资源有很多种，图片、音视频之类的媒体文件，另外就是js、css文件，这些都需要发送请求来获取。那这些资源难道我们都预加载？
&&&& 当然不是了，预加载也是需要消耗时间的，总不能让用户等你加载个几十秒钟吧。具体预加载哪些资源，需要基于具体的考虑，也跟你的项目相关。以下是一些我的想法：
&&&& js、css文件不需进行预加载。现在写js基本都用requirejs之类的加载器，而且最后都会进行压缩合并，将请求数降到最低，最终只有一个文件，有些团队甚至还将压缩后的代码直接放在行内，这样一个多余的请求都没有了。
&&&& 那么需要预加载的就是媒体文件了，图片、音视频之类。这类资源也得根据实际情况来选择哪些需要预加载。比如大多数页面装饰性图片就需要预加载，而由业务动态获取的图片则无法预加载（预先不知道地址）。用作音效、小动画的音视频可以预加载，一个半小时长的视频就不能预加载了。
预加载的原理与加载进度的获取
&&&& 上面都是纸上谈兵的一些观点，下面我们该从技术的角度来思考一下预加载该如何实现。
&&&& 原理其实也相当简单，就是维护一个资源列表，挨个去加载列表中的资源，然后在每个资源加载完成的回调函数中更新进度即可。
&&&& 以图片为例，大致的代码应该是这样：
var image = new Image();
image.onload = function(){};
image.onerror = function(){};
image.src =
& & &这样就OK啦，图片已经进缓存，留着以后使用吧。
&&&& 再说进度，这个进度严格来讲并不是文件加载的实时进度，因为我们只能在每个文件加载完成的时候执行回调，无法像timeline中那样拿到文件加载的实时进度。
&&&& 计算方法就很简单了，当前加载完的资源个数/资源总数*100，就是加载进度的百分比了。
资源预加载小插件：resLoader.js介绍
&&&& 本文的重点终于来了。。。额
&&&& 根据上面的原理，我写了一个插件，用来做资源预加载。
&&&& 具备的特征如下：
&&&&&&&& 1. 自定义资源列表，用于预加载
&&&&&&&& 2. 自定义onProgress，想展示成进度条还是百分比数字还是个性的设计都可
&&&&&&&& 3. 开始和结束可配置回调函数
&&&&&&&& 4. 只支持图片的预加载
&&&&&&&& 5. 支持amd、cmd加载器加载，同时支持直接用&script&标签引入使用
&&&&&&&& 6. 不依赖其他库
&&&& 用法如下：
var loader = new resLoader({
resources : [
'/t01eddc0.jpg',
'/t01b4ff03b72c7dc6c7.jpg',
'/t01dd90dfbec92074d0.jpg',
'/t01cfec6d87cde457c5.jpg',
'/t01943ced462da67833.jpg',
'/t01943ced462da67833.jpg',
'/t01aa15a7ba7ccb49a7.jpg',
'/t010f1e8badf1134376.jpg',
'/t01cf37ea.jpg',
'/t3e1803e9.jpg',
'/t01cd6a4d4b4bd4457b.jpg'
onStart : function(total){
console.log('start:'+total);
onProgress : function(current, total){
console.log(current+'/'+total);
var percent = current/total*100;
$('.progressbar').css('width', percent+'%');
$('.progresstext .current').text(current);
$('.progresstext .total').text(total);
onComplete : function(total){
alert('加载完毕:'+total+'个资源');
loader.start();
　　各项参数都直接明了，不再多说了。在上面的例子中，我自己定义onProgress函数，做了一个简单的进度条，你也可以做其他实现。函数为你传入了current和total，分别表示当前完成的资源个数和资源总个数，可用于计算进度。
　　效果可看在线demo：
　　另外附上下载地址，感兴趣的朋友可以拿去使用：
再多说两句，关于xhr2新特性
&&&& 前边的废话貌似有点多。。。想直接用插件的下载下去用就好，有问题在此留言讨论。
&&&& 这里想多说的东西是关于加载进度的，我上面说了我们只能获取到的是进度其实是离散的点，不是连续的。其实利用HTML5的xhr2的新特性我们也可以尝试获取更加精确的进度。因为xhr2新增了一个非常有趣的特性：可以从服务端获取文件数据。我们以前从服务端返回的数据都是字符串，现在可以直接返回Blob类型的文件。那么在这里做一个猜想，能不能利用此特性，做更加精确的进度计算呢？我在此处只是提出一种可能性，还未做实践。我们知道xhr2新增的upload属性可以让我们获取到文件上传的进度信息，但对于返回的数据，却无法直接提供进度信息，所以要想依靠它来实现还得做其他工作。
阅读(...) 评论()

我要回帖

更多关于 js打地鼠游戏代码 的文章

 

随机推荐