完整版的网页贪吃蛇

最新推荐文章于 2024-07-04 06:34:41 发布

Cpp_cpp_cpp

最新推荐文章于 2024-07-04 06:34:41 发布

阅读量3.5k

点赞数 1

分类专栏： javascript 文章标签：网页游戏 js

本文链接：https://blog.csdn.net/qq_39046727/article/details/79209617

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

寒假无聊在家写的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			//1.定义地图类
			var map;
			var food;
			var snake;
			var length;
			function Map(){
				//属性 高度 宽度 颜色 位置
				//方法 show（）
				this.width=800;
				this.height=400;
				this.color='#dddddd';
				this.position='absolute';
				this._map=null;
				this.overflow="hidden";
				this.show=function(){
					this._map=document.createElement("div");
					this._map.style.width=this.width+"px";
					this._map.style.height=this.height+"px";
					this._map.style.position=this.position;
					this._map.style.overflow=this.overflow;
					this._map.style.backgroundColor=this.color;
					document.getElementsByTagName("body")[0].appendChild(this._map);
				}
			}
			//2.定义食物类
			function Food(){
				this.width=20;
				this.height=20;
				this.color='green';
				this.position='absolute';
				this.x=0;
				this.y=0;
				this._food=null;
				this.show=function(){
					if(this._food==null)
					{
						this._food=document.createElement("div");
						this._food.style.width=this.width+"px";
						this._food.style.height=this.height+"px";
						this._food.style.borderRadius="50%";
						this._food.style.position=this.position;
						this._food.style.backgroundColor=this.color;
						map._map.appendChild(this._food);
					}
					this.x=Math.floor(Math.random()*40);
					this.y=Math.floor(Math.random()*20);	
					this._food.style.left=this.x*20+"px";
					this._food.style.top=this.y*20+"px";
			}
			}
			//3.定义蛇类
			function Snake(){
				this.width=20;
				this.height=20;
				this.position='absolute';
				this.direct='right';
				this.body=[[3,2,'yellow',null],[2,2,'blue',null],[1,2,'blue',null]];
				this.show=function(){
					length=this.body.length;
					for(var i=0;i<length;i++)
					{
						if(this.body[i][3]==null)
						{
							this.body[i][3]=document.createElement("div");
							this.body[i][3].style.width=this.width+"px";
							this.body[i][3].style.height=this.height+"px";
							this.body[i][3].style.borderRadius="50%";
							this.body[i][3].style.position=this.position;
							this.body[i][3].style.backgroundColor=this.body[i][2];	
							this.body[i][3].style.left=this.body[i][0]*20+"px";
							this.body[i][3].style.top=this.body[i][1]*20+"px";
					//追加div元素到map地图
							map._map.appendChild(this.body[i][3]);
						}
						this.body[i][3].style.left=this.body[i][0]*20+"px";
						this.body[i][3].style.top=this.body[i][1]*20+"px";
					}
				}
				this.setDirect=function(code){
					switch(code)
					{
						case 37:
							this.direct="left";
							break;
						case 38:
							this.direct="top";
							break;
						case 39:
							this.direct="right";
							break;
						case 40:
							this.direct="bottom";
							break;
					}
				}
//				this.eat=function(){
//					
//				}
				this.move=function(){
					//出界
					if(this.body[0][0]>39||this.body[0][1]>19||this.body[0][0]<0||this.body[0][1]<0)
					{
						console.log(this.body[0][0]);
						
						if(window.confirm("游戏结束，是否重新开始！")===true) location.href="index.html";
						else 
						    {this.move=null;}
					}
					
					
					if(this.body[0][0]==food.x&&this.body[0][1]==food.y)
					{
						this.body.push([0,0,'blue',null]);
						food.show();
					}
					var length=this.body.length;
					for(var i=length-1;i>0;i--)
					{
						this.body[i][0]=this.body[i-1][0];
						this.body[i][1]=this.body[i-1][1];
					}
					if(this.direct=='right')
					{
						this.body[0][0]+=1;
						
					}
					if(this.direct=='left')
					{
						this.body[0][0]-=1;
						
					}
					if(this.direct=='top')
					{
						this.body[0][1]-=1;
						
					}if(this.direct=='bottom')
					{
						this.body[0][1]+=1;
						
					}
					this.show();
					//碰到自己，没写好哈！！~~11！！~！~！~！！！！！~！~！！！！~！~！
					//写好了
					for(var i=1;i<=length-1;i++)
					{
						if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1])
						{
							if(window.confirm("游戏结束，是否重新开始！")===true) location.href="index.html";
						else 
						    {this.move=null;}
						}
					}
				}
				
			}
				window.function(){
					 map=new Map();
					 map.show();
					 food=new Food();
					 food.show();
					 snake=new Snake();
					 snake.show();
					 setInterval("snake.move()",200);
					 document.function(e){
					 	var code;
					 	code=e.keyCode;
					 	snake.setDirect(code);
					 }
				}
			
			</script>
	</body>
</html>

Cpp_cpp_cpp

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
完整版的网页贪吃蛇

寒假无聊在家写的html> head> meta charset="utf-8" /> title>title> head> body> script> //1.定义地图类 var map; var food; var s
复制链接

扫一扫

专栏目录