var span = document.querySelector('span');
var bodyH = document.body.clientHeight;
//body的可视内容总高度(不包括边框)
//body 盒模型实际大小 = document.body.offsetHeight （包括边框）
var bodyoff = document.body.offsetHeight;
var windowH = document.documentElement.clientHeight;
//获取窗口可视高度，或是说窗口高度
span.onclick = function (){
	myFn(0);//回到顶部
//myFn(bodyoff - windowH);//到达底部
}
	
/*
 * 函数注释
 * 改变元素滚动条高度动画函数
 * end参数是最终高度，不可为空
 * fn参数是计时器结束后执行的回调函数，可为空
 */
function myFn(end,fn){
	//兼容获取scrollTop
	var start = document.body.scrollTop || document.documentElement.scrollTop ;
	//初始高度
	var change = end - start;
	//改变的高度值
	var t = 0;
	//第几步开始
	var endT = 30;
	//执行步数
	var timer = setInterval(function(){
	//设置计时器
		t++;
		//每30毫秒加一步
		if(t >= endT){
		//当到达第30步时执行if里的代码块
			clearInterval(timer);
			//endT步后清除计时器
			//如果fn是一个函数则执行fn()，否则不执行
			fn && fn();
		}
		var sTop = Tween.Bounce.easeOut(t, start, change, endT);//计算每30毫秒移动的距离
		//兼容
		document.body.scrollTop = sTop;
		//非IE可控制
		document.documentElement.scrollTop = sTop;
		//IE可控制
	},30);
}

//获取标签
var time = document.querySelector('.timer');
var score = document.querySelector('.score');
var btn = document.querySelector('button');
var wrap = document.querySelector('.wrap');
//记录关数
var index = 1;
//记录分数
var s =0 ;
//记录颜色
var colors = 0;
var colorArr = ["pink","blue","yellow","green","red","orange"];
//记录游戏状态
var start_bol = false;
//开始按钮
btn.onclick = function(){
	if(start_bol){return}
	//游戏开始后禁止再次执行以下代码
	index = 1;
	start_bol = true;
	//游戏记录为开始
	index++;
	timerFn();
	//启动倒计时
	create(index*index)
	//创建初始 img
}
/*
 * 创建img，关卡升级函数
 * len 是创建几行几列
 */
function create(len){
	wrap.innerHTML = '';
	//创建前清空，防止叠加
	for(var i=0; i < len; i ++){
		var img = document.createElement('img'); 
		//创建 img
		img.src = 'img/1.png';
		//设置地址
		//初始化 img
		img.style.width = (wrap.offsetWidth - (index+1)*5)/index + "px"; 
		img.style.marginLeft = '5px';
		img.style.background = colorArr[colors];
		//添加到wrap
		wrap.appendChild(img);
	}
	//记录下一颜色
	colors ++;
	colors >= colorArr.length? colors = 0: colors;
	//随机改变一张图片
	change(); 
}
/*
 * 随机改变一张图片 并设置点击事件
 */
function change(){
	//随机获取 一个img的位置值
	var rnd = Math.floor(Math.random()*wrap.children.length);
	//修改图片路径
	wrap.children[rnd].src = 'img/2.png';
	//设置点击事件
	wrap.children[rnd].onclick = function(){
		//游戏未开始不可执行以下代码
		if(!start_bol){return}
		//关数增加
		index ++;
		//分数增加
		s += 10;
		//写入页面
		score.innerHTML = "分数：" + s;
		//判断是否通关
		if (index >= 12) {
			alert("你赢了！");
			//游戏状态为结束
			start_bol = false;
			return;
		}
		//进入下一关卡
		create(index*index);
	}
}
/*
 * 倒计时函数
 */
function timerFn(){
	var n = 80;//游戏时间
	var timer = setInterval(function(){
		n -=0.02;
		if (n<= 0) {
			//时间到，清除计时器
			clearInterval(timer);
			//游戏结束
			start_bol = false;
			//时间为0
			n = 0;
		}
		//写入页面
		time.innerHTML = "剩余时间："+ n.toFixed(2) +"秒";
	},20);
}

