js编程--贪吃蛇游戏05

最新推荐文章于 2023-07-02 16:17:19 发布

鼎上西瓜刀

最新推荐文章于 2023-07-02 16:17:19 发布

阅读量207

点赞数

分类专栏： js编程文章标签：贪吃蛇 js jquery 凯里学院

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

版权

js编程专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在04的基础上进行修改，添加功能如下

1、蛇移动

2、蛇碰壁

3、吃食物

注意，需要下载jquery-3.3.1.min.js

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();//将食物显示出来
	
	$(document).keydown(function(e){//键盘事件
		var code=e.keyCode;
		snake.run(code,food);//蛇移动，根据键盘方向
		
	});
	
});
//地图
	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(){
		var stup=50;	
		
		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:food.x,y:food.y,c:food.c});
			
			
			
		};
		//移动
		this.run=function(code,food){
			//蛇身移动
			// 后一个元素到前一个元素的位置
		    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(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"}
				];
			}
			//判断是否碰到蛇身
			
			
			//判断是否遇到食物
			if(food.x==this.body[0].x&&food.y==this.body[0].y){
				this.eat(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}
}

效果图如下

鼎上西瓜刀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js编程--贪吃蛇游戏05

在04的基础上进行修改，添加功能如下1、蛇移动2、蛇碰壁3、吃食物注意，需要下载jquery-3.3.1.min.js index.html&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;我的贪吃蛇05&lt;/titl..
复制链接

扫一扫