锅打灰太狼的jquery小游戏

刚学了jquery，有看到网上视频的案例，如何下载了素材自己也敲了一遍。然后我自己梳理一遍，算是总结复习吧。废话不多说，打地鼠都知道什么样子，接下来就讲讲代码的实现。
1、游戏顶部的进度条，那个开始按钮我就不说了，应该都会的
进度条的减少我们可以联想到是随着时间的变化，width在减少，如果能想到这边问题也就迎刃而解。

var progressWidth = $(\".progress\").width() //获取到满状态的时间宽度。var timer = setinterval(function(){if(progressWidth > 0){ //有长度说明还没结束progressWidth -=2;$(\".progress\").width(progressWidth)}else{clearinterval(timer) //时间结束 关闭}},300)

2、一共九个坑，图片出现的位置也就有九个。所以我定义了一个数组来存储这九个坑的位置。

```javascriptvar arrPos = [{left:\"100px\",top:\"115px\"},{left:\"20px\",top:\"160px\"},{left:\"190px\",top:\"142px\"},{left:\"105px\",top:\"193px\"},{left:\"19px\",top:\"221px\"},{left:\"202px\",top:\"212px\"},{left:\"120px\",top:\"275px\"},{left:\"30px\",top:\"295px\"},{left:\"209px\",top:\"297px\"}];//也就是在这个容器里面插入图片，<div class=\"container\"> 在这里动态插入图片 </div>function getImage(){var $img = $(<img src=\"\" class=\"randomImage\">)$img.css({position:\"absolute\"left:arrPos[0].lefttop:arrPos[0].top})那么如何做到随机来选取图片呢?Math.random()*8随机函数；0-8刚好九个数字Math.round()则数组【】内的数可以用randomIndex = Math.round(Math.random()*8)代码如下$img.css({position:\"absolute\"left:arrPos[randomIndex].lefttop:arrPos[randomIndex].top})}好的呆这里随机生成位置已经成功了。

3、灰太狼和小灰灰冒出来的过程其实是用定时器切换图片 逐帧动画```javascriptvar htl = [\'./images/h0.png\',\'./images/h1.png\',\'./images/h2.png\',\'./images/h3.png\',\'./images/h4.png\',\'./images/h5.png\',\'./images/h6.png\',\'./images/h7.png\',\'./images/h8.png\',\'./images/h9.png\'];var xhh = [\'./images/x0.png\',\'./images/x1.png\',\'./images/x2.png\',\'./images/x3.png\',\'./images/x4.png\',\'./images/x5.png\',\'./images/x6.png\',\'./images/x7.png\',\'./images/x8.png\',\'./images/x9.png\'];// 用数组来放逐帧动画 前五张是冒出来的动画，后面几张是被打的动画。var timer2 = setinterval(function() {//所以我们只要前五张的动画var startIndex = 0;var endIndex = 5if(startIndex >endIndex){$(\".randomImage\").remove(); //如果超过了，移除图片getimage()  //重新获取图片}else{$img.attr(\'src\',type[startIndex]) //一次次的渲染图片形成动画startIndex++}},300)$(\".container\").append($img)//至此，终于可以实现随机冒出动画。

4、点击变成殴打状态，并且加分。我在这边也翻了错误。

//调用这个方法可以改变分数，还可以改变动画1、改变分数很简单 ，定义count = 0 ， ++ 或 -- 就行2、改变动画？ >>>我也蒙了好久，后来看了视频才知道，前面我们用var startIndex = 0;var endIndex = 5 来控制播放哪几张， 所以这边换播放的图片不就OK了。把前面的局部变量换一个写法window.startIndex = 0;window.endIndex =5 ; 写在外面，这是全局变量。function getCount($img){window.startIndex = 5;window.endIndex =9 ;var count = 0$img.one(\"click\",function(){//one只击打一次//判断加或者减，截取src中的数据做比较，判断是哪个。var flag = $(this).attr(\"src\").indexOf(\'h\')>=0if(flag){count++}else{count--}})}

至此核心部分终于回顾结束了。。。。第一次写，这个视频在b站的黑马jquery那边，李南江老师讲的很好，我只是个做习题然后复习的菜鸡。