//显示动画人物的div
var apper = document.querySelectorAll('.wrap .apper');
//时间进度条div
var progress = document.querySelector('.progress');
//分数div
var s = document.querySelector('.score');
//开始游戏按钮
var btn = document.querySelectorAll('.btn');
//显示结果分数
var p = document.querySelector('#p');
//定位显示动画人物的div
var lArr =['31.25%','59.625%','33.125%','62.8125%','65.625%','38.125%','10.3125%','5.9375%','6.5625%'];
var tArr =['23.958333%','29.583333%','40%','44.166666%','61.666666%','57.083333%','61.25%','46.25%','33.333333%'];
for (var i=0; i < apper.length; i++) {
	apper[i].style.top = tArr[i];
	apper[i].style.left = lArr[i];
	apper[i].bol = false;
}
//记录游戏状态
var play_bol = false;
//记录分数
var score = 0;
var rndtimer  = null;
	
for (var i=0;i < btn.length;i++) {
	btn[i].onclick = function(){
	//开始游戏
		score = 0;
		for (var i=0; i < apper.length; i++) {
			apper[i].style.display = 'none';
			apper[i].bol = false;
		}
		progress.style.backgroundSize = ' 100% 100%';
		var parent = this.parentNode;
		parent.style.display = 'none';
		timeFn(20,function(){
			p.innerHTML = s.innerHTML;
			p.parentNode.style.display = 'block';
		});
		rndUp();
		//随机上来
	}
}
//启动打
for (var i=0;i<apper.length;i++) {
	apper[i].onclick = function(){
		if (this.bol) {
			return;
		}
		att(this);
		if (this.flag == 'h') {
			score +=10;
		}else{
			score -=10;
		}
		s.innerHTML = score;
	}
}
	
//打函数
function att(obj){
	var i =6;
	obj.bol = true;
	obj.movebol = true;
	clearTimeout(obj.timer2);
	clearInterval(obj.timer); 
	obj.timer = setInterval(function(){
		i++;
		if (i>=9) {
			clearInterval(obj.timer); 
			obj.timer2 = setTimeout(function(){
				down(obj);
			},50)
			return;
		}
		obj.style.backgroundPositionX = -i*100 +'%';
	},80)
}
//向上出来
function up(obj){
	var i =0;
	obj.movebol = true;
	clearInterval(obj.timer); 
	obj.timer = setInterval(function(){
		i++;
		if (i>=5) {
			clearInterval(obj.timer); 
			obj.timer2 = setTimeout(function(){
				down(obj);
			},300)
			return;
		}
		obj.style.backgroundPositionX = -i*100 +'%';
		obj.style.display = 'block';
	},50)
}
//向下回去
function down(obj, fn){
	var i =5;
	clearInterval(obj.timer); 
	obj.timer = setInterval(function(){
		i--;
		if (i<=0) {
			clearInterval(obj.timer);
			obj.style.display = 'none';
			obj.movebol = false;
			obj.bol = false;
			fn && fn(obj);
		}
		obj.style.backgroundPositionX = -i*100 +'%';
	},50)
}
//计时
function timeFn(timeNum,fn){
	play_bol = true;
	var len = progress.offsetWidth;
	var speed = timeNum;
	var timers = setInterval(function(){
		speed -=0.05;
		if (speed <= 0) {
			rndtimer && clearInterval(rndtimer);
			speed = 0;
			clearInterval(timers);
			for (var i = 0; i < apper.length; i++) {
				clearInterval(apper[i].timer);
			}
			play_bol = false;
			fn && fn();
		}
		progress.style.backgroundSize = (speed/timeNum*100) + "% 100%";
	},50)
}
	
//随机出来
function rndUp(argument){
	rndtimer = setInterval(function(){
		var rnd = Math.floor(Math.random()*apper.length);
		
		if (!apper[rnd].movebol) {
			var str =(Math.random()-0.5>0)?"h":"x";
			apper[rnd].flag = str;
			apper[rnd].style.backgroundImage = "url(img/"+ str + ".png)";
			up(apper[rnd]);
		}
	},500)
}

var arrH = [];
var index = 1;
createDiv(40);
/*
 * createDiv 创建div函数
 * n参数是 创建div的个数
 */
function createDiv(n){
	var n = n || 1;
	for (var i=0; i<n; i++) {
		var div = document.createElement('div');
		div.style.height = rndFn(100,300) + 'px';
		div.innerHTML = index;
		index ++;
		document.body.appendChild(div);
	}
	changeFn();
	//改变div的位置
}
//屏幕宽度大小改变时触发
window.onresize = function  () {
	changeFn();
	//变换div位置
}
//滚动条滚动时触发
window.onscroll = function(){
	//获取滚动条位置
	var sTop = document.body.scrollTop || document.documentElement.scrollTop;
	//获取屏幕高度
	var winH = document.documentElement.clientHeight;
	//当屏幕下方位置到达 每列的最小宽度-50时，创建div
	if (sTop+winH >= arrH[findMin(arrH)-50]) {
		createDiv();
	}
}
/*
 * changeFn 改变div的left和top
 */
