锅打灰太狼的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、一共九个坑，图片出现的位置也就有九个。所以我定义了一个数组来存储这九个坑的位置。

```javascript
var 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"}
    ];
    //也就是在这个容器里面插入图片，
 在这里动态插入图片 
    function getImage(){
	    var $img = $()
	    $img.css({
			position:"absolute"
			left:arrPos[0].left
			top:arrPos[0].top
		})
		那么如何做到随机来选取图片呢?
		Math.random()*8
		随机函数；0-8刚好九个数字
		Math.round()
		则数组【】内的数可以用
		randomIndex = Math.round(Math.random()*8)
		代码如下
		$img.css({
			position:"absolute"
			left:arrPos[randomIndex].left
			top:arrPos[randomIndex].top
		})
	}
	好的呆这里随机生成位置已经成功了。
   

3、灰太狼和小灰灰冒出来的过程其实是用定时器切换图片 逐帧动画
	

```javascript
 var 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 = 5
	if(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')>=0
		if(flag){
			count++
		}else{
			count--
		}
	})
}

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

在这里插入代码片