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(snake.timer);
		snake.move();
	}
	$('restart').οnclick=function(){
		window.location.reload(); 
	}
}

//游戏入口
function game(){
	snake.init();
	snake.move();
	
}

//贪吃蛇类
var snake={
	food:{},//食物
	hin:[],//障碍
	body:[],//贪吃蛇身体数组
	direction:1,//方向
	speed:200,//速度
	timer:null,//计时器
	row:35,//行
	col:35,//列
	color:['red','blue','#888'],//颜色
	pause:true,//暂停
	board_div:function(i,j,color,f){
		if(f){var fdiv=$('food');}
		else{var odiv=$('content');}
		var el=document.createElement('div');
		el.id=i+j;
		el.style.cssText='border:1px solid yellow;width:10px;height:10px;background:'+color+';position:absolute;top:0;left:0;';
		el.style.marginTop=j*10+'px';
		el.style.marginLeft=i*10+'px';
		if(f){fdiv.appendChild(el);}
		else{odiv.appendChild(el);}
	},
	scDiv:function(){
		for(var i=0;i<this.body.length;i++){
			var sc=$(this.body[i].x+this.body[i].y);
			var odiv=$('content');
			odiv.removeChild(sc);
		}
	},
	sfDiv:function(){
		var sc=$(this.food.x+this.food.y);
		var odiv=$('food');
		odiv.removeChild(sc);
	},
	//初始化
	init:function(){
		this.hinder();//障碍物
		//产生食物
		var x=Math.floor(Math.random()*35);
		var y=Math.floor(Math.random()*35);
		//蛇头
		var sx=Math.floor(Math.random()*25);
		var sy=Math.floor(Math.random()*25);

		for(var i=0;i<this.hin.length;i++){
			if((sx==x&&sy==y)||(sx==this.hin[i].x&&sy==this.hin[i].y)||(x==this.hin[i].x&&y==this.hin[i].y)){
				sx=Math.floor(Math.random()*25);
				sy=Math.floor(Math.random()*25);
				x=Math.floor(Math.random()*35);
				y=Math.floor(Math.random()*35);
				this.food={x:x,y:y};
			}
		}
		
		this.body.push({x:sx,y:sy,color:this.color[0]});
		this.board_div(x,y,this.color[1],true);//食物
		this.board_div(this.body[0].x,this.body[0].y,this.body[0].color);
		

		document.οnkeydοwn=function(){
			//按键事件
			e=event||window.event;
			switch(e.keyCode){
				case 38://up
					if(snake.direction==2){break;}
					snake.direction=0;
				break;
				case 39://right
					if(snake.direction==3){break;}
					snake.direction=1;
				break;
				case 40://down
				if(snake.direction==0){break;}
					snake.direction=2;
				break;
				case 37://left
				if(snake.direction==1){break;}
					snake.direction=3;
				break;
			}
		}		
	},
	move:function(){//移动
		this.timer=setInterval(function(){
			if(snake.canMove()==-1){clearInterval(snake.timer);alert('game over!!!');}
			else{
				snake.scDiv();//清除蛇
				var _x=snake.nextPos().x;
				var _y=snake.nextPos().y;
				if(snake.canMove()==1){//食物
					var _color=snake.color[0];
					snake.body.unshift({x:_x,y:_y,color:_color});
					snake.sfDiv();//清除食物
					var x=Math.floor(Math.random()*35);
					var y=Math.floor(Math.random()*35);
					snake.food={x:x,y:y};
					snake.board_div(x,y,snake.color[1],true);
				}
				else{
					var _color=snake.nextPos().color;
				}
				snake.body.pop();//擦除蛇数组最后元素
				snake.body.unshift({x:_x,y:_y,color:_color});
				for(var i=0;i<snake.body.length;i++){
					snake.board_div(snake.body[i].x, snake.body[i].y, snake.body[i].color);
				}
			}
			
		},this.speed);
	},
	nextPos:function(){//移动下一步xy值
		var x=this.body[0].x;
		var y=this.body[0].y;
		switch(this.direction){
			case 0:y--;break;//up
			case 1:x++;break;//right
			case 2:y++;break;//down
			case 3:x--;break;//left
		}
		return {x:x,y:y,color:this.body[0].color};
	},
	canMove:function(){//检查下一步
		var x=this.nextPos().x;
		var y=this.nextPos().y;//蛇头坐标
		if(x>=this.row||x<0||y>=this.col||y<0){return -1;}//边界
		//头碰身体
		for(var i=0;i<this.body.length;i++){
			if(this.body[i].x==x&&this.body[i].y==y){
				return -1;
			}
		}
		//食物
		if(this.food.x==x&&this.food.y==y){return 1;}
		//障碍物
		for (var i =0;i<this.hin.length;i++) {
			if(this.hin[i].x==x&&this.hin[i].y==y){return -1;}
		}
		return 0;//空地
	},
	hinder:function(){//障碍
		var hj=Math.floor(Math.random()*10+4);
		var hi=Math.floor(Math.random()*10);
		for(var i=hi;i<20;i++){
			var hdiv=$('hinder');
			var el=document.createElement('div');
			el.id=i;
			el.style.cssText='border:1px solid yellow;width:10px;height:10px;background:'+this.color[2]+';position:absolute;top:0;left:0;';
			el.style.marginTop=hj*10+'px';
			el.style.marginLeft=i*10+'px';
			hdiv.appendChild(el);
			this.hin.push({x:i,y:hj,color:this.color[2]});
		}
		for(var i=hj;i<20;i++){
			var hdiv=$('hinder');
			var el=document.createElement('div');
			el.id=i;
			el.style.cssText='border:1px solid yellow;width:10px;height:10px;background:'+this.color[2]+';position:absolute;top:0;left:0;';
			el.style.marginTop=i*10+'px';
			el.style.marginLeft=hj*10+'px';
			hdiv.appendChild(el);
			this.hin.push({x:hj,y:i,color:this.color[2]});
		}
	}
}

html界面代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>贪吃蛇javascript版本</title>
	<script type="text/javascript" src="js/snake.js"></script>
	<style type="text/css">
		#main{width:400px;height: 420px; margin:0 auto;}
		#content,#food,#hinder{width: 350px;height: 350px;margin-left: 25px;margin-top: 10px;position: relative;border:1px solid red;}
		#food{margin-top: -352px;}
		#hinder{margin-top: -352px;}
		#inp{text-align: center;margin-top: 10px;}
		input{width: 100px;height: 30px;outline: none;border:0;color: #fff;background: #4E85FC;font-size: 14px;cursor: pointer;}
		input:hover{background: #0D58FC;}
	</style>
</head>
<body>
	<div id="main">
		<div id="content"></div>
		<div id="food"></div>
		<div id="hinder"></div>
		<div id="inp">
			<input type="button" id="start_pause" value="开始">
			<input type="button" id="speed" value="速度">
			<input type="button" id="restart" value="重新开始">
		</div>
	</div>
</body>
</html>

完整代码下载