function changeFn(){
	//屏幕宽度
	var winW = document.documentElement.clientWidth;
	//获取所有Div
	var aDiv = document.querySelectorAll('div');
	//计算一行可以排几列
	var num = parseInt(winW/(aDiv[0].offsetWidth+10));
	//计算剩余的宽度的一半，就是两边的间隔
	var center = (winW - ((aDiv[0].offsetWidth+10)*num-10))/2;
	arrH = [];
	for (var i = 0; i <aDiv.length; i++) {
		if (i<num) {
		//第一行
			aDiv[i].style.left = center+i*(aDiv[i].offsetWidth+10) + 'px';
			aDiv[i].style.top = 0;
			arrH[i] = aDiv[i].offsetHeight + 10;
			//高度变化，更新数组的高度值
		}else{
			var min = findMin(arrH)
			//找到最小高度
			aDiv[i].style.left = center+min*(aDiv[i].offsetWidth+10) + 'px';
			aDiv[i].style.top = arrH[min]  + 'px';
			arrH[min] += aDiv[i].offsetHeight + 10;
		}
	}
}
/*
 * findMin 找数组中最小值的位置
 * arr参数是要操作的数组
 * 返回（number）数组中最小值的位置
 */
function findMin(arr){
	var min = arr[0];
	var index = 0;
	for (var i=1; i < arr.length; i++) {
		if (min > arr[i]) {
			min = arr[i];
			index = i;
		}
	}
	return index;
}
/*
 * 随机函数
 * min 最小值
 * max 最大值
 */
function rndFn(min , max){
	return Math.round(Math.random()*(max-min)+min);
}

//注：要在服务器下打开
//设置或返回完整的 URL
var url = location.href;
document.write('url -  ' + url + '<br />');
//location.href = 'https://www.baidu.com/'
//设置或返回从井号 (#) 开始的 URL（锚）
var hash = location.hash;
document.write("hash -  "+ hash + '<br />');
//设置或返回当前 URL 的主机名
var hostName = location.hostname;
document.write("hostName -  "+ hostName + '<br />');
//设置或返回当前 URL 的路径部分
var pathname = location.pathname;
document.write("pathname -  "+ pathname + '<br />');
//设置或返回当前 URL 的端口号
var port = location.port;
document.write("port -  "+ port + '<br />');
//设置或返回当前 URL 的协议
var porocol = location.porocol;
document.write("porocol -  "+ porocol + '<br />');
//设置或返回从问号 (?) 开始的 URL（查询部分）
var search = location.search;
document.write("search -  "+ search + '<br />');

window.onload = function(){
	var ul = document.querySelector('ul');
	var aLi = document.querySelectorAll('li');
	
	var winW = window.innerWidth;
	var winH = window.innerHeight;
	for (var i = 0; i < aLi.length; i ++) {
		aLi[i].onmouseenter = function(){
			if(!this.children[0]){
				findUl(this.parentNode);
				return;
			};
			this.children[0].style.display = 'block';
			this.children[0].style.zIndex = '2';
			this.children[0].style.left = '198px';
			this.children[0].style.top = '0px';
			var l = offsetFn(this.children[0]).left;
			var t = offsetFn(this.children[0]).top;
			if (winW - l < ul.offsetWidth) {
				this.children[0].style.left = '-200px';
			}
			if (winH - t < this.children[0].offsetHeight) {
				this.children[0].style.top = -this.children[0].offsetHeight+50 + 'px';
			}
		}
	}
	
	/*
	 * findUl 找到孙子ul并隐藏孙子及孙子下所有的ul
	 * obj 鼠标经过的li的父级ul
	 * 利用递归 逐级找到ul以及ul下所有的ul，并隐藏所有找到的ul
	 */
	function findUl(obj){
		var lis = obj.children;
		//获取元素儿子
		for (var i=0; i < lis.length; i ++) {
			if(lis[i].children[0]){
				findUl(lis[i].children[0]);
				//递归
				lis[i].children[0].style.display = 'none';//找完后，隐藏元素儿子
			}
		}
	}
	
	function offsetFn(obj) {
		var t = 0;
		var l = 0;
		while(obj){			
			var bT = parseInt(getStyle(obj,"borderTopWidth"));
			var bL = parseInt(getStyle(obj,"borderLeftWidth"));
			t += obj.offsetTop + bT ;
			l += obj.offsetLeft + bL;
			obj = obj.offsetParent;
		}
		return {"top":t,"left":l};
	}
	function getStyle(obj,attr) {
		if (obj.currentStyle) {
			return obj.currentStyle[attr];
		}else{
			return getComputedStyle(obj,null)[attr];
		}
	}
	//鼠标右键
	document.oncontextmenu = function(e){
		var e =e || window.event;
		findUl(ul);
		ul.style.display = 'block';
		var x = e.clientX;
		var y = e.clientY;
		if (winW - x < ul.offsetWidth) {
			x -= ul.offsetWidth;
		}
		if (winH - y < ul.offsetHeight) {
			y -= ul.offsetHeight;
		}
		ul.style.left = x + 'px';
		ul.style.top = y + 'px';
		
		return false;
	}
}

