JavaScript 地图两条贪吃蛇添加眼睛 背景音乐

//创建地图Map
var map_div;
var timer;
var snake_eye_left;
var snake_eye_right;
var snake_eye_left1;
var snake_eye_right1;
function Map(){
	this.width=800;
	this.height=600;
	this.color='cyan';
	this.margin='80'+'px'+' auto';
	//创建显示地图的方法
	this.display=function(){
		//用div创建一个元素的节点
		map_div=document.createElement('div');
		map_div.style.width=this.width+'px';
		map_div.style.height=this.height+'px';
		map_div.style.backgroundColor=this.color;	
		map_div.style.margin=this.margin;
		//给地图父元素添加相对定位
		map_div.style.position='relative';
		document.getElementsByTagName('body')[0].appendChild(map_div);			
	}
}
//创建食物 Food
function Food(){
	this.width=20;
	this.height=20;
	this.color='orange',	
	//创建x 和y 轴
	this.x=0;
	this.y=0;	
	//创建显示食物的方法	
	this.display=function(){
		if(this.food_div==null){			
			this.food_div=document.createElement('div');
			this.food_div.style.width=this.width+'px';
			this.food_div.style.height=this.height+'px';
			this.food_div.style.backgroundColor=this.color;
			this.food_div.style.position='absolute';			
			map_div.appendChild(this.food_div);
		}
		//随机食物到地图中
		for(var i=1;i<4;i++){			
			this.x=Math.round(Math.random()*39);
			this.y=Math.round(Math.random()*29);	
			this.food_div.style.left=this.x*this.width+'px';
			this.food_div.style.top=this.y*this.height+'px';							
		}
	}
}

