纯javascript实现“贪吃蛇”之02-----Day17

之前已经成功描绘了“贪吃蛇”的雏形，但是只有其形，未的其神，只有动起来的，能够人为操控了的贪吃蛇才能称之为游戏，今天就来继续分析“贪吃蛇”的运动和游戏的结束提示。

1、让贪吃蛇动起来

在页面中让某件事物动起来，我们用javascript和css有哪些方法呢，想想的话，float，setinterval，settimeout等，而我们实现“贪吃蛇”的运动则需要把控它随时的位置，这样我们来选用setinterval，这样完成如下的实现代码：

function move(){
	for(var i=snakes.length-1;i>0;i--){
		var	s1=snakes[i];
		var s2=snakes[i-1];
		s1.style.left=parseInt(s2.style.left)+"px";
		s1.style.top=parseInt(s2.style.top)+"px";
	}
	var head=snakes[0];
	if (dir=="left") {
		head.style.left=(parseInt(head.style.left)-snakeWidth)+"px";
	} else if(dir == "right"){
		head.style.left =  (parseInt(head.style.left) + snakeWidth) + "px";
	} else if(dir == "top"){
		head.style.top =  (parseInt(head.style.top) - snakeWidth) + "px";
	}else if(dir == "buttom"){
		head.style.top =  (parseInt(head.style.top) + snakeWidth) + "px";
	} 
	checkHit();
}

因为前面提到的snakes是全局变量的数组，我们先来看第一个for循环部分，是后一个div每次都移动到它的上一个div位置，这样只要第一个位置移走，就能构成移动的效果了，所以我们来把head设为第一个div，在下面的if判断句中，就判定了移动方向，这里设dir为全局变量，var dir=“left”；这里最好设置top或者left，因为贪吃蛇的头部是设置在左侧的，如果初始向右的话，则出现问题。最后我们要进行的就是判定了，判定它是否撞到了边界，判断是否吃到了目标对象。

2、判定贪吃蛇的状态

话不多说，直接上代码：

function checkHit(){
	var gameZone=document.getElementById("test");
	runDivWidth=gameZone.style.width;
	runDivHeight=gameZone.style.height;
	var fruitLeft = parseInt(fruit.style.left);
	var fruitTop = parseInt(fruit.style.top);
	var first = snakes[0];
	var firstLeft = parseInt(first.style.left);
	var firstTop = parseInt(first.style.top);
	if(firstLeft == - snakeWidth || firstLeft == runDivWidth || firstTop == - snakeWidth || firstTop == runDivHeight){
		clearInterval(timerId);
		alert("over");
		return; 
	}
	for(var i = 1; i < snakes.length ; i++){
		var s = snakes[i];
		if(firstLeft == parseInt(s.style.left) && firstTop == parseInt(s.style.top)){
			clearInterval(timerId);
			alert("over");
			return; 
		}
	}
	if((dir == "buttom" && (fruitTop - firstTop == snakeWidth) && fruitLeft == firstLeft) || 
	(dir == "top" && (fruitTop - firstTop == -snakeWidth) && fruitLeft == firstLeft) ||
	(dir == "right" && (fruitLeft - firstLeft == snakeWidth) && fruitTop == firstTop)||
	(dir == "left" && (fruitLeft - firstLeft == -snakeWidth) && fruitTop == firstTop)){
				
				var temp = new Array();
				temp.push(fruit);
				snakes = temp.concat(snakes);
				
				addFruit();
			}

}

这里的第一个if判断句，是用来判定是否碰到边界；而for循环则是用来判定是否贪吃蛇碰到了自己；在最后的if判断句中 ，则来判定是否接触到目标对象，如果接触到，则在snake数组中添加一个div，然后重新添加一个目标对象，这里则存在一个问题，会不会出现的目标对象在当前贪吃蛇所在的地方呢，该如何解决呢？

3、级别设定

当当前的游戏速度已经无法阻挡你前进的脚步了，就让对手来的更凶猛一些吧，我们可以改变贪吃蛇的行进速度来增加游戏的难度和挑战性。

function setLevel(){
	var temp = Math.floor(snakes.length / 5);
	if(temp > level){
		level = temp;
		clearInterval(timerId);
		timerId = setInterval(move, timerInterval - level * 10);
	}
	document.getElementById("level").innerHTML = "等级:" + level;
}

到这里，也算是把“贪吃蛇的”的功能实现了，颇有感触，那些年少的梦想并不是那么遥不可及的，还是好好学习吧，想想现在，想要学习的有太多了，还是一个个来吧，简单罗列下接下来的目标：html5、css、javascript的基础知识。

骚年，加油....