var wrap = document.querySelector('.wrap');
var snake = document.querySelectorAll('.wrap div');
var food = document.querySelector('.food');
var stop = document.querySelector('.stop');
var score = document.querySelector('.score span');
stop.style.height = stop.offsetWidth + 'px';
stop.style.lineHeight = stop.style.height;
var snakeArr = [];
var W = wrap.clientWidth;
var H = wrap.clientHeight;
var timer,mT, mL,t, ss; 
stop.onclick = function() {
	if (this.bol) {
		moveFn(snakeArr);
		this.innerHTML = '暂停'
		this.style.backgroundColor = 'red'
		this.bol = false;
	} else {
		clearInterval(timer);
		this.innerHTML = '开始'
		this.style.backgroundColor = 'seagreen'
		this.bol = true;
	}
}
reset();
moveFn(snakeArr);
rndIndex(food);
/*
 * 重置函数
 */
function reset() {
	mT = 0;
	mL = 1;
	t = 500;
	ss = 0;
	score.innerHTML = ss;
	timer = null;
	snakeArr = [];
	for (var i = 0; i < snake.length; i++) {
		snake[i].style.left = (snake.length - 1 - i) * snake[0].offsetWidth + 'px';
		if (i != 0) {
			snake[i].style.backgroundColor = 'greenyellow';
		}
		snakeArr[i] = snake[i];
	}
}
/*
 * 随机位置函数
 * obj参数是位置需要随机的对象
 */
function rndIndex(obj) {
	var foodW = obj.clientWidth;
	var foodH = obj.clientHeight;
	wrap.style.width = x * foodW + 'px';
	wrap.style.height = y * foodH + 'px';
	var x = Math.floor(W / foodW);
	var y = Math.floor(H / foodH);
	rndx = Math.floor(Math.random() * x) * foodW;
	rndy = Math.floor(Math.random() * y) * foodH;
	var arr = objIndex(snakeArr);
	for (var i = 0; i < arr.length; i++) {
		if (rndx == arr[i][0] && rndy == arr[i][1]) {
			rndIndex(obj); //递归
		}
	}
	obj.style.left = rndx + 'px';
	obj.style.top = rndy + 'px';
}
/*
 * 遍历对象数组的位置
 * objArr参数是位置需要遍历的对象数组
 * 返回二维数组[[left,top],[left,top]]
 */
function objIndex(objArr) {
	var sIndex = [];
	for (var i = 0; i < objArr.length; i++) {
		sIndex[i] = [objArr[i].offsetLeft, objArr[i].offsetTop];
	}
	return sIndex;
}
/*
 * 判断函数
 * objArr 判断对象数组
 */
