贪吃蛇分析和代码（详细版）

最新推荐文章于 2024-04-25 19:01:08 发布

女盆友——ZY

最新推荐文章于 2024-04-25 19:01:08 发布

阅读量1.9k

点赞数 7

文章标签：贪吃蛇分析和代码

本文链接：https://blog.csdn.net/qq_44858151/article/details/98646439

版权

贪吃蛇分析：
1，构造蛇移动的地图====》PC端的游戏浏览器上运行程序（JS）
（1）使用div 创建地图元素
（2）添加到body中
（3）设置地图的元素的样式；js实现
（4）调用地图显示的方法，从而显示浏览器

2，构造食物的对象====》PC端的游戏浏览器上显示（JS）
（1）使用div 创建食物元素
（2）添加到地图元素中
（3）设置食物的元素的样式；====》js实现
（4）调用食物显示的方法，从而显示浏览器div中

3，构造蛇移动对象====》PC端的游戏浏览器上运行程序（JS）
（1）创建一个二为数组：用来构造蛇身，位置，颜色

（2）创建显示蛇的方法
---->初始化蛇3节（for循环创建div元素）
----->添加到地图中
----->设置蛇的样式（二维数组的数据访问）arr[][]
(3)蛇的调用显示蛇的方法（通过实例化的对象.显示蛇的方法名）
display（）====>创建蛇对象中
（4）创建蛇移动方向的方法
----->考虑：通过那种方式控制蛇的移动键盘控制
----->传递键码到蛇移动方向中去
----->使用蛇对象中的属性记录蛇移动的方向
（5）创建蛇移动的方法
----->考虑：计时器控制蛇自动移动过程中，全局属性记录的方法传递进该方法
----->判断：蛇的方向
----->最后重点: 是调用蛇显示的方法从而才能改变蛇的位置(bug:蛇头重复的创建)
----->添加计时器重复调用注意: 该函数在计时器中是使用对象调用. 不能直接调
4,扩展：
1,碰撞到自己身体游戏结束;
2,碰撞到墙壁游戏结束;
3,添加游戏的背景音乐,并且控制暂停和播放;
4,给蛇添加眼睛;
5,设计项目的界面(开始游戏,暂停游戏,记录分数,选择关卡);

5，代码案例

THML文件：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.class_01{
				/*width: 800px;
				height: 600px;*/
				background: url(../img/草地.png) no-repeat;
				margin: auto;
				background-size: 100%;
			}
			#div_01{
				margin: 0;
				padding: 0;
				width: 800px;
				height: 600px;
				border: 1px solid green;
				margin:10px auto;
				position: relative;
			}
			img{
				width: 800px;
				height:600px;
			}
			#div_02{
				width: 200px;
				height:250px;
				position: absolute;
				top:80px;
				left: 690px;
			}
			input{
				display:inline-block;
				width: 200px;
				height: 50px;
				margin: 30px;
				font:bold 25px/50px "微软雅黑";
				color: white;
				background-color: green;
				border-radius: 20px;
			}
		</style>
		<script src="../js/6蛇.js" type="text/javascript" charset="utf-8"></script>
	    <!--<script src="../js/6.1蛇.js" type="text/javascript" charset="utf-8"></script>
	    <script src="../js/6.2蛇.js" type="text/javascript" charset="utf-8"></script>-->
	</head>
	<body>
		<audio></audio>
		<div id="div_01"><img src="../img/首页.jpg"/></div>
		<div id="div_02">
			<input type="button" name="" id="id1" value="开始游戏" />
			<input type="button" name="" id="id2" value="简单模式" />
			<input type="button" name="" id="id3" value="一般模式" />
			<input type="button" name="" id="id4" value="快速模式" />
			<input type="button" name="" id="id5" value="极速游戏" />
		</div>
	</body>
</html>


 var num=0;
