js编程--贪吃蛇游戏03

js编程–贪吃蛇游戏03

在js编程–贪吃蛇游戏02的基础上修改功能如下：
1、运用了面向对象的编程思想，将蛇和食物分别用对象的方式实现。
2、蛇遇到食物，食物被吃之后，随机生成新的食物

注意：引用jquery-3.3.1.min.js

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的贪吃蛇03</title>
		<script type="text/javascript" src="jquery-3.3.1.min.js" ></script>
		<script type="text/javascript" src="snake.js" ></script>
		<link rel="stylesheet" href="index.css" />
	</head>
	<body>
		<div id="map">
		</div>
	</body>
</html>

index.css

body {
            margin: 0;
            padding: 0;
        }

		#map{
			width: 800px;
			height: 500px;
			margin: 10% auto;
			background-color:darkgrey ;
			position: relative;
		}
		#snake_div{
			width: 50px;
			height: 50px;
			background-color:red ;
			position: absolute;
			
		}
		.food_div{
			width: 50px;
			height: 50px;
			background-color:yellow ;
			position: absolute;
			
		}

snack.js

$(document).ready(function(){
	var map_div=$("#map");
	var s_count=1;//记录蛇身体长度
	var snack=new Snack();
	snack.shownack()
	var food=new Food();
	food.showfood();
	
	var s_h=50;
	var s_w=50;


	var direction="right";//初始运动方向

//	alert("ss");
	
	
	$(document).keydown(function(e){
		var code=e.keyCode;
		
		if(food.x==(snack.x+1)&&food.y==snack.y){
			//alert("吃到食物了！！！！！");
			//吃到食物了，就开加长蛇身
			food.eated();
			return;
		}
		
		snack.movesnack(code);
　　});

function Food(){
	this.x=1;
	this.y=1;	
	var div=$("<div></div>");
	this.showfood=function(){
		this.x=parseInt(Math.random()*16);
		this.y=parseInt(Math.random()*10);
		div.css(
			{
				"width": "50px",
				"height": "50px",
				"background-color":"yellow",
				"position": "absolute",
				"margin-left":this.x*50,
				"margin-top":this.y*50
		});
		div.appendTo(map_div);
	};
	this.eated=function(){
		this.showfood();
	}
}

function Snack(){
	this.x=0;
	this.y=0;
	this.direction="right";
	var div=$("<div></div>");
	this.shownack=function(){
		this.x=0;
		this.y=0;
		div.css(
			{
				"width": "50px",
				"height": "50px",
				"background-color":"red",
				"position": "absolute",
				"margin-left":this.x*50,
				"margin-top":this.y*50
		});
		div.appendTo(map_div);
	};
	this.movesnack=function(code){
		
		switch(code){
			case 37://左
			// 不允许返回，向上的时候不能向下
			if(this.direction!="right"){
				this.direction="left";
				if(this.x<1){
					alert("撞墙了！！！！！");
					snack.shownack();
				}else{
					this.x -=1;
					div.css({"margin-left":this.x*50});
					}
				}
			break;
			case 39://右
			// 不允许返回，向上的时候不能向下
			if(this.direction!="left"){
				this.direction="right";
				if(this.x>15){
					alert("撞墙了！！！！！");
					div.css({"margin-left":0,"margin-top":0});
				}else{
					this.x +=1;
					div.css({"margin-left":this.x*50});
				}	
				}
			break;
			case 38://上
			// 不允许返回，向上的时候不能向下
			if(this.direction!="down"){
				this.direction="up";
				if(this.y<1){
						alert("撞墙了！！！！！");
						div.css({"margin-left":0,"margin-top":0});
					}else{
						this.y -=1;
						div.css({"margin-top":this.y*50});
					}
				}
			break;
			case 40://下
			// 不允许返回，向上的时候不能向下
			if(this.direction!="up"){
				this.direction="down";
				if(this.y>9){
						alert("撞墙了！！！！！");
						div.css({"margin-left":0,"margin-top":0});
					}else{
						this.y +=1;
						div.css({"margin-top":this.y*50});
					}
				}
			break;
			
		}　　
	};
}
});

js编程--贪吃蛇游戏03

猜你喜欢