js编程--贪吃蛇游戏05

鼎上西瓜刀

于 2018-10-16 21:43:18 发布

阅读量490

点赞数

分类专栏： js编程

本文链接：https://blog.csdn.net/weixin_42914677/article/details/83098018

版权

js编程专栏收录该内容

8 篇文章 0 订阅

订阅专栏

增加功能：

1.修复Bug：只按上下左右键有效、蛇碰到自身弹窗警告。

2.蛇自己能动

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的贪吃蛇05</title>
		<script type="text/javascript" src="jquery-3.3.1.min.js" ></script>
		<script type="text/javascript" src="snake.js" ></script>
	</head>
	<body>
		
	</body>
</html>

snake.js

$(document).ready(function(){
	
	var mapDiv=new Mapdiv();//地图
	var snake=new Snake();//蛇
	var food=new Food();//食物
	
	snake.show();//将蛇显示出来
	food.show();//将食物显示出来
	
	snake.food=food;
	
	$(document).keydown(function(e){//键盘事件
		var code=e.keyCode;
		switch (code){
			case 37:
			case 38:
			case 39:
			case 40:
			snake.code=code;//蛇移动，根据键盘方向
			break;
		}
		
	});
	
	setInterval(
		function(){
			snake.run();
		}, 500);
	
	
});
	function run(){
		alert("ss");
	}
//地图
	var Mapdiv=function(){
		var div=$("<div></div>");
		div.appendTo("body");
		div.css(
			{
				"width": "800px",
				"height": "500px",
				"background-color":"darkgrey",
				"position": "absolute"
		});
		div.attr("id","map_div");
 
	};
	
	//蛇
	var Snake=function(){
		this.code=39;
		var stup=50;	
		this.food=null;
		this.body=[
//			{x:2,y:0,c:"green"},
//			{x:1,y:0,c:"black"},
			{x:0,y:0,c:"blue"}
		];
		
		this.show=function(){
			$("div").remove(".snake_body");
			$.each(this.body, function(i,d) {
				var div=$("<div></div>");
				div.appendTo("#map_div");
				div.attr("class","snake_body");
				
				//alert(d.x);
				div.css(
				{
					"width": "50px",
					"height": "50px",
					"background-color":d.c,
					"position": "absolute",
					"margin-left":d.x*stup,
					"margin-top":d.y*stup
				});
			});
			
		};
		//吃食物
		this.eat=function(food){
			food.eated();
			var color=randomRgbaColor();
			this.body.push({x:this.food.x,y:this.food.y,c:this.food.c});
			
			
			
		};
		//移动
		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;
		    }
//		    alert(code);




			//判断方向
			switch(this.code){
				case 37 :this.body[0].x--;//蛇头向左
				break;
				case 39 :this.body[0].x++;//蛇头向右
				break;
				case 38 :this.body[0].y--;//蛇头向上
				break;
				case 40 :this.body[0].y++;//蛇头向下
				break;
			}
			//判断是否碰壁
			if(this.body[0].x<0||this.body[0].x>15||this.body[0].y<0||this.body[0].y>9){
				alert("碰壁了！！！");
				this.body=[
					{x:2,y:0,c:"green"},
					{x:1,y:0,c:"black"},
					{x:0,y:0,c:"blue"}
				];
			}
			//判断是否碰到蛇身
			for(var i=1;i<this.body.length;i++){
				if(this.body[i].x==this.body[0].x&&this.body[i].y==this.body[0].y){
					alert("已经碰到蛇身了！！");
				}
				
			}
			
			
			//判断是否遇到食物
			if(this.food.x==this.body[0].x&&this.food.y==this.body[0].y){
				this.eat(this.food);
			}
		    this.show();
		   }
			
	};
	//食物
	var Food=function(){
		var div=$("<div></div>");
		div.appendTo("#map_div");
		
		this.x=0;
		this.y=0;
		this.c=randomRgbaColor();
		//食物被吃	
		this.eated=function(){
			this.x=parseInt(Math.random()*16);
			this.y=parseInt(Math.random()*10);
			this.c=randomRgbaColor();
			div.css(
			{
				"background-color":this.c,
				"margin-left":this.x*50,
				"margin-top":this.y*50
		});
		};
		//显示食物
		this.show=function(){
			this.x=parseInt(Math.random()*16);
			this.y=parseInt(Math.random()*10);
			
			div.css(
			{
				"width": "50px",
				"height": "50px",
				"background-color":this.c,
				"position": "absolute",
				"margin-left":this.x*50,
				"margin-top":this.y*50
			});
		};
 
	};
	
//随机生成颜色	
function randomRgbaColor() { //随机生成RGBA颜色
 var r = Math.floor(Math.random() * 256); //随机生成256以内r值
 var g = Math.floor(Math.random() * 256); //随机生成256以内g值
 var b = Math.floor(Math.random() * 256); //随机生成256以内b值
 //var alpha = Math.random(); //随机生成1以内a值
   return `rgb(${r},${g},${b})`; //返回rgba(r,g,b,a)格式颜色,${alpha}
//$("#map_div").text(r);
}