function Map(){
	this.width=800;
	this.height=600;
	this.background='green';
	this.div_map=null;
	this.display=function(){
		this.div_map=document.createElement('div');
		this.div_map.style.width=this.width+'px';
		this.div_map.style.height=this.height+'px';
		this.div_map.setAttribute('class','class_01');
//		this.div_map.style.background=this.background;
		this.div_map.style.margin='20px auto';
		this.div_map.style.position='relative';
		document.getElementsByTagName('body')[0].appendChild(this.div_map)
	}
}

//按鈕
function Anniu(){
	this.width=100;
	this.height=100;
	this.background='pink';
	this.div_anniu=null;
	this.display=function(){
		this.div_anniu=document.createElement('button');
		this.div_anniu.style.width=this.width+'px';
		this.div_anniu.style.height=this.height+'px';
		this.div_anniu.innerHTML='暫停按鈕'
//		this.div_anniu.setAttribute('class','class_01');
		this.div_anniu.style.background=this.background;
		this.div_anniu.style.position='absolute';
		this.div_anniu.style.margin='0px -100px';
		this.div_anniu.style.font='bold 30px "微软雅黑"'
		div_Map.div_map.appendChild(this.div_anniu)

	}
//	this.div_anniu.onclick=function(){
//		clearTimeout(times)
//	}
	
}

function Anniu1(){
	this.width=100;
	this.height=100;
	this.background='pink';
	this.div_anniu1=null;
	this.display=function(){
		this.div_anniu1=document.createElement('button');
		this.div_anniu1.style.width=this.width+'px';
		this.div_anniu1.style.height=this.height+'px';
		this.div_anniu1.innerHTML='開始按鈕'
//		this.div_anniu1.setAttribute('class','class_01');
		this.div_anniu1.style.background=this.background;
		this.div_anniu1.style.position='absolute';
		this.div_anniu1.style.margin='110px -100px';
		this.div_anniu1.style.font='bold 30px "微软雅黑"'
		div_Map.div_map.appendChild(this.div_anniu1)

	}
//	this.div_anniu.onclick=function(){
//		clearTimeout(times)
//	}
	
}
function Food(){
	this.width=20;
	this.height=20;
	this.background='red';
	this.div_food=null;
	this.x=0;
	this.y=0;
	this.display=function(){
		if (this.div_food==null) {//为空时进入在碰触蛇的时候只会改变食物位置，不会增加食物
			this.div_food=document.createElement('div');
			this.div_food.style.width=this.width+'px';
			this.div_food.style.height=this.height+'px';
			this.div_food.style.background=this.background;
	//		this.div_food.style.margin='20px auto';
			this.div_food.style.position='absolute';
			div_Map.div_map.appendChild(this.div_food)
		}
		this.x=Math.round(Math.random()*35+4);
		this.y=Math.round(Math.random()*25+4);
		this.div_food.style.left=this.x*this.width+'px';
		this.div_food.style.top=this.y*this.height+'px';
	}
}

