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

迈不过友情╰ 2022-02-02 18:47 137阅读 0赞

**面对对象的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);
    }