function Food1(){
	this.width=20;
	this.height=20;
	this.color='purple',	
	//创建x 和y 轴
	this.x=0;
	this.y=0;	
	//创建显示食物的方法	
	this.display=function(){
		if(this.food_div1==null){			
			this.food_div1=document.createElement('div');
			this.food_div1.style.width=this.width+'px';
			this.food_div1.style.height=this.height+'px';
			this.food_div1.style.backgroundColor=this.color;
			this.food_div1.style.position='absolute';			
			map_div.appendChild(this.food_div1);
		}
		//随机食物到地图中
		this.x=Math.round(Math.random()*39);
		this.y=Math.round(Math.random()*29);	
		this.food_div1.style.left=this.x*this.width+'px';
		this.food_div1.style.top=this.y*this.height+'px';							
	}
}
//创建蛇Snake
function Snake(){
	this.width=20;
	this.height=20;
	this.direct=null;
	//利用二维数组创建蛇
	snake_arr=[
		[15,6,null,'red'],
		[14,6,null,'green'],
		[13,6,null,'green']
	];
	//创建一个造蛇的方法
	this.display=function(){
		for(var i=0;i<snake_arr.length;i++){
			if(snake_arr[i][2]==null){				
				snake_arr[i][2]=document.createElement('div');
				snake_arr[i][2].style.width=this.width+'px';
				snake_arr[i][2].style.height=this.height+'px';
				snake_arr[i][2].style.position='absolute';
				snake_arr[i][2].style.borderRadius='50%';
				snake_arr[i][2].style.backgroundColor=snake_arr[i][3];
				//给蛇添加两个眼睛
				if(i==0){									
						snake_arr[0][2].setAttribute('class','snake_eye');								
				}				
				map_div.appendChild(snake_arr[i][2]);
			}
			snake_arr[i][2].style.left=snake_arr[i][0]*this.width+'px';
			snake_arr[i][2].style.top=snake_arr[i][1]*this.height+'px';				
		}
		if(snake_eye_left==null&&snake_eye_right==null){
			snake_eye_left=document.createElement('div');
			snake_eye_right=document.createElement('div');
			snake_eye_left.style.position='absolute';
			snake_eye_right.style.position='absolute';							
			snake_eye_left.style.width=5+'px';
			snake_eye_left.style.height=5+'px';
			snake_eye_left.style.borderRadius='50%';
			snake_eye_right.style.borderRadius='50%';
			snake_eye_right.style.height=5+'px';
			snake_eye_right.style.width=5+'px';
			
			snake_eye_right.style.backgroundColor='black';
			snake_eye_left.style.backgroundColor='black';									
			snake_eye_left.style.left=10+'px';
			snake_eye_left.style.top=12+'px';
			snake_eye_right.style.left=10+'px';			
			snake_eye_right.style.top=2+'px';													
			snake_arr[0][2].appendChild(snake_eye_left);
			snake_arr[0][2].appendChild(snake_eye_right);
		}			
	}	
	//创建一个蛇头和蛇身一起移动
	this.move=function(){
		if(this.direct!=null){			
			for(var i=snake_arr.length-1;i>0;i--){
				snake_arr[i][0]=snake_arr[i-1][0];
				snake_arr[i][1]=snake_arr[i-1][1];
			}
			switch (this.direct){
				case 'left':
					snake_arr[0][0]-=1;	
					snake_eye_left.style.left=10+'px';
					snake_eye_left.style.top=12+'px';
					snake_eye_right.style.left=10+'px';			
					snake_eye_right.style.top=2+'px';
					this.direct!='right';
					break;
				case 'up':
					snake_arr[0][1]-=1;					
					snake_eye_left.style.left=2+'px';
					snake_eye_left.style.top=3+'px';
					snake_eye_right.style.top=3+'px';
					snake_eye_right.style.left=12+'px';
					this.direct!='down';
					break;
				case 'right':
					snake_arr[0][0]+=1;
					snake_eye_left.style.left=10+'px';
					snake_eye_left.style.top=12+'px';
					snake_eye_right.style.left=10+'px';			
					snake_eye_right.style.top=2+'px';
					this.direct!='left';
					break;
				case 'down':
					snake_arr[0][1]+=1;				
					snake_eye_left.style.left=2+'px';
					snake_eye_left.style.top=3+'px';
					snake_eye_right.style.top=3+'px';
					snake_eye_right.style.left=12+'px';
					this.direct!='up';
					break;	
				default:
					break;
			}					
		snakes.display();
		}	
		//判断蛇吃到食物
		if((snake_arr[0][0]==foods.x&&snake_arr[0][1]==foods.y)||(snake_arr[0][0]==food_one.x&&snake_arr[0][1]==food_one.y)){
			//alert('碰到了');
			//创建一个div添加到蛇的后面
			var length=snake_arr.length-1;
			var x=snake_arr.length[0];
			var y=snake_arr.length[1];
						
			//创建一个数组元素 添加到数组后面 push 
			snake_arr.push([x,y,null,'yellow']);			
			//吃到食物就添加分数					
			sortNumber+=10;
			foods.display();
			//记录分数			
			food_one.display();
		}		
		//判断蛇撞到墙上
		if(snake_arr[0][0]<0||snake_arr[0][0]>39||snake_arr[0][1]<0||snake_arr[0][1]>29){
			clearTimeout('snakes.move()',200);
			alert('Game over!游戏结束');
			//让音乐暂停
			aduio.pause();
			sortNumber=0;
			return false;
		}
		//判断撞到自己死掉
		for(var i=1;i<snake_arr.length;i++){
			if(snake_arr[0][0]==snake_arr[i][0]&&snake_arr[0][1]==snake_arr[i][1]){
				//clearTimeout('snakes.move()',200);
				alert('撞到自己，GameOver!');
				sortNumber=0;
				aduio.pause();··
				return false;
			}
			snakes.display();
		}
		timer=setTimeout('snakes.move()',200);
	}			
	//首先给定蛇头移动方向
	 this.setDirection=function(direct){
	 	switch (direct){
	 		case 37:
	 			this.direct='left';
	 			//snake_arr[0][0]-=1;
	 			break;
	 		case 38:
	 			this.direct='up';
	 			//snake_arr[0][1]-=1;
	 			break;
	 		case 39:
	 			this.direct='right'
	 			//snake_arr[0][0]+=1;
	 			break;
	 		case 40:
	 			this.direct='down';
	 			//snake_arr[0][1]+=1;
	 			break;	
	 		default:
	 			break;
	 	}
	 	//snakes.display();
	}
}

