纯javascript实现“贪吃蛇”之01-----Day16

能够开发一个游戏，听起来应该很酷吧，我曾无数次的畅想过，却没想过自己真的可以实现。“贪吃蛇”虽然只是一个小小的游戏，但是在这个小游戏中了解了很多javascript的活学活用，学习、思考和实验的过程虽然是痛苦的，也总算是完成了，这酣畅淋漓的感觉确实倍儿爽啊。

这里把这个功能的实现分作两次来完成，是为了更详尽的描述自己的理解和完成过程。

1、需求分析

相信大多数人都玩过“贪吃蛇”这个经典的小游戏，当年机皇诺基亚的很多机子上都会带着，这个就不用带个攻略了吧...

但是现在我们要来实现这个功能，我们就来分析一下我们都需要哪些呢？

1、一个开始按钮；还是主动权掌握在自己手中比较有安全感吧

2、一个贪吃蛇活动的区域；

3、一个贪吃蛇的目标对象；

另外我们还需要一部分相应的事件操作：

4、贪吃蛇的各种碰壁，游戏结束提示：碰到区域边界、碰到贪吃蛇自身

5、键盘的监听事件；上下左右按键进行操作

6、游戏级别的相应操作：贪吃蛇长度、贪吃蛇运行速度、级别

大概需求就这些了，至于功能的具体实现，各种事件的具体实现效果，我就不再赘述了，相信这都不是事，天空五个字。

2、功能实现

我们大概设想如下几个画面：

* 一个是单独的按钮；

* 一个单独的div；

* 一个存在贪吃蛇基础的div；

* 一个存在贪吃蛇和目标对象的div；

这就是我们今天要描述的贪吃蛇的基础：

首先，我们来编写html部分和相应的css样式设计

<div id="test"  style="display:none;"></div>
<div id="ready">
<input type="button" onclick="go()" value="开始游戏" style="width: 100px;height: 50px;background-color: yellow;text-shadow: 2px 2px 3px red;">
</div>

就这样我们实现了第一个画面，当然这个样式可以随便自身设定

接下来，我们要弹出运行空间来：

function go(){
	document.getElementById("ready").style.display="none";
	document.getElementById("test").style.display="block";
	init();
	timerId=setInterval(move, 600);
}

如果说这一个javascript语言的前两句是来显示运行空间，那么我用第三句来显示贪吃蛇的雏形：

function init(){
	var gameZone=document.getElementById("test");

	var oneSnake=createDiv(510,330);
	snakes.push(oneSnake);
	gameZone.appendChild(oneSnake);
	
	var oneSnake=createDiv(510+snakeWidth,330);
	snakes.push(oneSnake);
	gameZone.appendChild(oneSnake);
	
	var oneSnake=createDiv(510+snakeWidth+snakeWidth,330);
	snakes.push(oneSnake);
	gameZone.appendChild(oneSnake);
	
	addFruit();
}

这里就出现问题了，snakeWidth并未在之前出现过，那有如何应用呢？答案显而易见，在javascript的全局变量中设定var snakeWidth=30px，至于为什么要再全局中设定，则是因为在这个应用中它的应用比较频繁；同样，sankes也是在全局变量中进行设定的var snakes=new Array（）；而createDiv（510,330）的方法也是一个要点和开始时候的难点；

function createDiv(left,top){
	var div=document.createElement("div");
	div.style.position="absolute";
	div.style.width="30px";
	div.style.height="30px";
	div.style.background="yellow";
	div.style.border="2px dotted red";
	div.style.left=left+"px";
	div.style.top=top+"px";
	return div;
}

这个牵涉一些document的东西，暂时没法条理的说明白，就明白是用来创建一个div的就好了，好吧，就这么勉强的通过了吧...

接下来就是添加目标对象：

function addFruit(){
	var left = Math.floor(Math.random() * (Math.floor(400/snakeWidth) - 1) + 1) * snakeWidth;
	var top = Math.floor(Math.random() * (Math.floor(400/snakeWidth) - 1) + 1) * snakeWidth;
	for(var i = 0; i < snakes.length ; i++){
		var s = snakes[i];
		if(left == parseInt(s.style.left) && top == parseInt(s.style.top)){
			addFruit();
			return;
		}
	}
	var gameZone=document.getElementById("test");
	fruit = createDiv(left,top);
	gameZone.appendChild(fruit);
}

这里的fruit也是全局变量哦 var fruit；还有这里和之前都出现过的方法gameZone.appenChild实话说我之前还真没关注过这个方法哎。

 这样我们需要的基本界面已经存在了吧，我们明天再来实现：

* 贪吃蛇的运动，也就是go（）方法中出现的move；

* 贪吃蛇运动的判定

* 游戏级别的相关设定

最近又突发奇想，真想弄个网页发到网上啊，哪怕先整个单纯的网页，先发布下过过瘾嘛，回头得整整，嘿嘿.....