function flagFn(objArr) {
	var snakes = objIndex(objArr);
	var snakeHeadL = snakes[0][0];
	//蛇数组的第一个（头部）left
	var snakeHeadT = snakes[0][1];
	//蛇数组的第一个（头部）top
	var foodLeft = food.offsetLeft;
	var foodTop = food.offsetTop;
	//gameover
	//撞墙
	if (objArr[0].offsetWidth + snakeHeadL > W || objArr[0].offsetHeight + snakeHeadT > H || snakeHeadT < 0 || snakeHeadL < 0) {
		gameover('你的蛇一头撞死在墙上啦！！');
	}
	//吃自己
	for (var i = 1; i < snakes.length; i++) {
		if (snakeHeadL == snakes[i][0] && snakeHeadT == snakes[i][1]) {
			gameover('你的蛇实在是太饿了，自己吃掉自己啦！！');
		}
	}
	//吃到食物
	if (snakeHeadL == foodLeft && snakeHeadT == foodTop) {
		var div = document.createElement('div');
		wrap.appendChild(div);
		div.style.background = 'none';
		div.style.top = '-50px'
		snake = document.querySelectorAll('.wrap div');
		snakeArr[snakeArr.length] = snake[snake.length - 1];
		if (t > 100) {
			t -= 50;ss += 1;
		} else if (t > 10) {
			t -= 10;ss += 4
		}else if(t>1){
			t -= 1;ss += 5;
		}
		moveFn(snakeArr);
		rndIndex(food);
		score.innerHTML = ss;
	}
}
function gameover(str){
	clearInterval(timer);
	alert(str);
}
/*
 * 移动函数
 */
function moveFn(objArr) {
	timer && clearInterval(timer);
	timer = setInterval(function() {
		objArr[objArr.length - 1].style.top = objArr[0].offsetTop + mT * objArr[0].offsetHeight + 'px';
		objArr[objArr.length - 1].style.left = objArr[0].offsetLeft + mL * objArr[0].offsetWidth + 'px';
		objArr[objArr.length - 1].style.backgroundColor = 'darkcyan';
		objArr[0].style.backgroundColor = 'greenyellow';
		objArr.unshift(objArr.pop());
		flagFn(objArr);
	}, t)
}
document.onkeydown = function(e) {
	var e = e || window.event;
	switch (e.keyCode) {
		case 37:if (mL > 0) {retrun}mT = 0;mL = -1;break; //左
		case 39:if (mL < 0) {retrun}mT = 0;mL = 1;break; //右
		case 38:if (mT > 0) {retrun}mT = -1;mL = 0;break; //上
		case 40:if (mT < 0) {retrun}mT = 1;mL = 0;break; //下
	}
}

$.fn.extend({
	fang:function(style) {
		//获取大图图片，如果没有用小图
		var src= $(this).attr('maxsrc')|| $(this).attr('src');
		//小图结构
		var $min = $('<div class="min"><div></div></div>');

		mStyle = {
			minImgW:400,
			divW:150,
			maxW:500
		}
		//mStyle里面添加style的属性，如果重复的会覆盖
		style = $.extend(mStyle,style)

		//大图结构
		var $max = $('<div class="max"><img src="'+src+'" alt=""></div>')
		var $parent = $(this).parent();
		var $fang = $("<div class='fang'></div>");
		$fang.append($min).append($max);
		$min.append($(this));
		$parent.append($fang);

		//设置样式
		$(this).css('width',"100%");

		$fang.css({
			width: style.minImgW,
			height: style.minImgW,
			border: "5px solid black",
			position: "relative"
		})
		$min.css('width',"100%")
		$min.find('div').css({
			width: style.divW,
			height: style.divW,
			background: "yellow",
			opacity: 0.5,
			position: "absolute",
			top: 0,
			left: 0,
			display: "none"			
		})
		$max.css({
			width: style.maxW,
			height: style.maxW,
			border: "5px solid black",
			position: "absolute",
			top: "0",
			left: "100%",
			overflow: "hidden",
			display: "none"
		})

		// JS功能
		var $div = $min.find('div');
		//根据比例计算大图宽度
		var scale = $max.width()/$div .width();
		var maxW = scale*$min.width();
		//设置大图宽度
		$max.find('img').width(maxW);
		//移进移出显示隐藏大图
		$min.hover(function() {
			$div.show();
			$max.show();
		},function() {
			$div.hide();
			$max.hide();
		})
		//移动小方块
		$min.on('mousemove',function(e) {
			var x = e.clientX-$min.offset().left-$div.width()/2;
			var y = e.clientY-$min.offset().top-$div.height()/2;

			if (x<0) {x=0}
			if (x>$min.width()-$div.width()) {
				x=$min.width()-$div.width();
			}
			if (y<0) {y=0}
			if (y>$min.height()-$div.height()) {
				y = $min.height()-$div.height();
			}
			$div.css({left:x,top:y})
			$max.find('img').css({
				marginLeft:-x*scale,
				marginTop:-y*scale
			})
		})

	}	
})

//小图外框DIV
	$('img').fang({
		minImgW:200,
		divW:100,
		maxW:300
	})