//创建两条蛇
function Snake_01(){
	this.width=20;
	this.height=20;
	this.direct1=null;
	//利用二维数组创建蛇
	snake_arr_01=[
		[10,9,null,'gold'],
		[9,9,null,'pink'],
		[8,9,null,'pink']
	];	
	//创建另一条蛇的方法
	this.display=function(){
		for(var i=0;i<snake_arr_01.length;i++){
			if(snake_arr_01[i][2]==null){				
				snake_arr_01[i][2]=document.createElement('div');
				snake_arr_01[i][2].style.width=this.width+'px';
				snake_arr_01[i][2].style.height=this.height+'px';
				snake_arr_01[i][2].style.position='absolute';
				snake_arr_01[i][2].style.borderRadius='50%';
				snake_arr_01[i][2].style.backgroundColor=snake_arr_01[i][3];
				if(i==0){
					snake_arr_01[0][2].setAttribute('class','snake_eye1');		
				}
				map_div.appendChild(snake_arr_01[i][2]);
			}
			snake_arr_01[i][2].style.left=snake_arr_01[i][0]*this.width+'px';
			snake_arr_01[i][2].style.top=snake_arr_01[i][1]*this.height+'px';				
		}
		if(snake_eye_left1==null&&snake_eye_right1==null){
			snake_eye_left1=document.createElement('div');
			snake_eye_right1=document.createElement('div');
			snake_eye_left1.style.position='absolute';
			snake_eye_right1.style.position='absolute';							
			snake_eye_left1.style.width=5+'px';
			snake_eye_left1.style.height=5+'px';
			snake_eye_left1.style.borderRadius='50%';
			snake_eye_right1.style.borderRadius='50%';
			snake_eye_right1.style.height=5+'px';
			snake_eye_right1.style.width=5+'px';
			
			snake_eye_right1.style.backgroundColor='darkgreen';
			snake_eye_left1.style.backgroundColor='darkgreen';									
			snake_eye_left1.style.left=10+'px';
			snake_eye_left1.style.top=12+'px';
			snake_eye_right1.style.left=10+'px';			
			snake_eye_right1.style.top=2+'px';													
			snake_arr_01[0][2].appendChild(snake_eye_left1);
			snake_arr_01[0][2].appendChild(snake_eye_right1);
		}			
	}
	//蛇动起来
	this.snakeMove=function(){
		if(this.direct1!=null){			
			for(var i=snake_arr_01.length-1;i>0;i--){
				snake_arr_01[i][0]=snake_arr_01[i-1][0];
				snake_arr_01[i][1]=snake_arr_01[i-1][1];
			}
			switch (this.direct1){
				case 'left1':
					snake_arr_01[0][0]-=1;										
					snake_eye_left1.style.left=10+'px';
					snake_eye_left1.style.top=12+'px';
					snake_eye_right1.style.left=10+'px';			
					snake_eye_right1.style.top=2+'px';
					break;
				case 'up1':
					snake_arr_01[0][1]-=1;				
					snake_eye_left1.style.left=2+'px';
					snake_eye_left1.style.top=3+'px';
					snake_eye_right1.style.top=3+'px';
					snake_eye_right1.style.left=12+'px';	
					break;
				case 'right1':
					snake_arr_01[0][0]+=1;
					snake_eye_left1.style.left=10+'px';
					snake_eye_left1.style.top=12+'px';
					snake_eye_right1.style.left=10+'px';			
					snake_eye_right1.style.top=2+'px';
					break;
				case 'down1':
					snake_arr_01[0][1]+=1;
					snake_eye_left1.style.left=2+'px';
					snake_eye_left1.style.top=3+'px';
					snake_eye_right1.style.top=3+'px';
					snake_eye_right1.style.left=12+'px';
					break;
				default:
					break;
			}
		}
		snake1.display();
		//判断蛇吃到食物
		if((snake_arr_01[0][0]==foods.x&&snake_arr_01[0][1]==foods.y)||(snake_arr_01[0][0]==food_one.x&&snake_arr_01[0][1]==food_one.y)){
			//alert('碰到了');
			//创建一个div添加到蛇的后面
			var length=snake_arr_01.length-1;
			var x=snake_arr_01.length[0];
			var y=snake_arr_01.length[1];
			//创建一个数组元素 添加到数组后面 push 
			snake_arr_01.push([x,y,null,'blue']);
			//吃到食物就添加分数
			sortNumber+=10;
			foods.display();
			food_one.display();
		}
		
		//判断撞到墙会死亡
		if(snake_arr_01[0][0]<0||snake_arr_01[0][0]>39||snake_arr_01[0][1]<0||snake_arr_01[0][1]>29){
			clearTimeout('snake1.snakeMove()',200);
			alert('Game over!游戏结束');
			//让音乐暂停
			aduio.pause();
			sortNumber=0;
			return false;
		}
		//判断碰到自身就会死亡
		for(var i=1;i<snake_arr_01.length;i++){						
			if(snake_arr_01[0][0]==snake_arr_01[i][0]&&snake_arr_01[0][1]==snake_arr_01[i][1]){
				alert('撞到自己，GameOver!');
				sortNumber=0;
				return false;
			}		
			snake1.display();
		}
		setTimeout('snake1.snakeMove()',200);
	}		
	//控制移动
	this.setdirect=function(direct1){
		switch (direct1){
			case 65:
				this.direct1='left1';
				break;
			case 87:
				this.direct1='up1';
				break;
			case 68:
				this.direct1='right1';
				break;
			case 83:
				this.direct1='down1';
				break;
			default:
				break;
		}
	}
	
}	
//开始按钮
function Start(){
	this.showStartBtn=function(){
		var btn_start=document.createElement('button');
		btn_start.innerHTML='开始';
		btn_start.style.width=50+'px';
		btn_start.style.height=30+'px';
		btn_start.style.backgroundColor='green';
		document.body.appendChild(btn_start);
		btn_start.onclick=function(){				
			//添加默认的向右移动
				/*for(var i=snake_arr.length-1;i>0;i--){
					snake_arr[i][0]=snake_arr[i-1][0];
					snake_arr[i][1]=snake_arr[i-1][1];						
				}
				this.direct='right';
				snake_arr[0][0]+=1;*/
			clearTimeout(timer);
			aduio.play();			
			jianPan.onkeydown=function(event){
				snakes.setDirection(event.keyCode);	
				snake1.setdirect(event.keyCode);
			}
			timer=setTimeout('snakes.move()',200);
		}	
	}
} 
//暂停按钮
function Stop(){
	this.showStopBtn=function(){
		var btn_stop=document.createElement('button');		
		btn_stop.innerHTML='暂停';
		btn_stop.style.width=50+'px';
		btn_stop.style.height=30+'px';
		btn_stop.style.backgroundColor='red';		
		document.body.appendChild(btn_stop);
		btn_stop.onclick=function(){
			clearTimeout(timer);
			aduio.pause();
		}		
	}
}

