javascript开发贪吃蛇小游戏练习

对于javascript语言，经过一段时间努力，有些入门，所以捣鼓一些小游戏练手。和之前的canvas相比，只能说有些进步，对于游戏图层分布渐渐有了模糊的认知。

对于设计模式，编程开发，算法之类的，任重而道远了。

贪吃蛇小游戏代码有点乱，不过还是写了详细注释，希望对你们有帮助，高手勿喷，我是小白。

游戏设计思路：

1.开始  加速  重来三个按钮，分别触发不同事件

2.贪吃蛇运动，吃食物，碰到边界，路障，咬到自己身体

3.用div展示出来

其中主要是第二步，贪吃蛇运动逻辑。开始时候随机分配坐标xy，然后分配运动方向，根据运动方向对x或者y坐标进行叠加，那么就需要一个数组body来保存相对应的坐标和颜色数据，但贪吃蛇要运动，所以需要setInterval计时器不断刷新数据并且保存进body中。

其次xy数据不断更新时候，就要判断贪吃蛇进行下一步碰到的是什么？空地？障碍物？食物？自己身体？所以就需要第二组障碍数组（多个div表示），一个食物对象{x:x,y:y,color:color}。有了三个数据，就可以根据他们的xy坐标进行比对，相同就返回对应值。

最后，就是接收贪吃蛇xy坐标，颜色等数据动态生成div，为了动起来，每次生成都要先进行界面刷新，删除之前的div，我使用的是removeChild直接删除div节点。

    js代码

function $(id){return document.getElementById(id);}
window.οnlοad=function(){
	
	//开始游戏
	$('start_pause').οnclick=function(){
		game();
		this.disabled='true';
		this.style.background='#4E85FC';
		this.style.cursor='default';
		this.style.color='#eee';
	}
	$('speed').οnclick=function(){
		if(snake.speed<=40){return;}
		snake.speed-=30;
		clearInterval(snak