JS原生代码（彩色贪吃蛇）

最新推荐文章于 2023-01-10 22:31:24 发布

置顶叶生无花

最新推荐文章于 2023-01-10 22:31:24 发布

阅读量430

点赞数

分类专栏：记录笔记文章标签：贪吃蛇 JS

本文链接：https://blog.csdn.net/PlayBoyH/article/details/89255310

版权

记录笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			margin:0;
			padding:0;
		}
		.min {
			width: 800px;
			height: 600px;
			margin:0 auto;
			position:relative;
		}
		#map {
			width: 800px;
			height: 600px;
			background: #ccc;
			position:relative;
		}
	</style>
</head>
<body>
	<div class="min">
		<div id="map">
		</div>
	</div>
	<button id="btn">开始游戏</button>
	<script type="text/javascript">
	//赋予map作为游戏的地图
		var map = document.getElementById("map");
		//创建一个小蛇的函数
		function Snake (){
			this.width=20;
			this.height=20;
			this.dir='right';
			this.body=
			[{x:2,y:0}, //蛇的头部
			 {x:1,y:0},	//蛇的身体
			 {x:0,y:0}];//蛇的第二个身体
			//用来显示出来小蛇的身体和头部
			this.display=function(){
				for(var i=0;i<this.body.length;i++){
					if(this.body[i].x!=null){
						var sBody=document.createElement('div');
						this.body[i].flag=sBody;
						sBody.style.width=this.width+'px';
						sBody.style.height=this.height+'px';
						sBody.style.left=this.body[i].x*this.width+'px';
						sBody.style.top=this.body[i].y*this.height+'px';
						//使小蛇脱标
						sBody.style.position='absolute';
						sBody.style.borderRadius='50%';
						//给小蛇的身体加上随机颜色
						sBody.style.background='rgb('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+')';
						//添加小蛇到地图中
						map.appendChild(sBody);
						
					};
					
				};
			};
			//创建一个小蛇跑起来的函数
			this.run=function (){
				//将小蛇头部和身体的位置调换
				for(var i=this.body.length-1;i>0;i--){
					this.body[i].x=this.body[i-1].x;
					this.body[i].y=this.body[i-1].y;
				};	
				//判断小蛇的方向
				switch(this.dir){
					case 'right': 
					this.body[0].x+=1;
					break;
					case 'left':
					this.body[0].x-=1;
					break;
					case 'up':
					this.body[0].y-=1;
					break;
					case 'down':
					this.body[0].y+=1;
					break;
				};
				if(this.body[0].x>39 || this.body[0].x<0 || this.body[0].y<0 ||this.body[0].y>29){
					//alert('sbbbbbbb');
					
					alert('Game Over、你个蠢货居然撞死了！！！');
					alert('总计得分:'+(this.body.length-3));
					clearInterval(timeId);
					//游戏结束重置场地
					for(var i=0;i<this.body.length;i++){
						if(this.body[i].flag!=null){
							map.removeChild(this.body[i].flag);
						}
					};
					this.body=
						[{x:2,y:0}, 
						{x:1,y:0},	
						{x:0,y:0}];
					this.display();
					this.dir='right';
					return false;
				};
				/*
				for(var i=0;i<this.body.length;i++){
					if(this.body[i].flag!=null){
					map.removeChild(this.body[i].flag);
					}
				};
				*/
				//吃到食物，移除食物，并刷新食物
				if(this.body[0].x==ff.x&&this.body[0].y==ff.y){
					map.removeChild(ff.food);
					//给小蛇添加一个新的身体
					this.body.push({x:null,y:null,flag:null});
					//重新刷新食物的坐标
					ff.x=parseInt(Math.random()*39);
					ff.y=parseInt(Math.random()*19);
					//显示食物的位置
					ff.display();
					//判断食物的坐标不能够与蛇的头和身体重叠
					for(var i=0;i<this.body.length-1;i++){
						//如果重叠了 重新显示食物刷新坐标
						if(ff.x==this.body[i].x&&ff.y==this.body[i].y){
							//重新显示出食物
							map.removeChild(ff.food);
							ff.display();
						}else{
							map.removeChild(ff.food);
							ff.display();
						};
					};
					
					
				};
				//ff.display();
				//判断小蛇不能撞自己不然游戏结束
				if(this.body.length>=4){
					for(var i=this.body.length-1;i>0;i--){
						if(this.body[0].x==this.body[i].x&&this.body[0].y==this.body[i].y){
							alert('Game Over、你个傻蛋居然吃自己！！！');
							alert('总计得分:'+(this.body.length-3));
							clearInterval(timeId);
							//游戏结束重置场地
							for(var i=0;i<this.body.length;i++){
								if(this.body[i].flag!=null){
								map.removeChild(this.body[i].flag);
								}
							};
							this.body=
							[{x:2,y:0}, 
							{x:1,y:0},	
							{x:0,y:0}];
							this.display();
							this.dir='right';
							return false;
						};
					};
				};
				
				//删除旧的小蛇
				for(var i=0;i<this.body.length;i++){
						if(this.body[i].flag!=null){
							map.removeChild(this.body[i].flag);
						}
					};
					//重新显示小蛇
					this.display();
			};

		};
		function Food(){
			this.width=20;
			this.height=20;
			//设置小蛇在地图上的随机坐标
			this.x=parseInt(Math.random()*39);
			this.y=parseInt(Math.random()*19);
			//显示出来小蛇要吃的食物
			this.display=function(){
				//创建食物这个元素
				var food = document.createElement('div');
				this.food=food;
				food.style.width=this.width+'px';
				food.style.height=this.height+'px';
				food.style.top=this.y*this.width+'px';
				food.style.left=this.x*this.height+'px';
				food.style.position='absolute';
				food.style.borderRadius='50%';
				food.style.background='green';
				//将食物添加到地图中
				map.appendChild(food);
			};
			
			//this.display();
		};
		//创建小蛇和食物的对象
		var ff=new Food();
		var ss= new Snake();
		//调用食物显示在地图的函数
			ff.display();
			ss.display();
			//获取方向键的键码
		document.body.function (e){
			var ev = e || window.event;
			//console.log(ev.keyCode);
			switch(ev.keyCode){
				case 37:
				if(ss.dir!='right'){
					ss.dir='left';
					//console.log(ev.keyCode);
				};
				break;
				case 38:
				if(ss.dir!='down'){
					ss.dir='up';
				};
				//this.dir='up';
				break;
				case 39:
				if(ss.dir!='left'){
					ss.dir='right';
				};
				break;
				case 40:
				if(ss.dir!='up'){
					ss.dir='down';
				};
				//console.log(this.dir);
				break;
			};
			
		};
		//获取按钮点击开始游戏
		var timeId=null;
		document.getElementById("btn").function(){
			//开始之前先清除下定时器
			clearInterval(timeId);
			//启动小蛇跑起来的定时器
			 timeId=setInterval(function(){
				//调用小蛇跑起来的函数
				ss.run();
			},150);
		};
		
		
	</script>
</body>
</html>

叶生无花

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS原生代码（彩色贪吃蛇）

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin:0; padding:0; } .min { width: 8...
复制链接

扫一扫