var maps;
var foods;
var snakes;
var startBtn;
var jianPan;
var aduio;

var food_one;
var snake1;
//记录分数
var sortNumber=0;
window.onload=function(){
	//把构造函数的对象实例化出来
	maps=new Map();
	maps.display();
	
	foods=new Food();
	foods.display();
	
	food_one=new Food1();
	food_one.display();
	
	snakes=new Snake();
	snakes.display();
	snakes.move();
	
	snake1=new Snake_01();
	snake1.display();
	snake1.snakeMove();
	
	//开始按钮
	startBtn=new Start();
	startBtn.showStartBtn();
	//结束按钮
	stopBtn=new Stop();
	stopBtn.showStopBtn();
			
	jianPan=document.getElementsByTagName('body')[0];
		//键盘事件控制蛇的移动
	/*jianPan.onkeydown=function(event){
			//确定键盘事件添加进来
			//W--87  A-65  S--83 D--68
			//alert(event.keyCode);
			//snakes.setDirection(event.keyCode);				
			//键盘事件时候清除另一个计时器
		snake1.setdirect(event.keyCode);
	}*/			
	//得分板
	var sortBank = document.createElement('div');
	sortBank.style.Position='absolute';		
	sortBank.innerHTML = '得分:';
	//给个类名设置样式
	sortBank.className = 'sortBank';
	document.body.appendChild(sortBank);
	//分数
	var sort = document.createElement('div');
	sort.innerHTML = sortNumber;
	sortBank.appendChild(sort);	
	//更新分数
	setInterval(function(){
		sort.innerHTML = sortNumber;
	}, 1000);	
	
	//添加背景音乐
	aduio=document.createElement('audio');
	aduio.src='img/bg.mp3';
	aduio.autoplay='autoplay';
	//document.getElementsByClassName('body')[0].appendChild(aduio);
	document.body.appendChild(aduio);
}