function She(){
	this.width=20;
	this.height=20;
	this.SD=null;
	this.kong=null;
//	this.jishu=null;
	this.arr=[
	  [9,6,'black',null],
	  [8,6,'red',null],
	  [7,6,'black',null]
	]
	this.display=function(){
		for (var i=0;i<this.arr.length;i++) {
			if (this.arr[i][3]==null) {
				this.arr[i][3]=document.createElement('div');
				this.arr[i][3].style.width=this.width+'px';
				this.arr[i][3].style.height=this.height+'px';
				this.arr[i][3].style.background=this.arr[i][2];
				this.arr[i][3].style.position='absolute';
				div_Map.div_map.appendChild(this.arr[i][3]);
			}
			this.arr[i][3].style.left=this.arr[i][0]*this.width+'px';
			this.arr[i][3].style.top=this.arr[i][1]*this.height+'px';
		}
	}
	this.shedong=function(aaa){
		switch (aaa){
			case 37:
			this.kong='zuo';
			this.arr[0][3].style.transform='rotateZ(180deg)';
				break;
			case 38:
			this.kong='shang';
			this.arr[0][3].style.transform='rotateZ(-90deg)';
				break;
			case 39:
			this.kong='you';
			this.arr[0][3].style.transform='rotateZ(0deg)';
				break;
			case 40:
			this.kong='xia';
			this.arr[0][3].style.transform='rotateZ(90deg)';
				break;
			default:
				break;
		}
		//div_Yanjing.display()
	}
	this.shedong1=function(SD){
		for (var i=this.arr.length-1;i>0;i--) {
			if (this.kong!=null) {
				this.arr[i][0]=this.arr[i-1][0];
				this.arr[i][1]=this.arr[i-1][1]; 
			}
		}
		switch (this.kong){
			case 'zuo':
			this.arr[0][0]-=1;
				break;
			case 'shang':
			this.arr[0][1]-=1;
				break;
			case 'you':
			this.arr[0][0]+=1;
				break;
			case 'xia':
			this.arr[0][1]+=1;
				break;
			default:
				break;
		}
		if (this.arr[0][0]==div_Food.x&&this.arr[0][1]==div_Food.y) {
			div_Food.display();
			num++;
			div_JS.jishu.innerHTML='第'+num+'分數';
//			div_JS.display(num++)
//			this.JS=function(){
//				this.jishu=document.createElement('button');s
//				this.jishu.style.width=100+'px';
//				this.jishu.style.height=100+'px';
//				this.jishu.style.background='pink';
//				this.jishu.innerHTML='第'+num+'分數'
//				div_Map.div_map.appendChild(this.jishu);
//			}
			//表示蛇的最后一行
			//获取x，y
			var x=this.arr[this.arr.length-1][0];
			var y=this.arr[this.arr.length-1][1];
			this.arr.push([x,y,'pink',null])
		
	}
	if(this.arr[0][0]<2||this.arr[0][0]>37||this.arr[0][1]<2||this.arr[0][1]>29){
		//alert('游戏结束');
		//return false;
		//或者用这种方式
		if (confirm('是否从新开始')) {
			window.location.reload()
		} else{
			return false;
		} 
	}
	for (var i=1;i<this.arr.length;i++) {
		if (this.arr[0][0]==this.arr[i][0]&&this.arr[0][1]==this.arr[i][1]) {
			if (confirm('是否从新开始')) {
			   window.location.reload()
		    } else{
			   return false;
		    } 
		}
	}
	div_She.display();
	times=setTimeout('div_She.shedong1()',this.SD)
	}
//	this.JS=function(){
//				this.jishu=document.createElement('button');
//				this.jishu.style.width=100+'px';
//				this.jishu.style.height=100+'px';
//				this.jishu.style.background='pink';
//				this.jishu.innerHTML='第'+num+'分數'
//				this.jishu.style.position='absolute';
//				this.jishu.style.margin='220px -100px';
//				this.jishu.style.font='bold 30px "微软雅黑"'
//				div_Map.div_map.appendChild(this.jishu);
//			}
}
function Js(){
	this.jishu=null;
	this.display=function(n){
		this.jishu=document.createElement('button');
		this.jishu.style.width=100+'px';
		this.jishu.style.height=100+'px';
		this.jishu.style.background='pink';
		this.jishu.innerHTML='第'+num+'分數'
		this.jishu.style.position='absolute';
		this.jishu.style.margin='220px -100px';
		this.jishu.style.font='bold 30px "微软雅黑"'
		div_Map.div_map.appendChild(this.jishu);
	}
}
function Yanjing(){
	this.width=10;
	this.height=10;
	this.yanjing=[
	   [1,0,'red',null],
	   [1,0,'red',null]
	]
	this.display=function(){
		for (var j=0;j<this.yanjing.length;j++) {
			this.yanjing[j][3]=document.createElement('div');
			this.yanjing[j][3].style.width=this.width+'px';
			this.yanjing[j][3].style.height=this.height+'px';
			this.yanjing[j][3].style.background=this.yanjing[j][2]
			this.yanjing[j][3].style.position='relative';
			this.yanjing[j][3].style.borderRadius='50%';
			this.yanjing[j][3].style.left=this.yanjing[j][0]*this.width+'px';
			this.yanjing[j][3].style.top=this.yanjing[j][1]*this.height+'px';
			div_She.arr[0][3].appendChild(this.yanjing[j][3]);
		}
	}
}
		window.onload=function(){
			var div_01=document.getElementById('div_01');
			var div_02=document.getElementById('div_02');
			var id1=document.getElementById('id1');
			var id2=document.getElementById('id2');
			var id3=document.getElementById('id3');
			var id4=document.getElementById('id4');
			var id5=document.getElementById('id5');
			//按鈕一
			id1.onclick=function(){//点击事件
				div_01.style.display='none';
				div_02.style.display='none';
				div_Map=new Map();
				div_Map.display();
			
		//暫停按鈕
		div_Anniu=new Anniu();
	    div_Anniu.display();
	    div_Anniu.div_anniu.onclick=function(){
		   clearTimeout(times)
		   aud.pause()
	    }
    
    //開始按鈕
    div_Anniu1=new Anniu1();
    div_Anniu1.display();
    div_Anniu1.div_anniu1.onclick=function(){
       //div_She.display();
	   //setTimeout(times)
	   div_She.shedong1()
	   aud.play()
    }
	
	div_Food=new Food();
	div_Food.display();
	
	div_She=new She();
	div_She.display();
	div_She.shedong1();
//		div_She.times=setTimeout('div_She.shedong1()',2000)
        div_She.SD=250;
		
//		div_She.JS()
		
	//計算的
	div_JS=new Js();
	div_JS.display();
	
	div_Yanjing=new Yanjing();
	div_Yanjing.display()
	
	//音频标签<audio></audio>
	var aud=document.createElement('audio');
	aud.src='../img/7895.mp3';
	aud.autoplay='autoplay';
	document.getElementsByTagName('body')[0].appendChild(aud);
	
	document.getElementsByTagName('body')[0].onkeydown=function(event){
		div_She.shedong(event.keyCode);
		
	}
}
//按鈕2
id2.onclick=function(){//点击事件
	div_01.style.display='none';
	div_02.style.display='none';
	div_Map=new Map();
	div_Map.display();
	
	//暫停按鈕
	div_Anniu=new Anniu();
    div_Anniu.display();
    div_Anniu.div_anniu.onclick=function(){
	   clearTimeout(times)
	   aud.pause()
    }
    
    //開始按鈕
    div_Anniu1=new Anniu1();
    div_Anniu1.display();
    div_Anniu1.div_anniu1.onclick=function(){
       //div_She.display();
	   //setTimeout(times)
	   div_She.shedong1()
	   aud.play()
    }
	
	div_Food=new Food();
	div_Food.display();
	
	div_She=new She();
	div_She.display();
	div_She.shedong1();
	div_She.SD=200;
//	div_She.JS()
	
	//計算的
	div_JS=new Js();
	div_JS.display();
	
	div_Yanjing=new Yanjing();
	div_Yanjing.display()
	
	//音频标签<audio></audio>
	var aud=document.createElement('audio');
	aud.src='../img/7895.mp3';
	aud.autoplay='autoplay';
	document.getElementsByTagName('body')[0].appendChild(aud);
	
	document.getElementsByTagName('body')[0].onkeydown=function(event){
		div_She.shedong(event.keyCode);
		
	}
}
   //按鈕3
   id3.onclick=function(){//点击事件
		div_01.style.display='none';
		div_02.style.display='none';
		div_Map=new Map();
		div_Map.display();
	
	//暫停按鈕
	div_Anniu=new Anniu();
    div_Anniu.display();
    div_Anniu.div_anniu.onclick=function(){
	   clearTimeout(times)
	   aud.pause()
    }
    
    //開始按鈕
    div_Anniu1=new Anniu1();
    div_Anniu1.display();
    div_Anniu1.div_anniu1.onclick=function(){
       //div_She.display();
	   //setTimeout(times)
	   div_She.shedong1()
	   aud.play()
    }
	
	div_Food=new Food();
	div_Food.display();
	
	div_She=new She();
	div_She.display();
	div_She.shedong1();
	div_She.SD=150;
  //div_She.JS()
	
	//計算的
	div_JS=new Js();
	div_JS.display();
	
	div_Yanjing=new Yanjing();
	div_Yanjing.display()
	
	//音频标签<audio></audio>
	var aud=document.createElement('audio');
	aud.src='../img/7895.mp3';
	aud.autoplay='autoplay';
	document.getElementsByTagName('body')[0].appendChild(aud);
	
	document.getElementsByTagName('body')[0].onkeydown=function(event){
		div_She.shedong(event.keyCode);
		
	}
}
   //按鈕4
   id4.onclick=function(){//点击事件
		div_01.style.display='none';
		div_02.style.display='none';
		div_Map=new Map();
		div_Map.display();
	
	//暫停按鈕
	div_Anniu=new Anniu();
    div_Anniu.display();
    div_Anniu.div_anniu.onclick=function(){
	   clearTimeout(times)
	   aud.pause()
    }
    
    //開始按鈕
    div_Anniu1=new Anniu1();
    div_Anniu1.display();
    div_Anniu1.div_anniu1.onclick=function(){
       //div_She.display();
	   //setTimeout(times)
	   div_She.shedong1()
	   aud.play()
    }
	
	div_Food=new Food();
	div_Food.display();
	
	div_She=new She();
	div_She.display();
	div_She.shedong1();
	div_She.SD=100;
   //div_She.JS()
	
	//計算的
	div_JS=new Js();
	div_JS.display();
	
	div_Yanjing=new Yanjing();
	div_Yanjing.display()
	
	//音频标签<audio></audio>
	var aud=document.createElement('audio');
	aud.src='../img/7895.mp3';
	aud.autoplay='autoplay';
	document.getElementsByTagName('body')[0].appendChild(aud);
	
	document.getElementsByTagName('body')[0].onkeydown=function(event){
		div_She.shedong(event.keyCode);
		
	}
}
//按鈕5
id5.onclick=function(){//点击事件
	div_01.style.display='none';
	div_02.style.display='none';
	div_Map=new Map();
	div_Map.display();
	
	//暫停按鈕
	div_Anniu=new Anniu();
    div_Anniu.display();
    div_Anniu.div_anniu.onclick=function(){
	   clearTimeout(times)
	   aud.pause()
    }
    
    //開始按鈕
    div_Anniu1=new Anniu1();
    div_Anniu1.display();
    div_Anniu1.div_anniu1.onclick=function(){
       //div_She.display();
	   //setTimeout(times)
	   div_She.shedong1()
	   aud.play()
    }
	
	div_Food=new Food();
	div_Food.display();
	
	div_She=new She();
	div_She.display();
	div_She.shedong1();
	div_She.SD=50;
   //div_She.JS()
	
	//計算的
	div_JS=new Js();
	div_JS.display();
	
	div_Yanjing=new Yanjing();
	div_Yanjing.display()
	
	//音频标签<audio></audio>
	var aud=document.createElement('audio');
	aud.src='../img/7895.mp3';
	aud.autoplay='autoplay';
	document.getElementsByTagName('body')[0].appendChild(aud);
	
	document.getElementsByTagName('body')[0].onkeydown=function(event){
		div_She.shedong(event.keyCode);
		
	}
   }
}

女盆友——ZY

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
5
评论
贪吃蛇分析和代码（详细版）

贪吃蛇分析：1，构造蛇移动的地图====》PC端的游戏浏览器上运行程序（JS）（1）使用div 创建地图元素（2）添加到body中（3）设置地图的元素的样式；js实现（4）调用地图显示的方法，从而显示浏览器2，构造食物的对象====》PC端的游戏浏览器上显示（JS）（1）使用div 创建食物元素（2）添加到地图元素中（3）设置食物的元素的样式；====》js实现（4）调...
复制链接

扫一扫