js小练-贪食蛇

最新推荐文章于 2024-09-19 18:43:55 发布

qw_study

最新推荐文章于 2024-09-19 18:43:55 发布

阅读量837

点赞数 1

分类专栏： javascript 文章标签： function div html up 微软

本文链接：https://blog.csdn.net/qw_study/article/details/6684223

版权

javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

代码保存为html直接运行即

<html>
	<head>
		<style>
			*{
				margin:0px;
				padding:0px;
			}
			.box{
				width:20px;
				height:20px;
				background-color:blue;
				border:1px gray solid;
				position:absolute;
			}
			.sweet{
				width:20px;
				height:20px;
				background-color:green;
				position:absolute;
			}
			#win{
				width:400px;
				height:400px; 
				background-color:gray;	
				border:1px solid;
				margin:0 auto;
				margin-top:50px;
				position:relative;
			}
			#win #text {
				margin:0 auto;
				width:100%;
				font-size:3.5em;
				color:white;
				font-family:"微软雅黑";
				line-height:400px;
				text-align:center;
			}
		</style>
	</head>
	<body>
		<div id="win">
			<div id="text">1</div> 
		</div> 
	</body>

	<script>
		//贪食蛇
		var Snake = function(win) {
			this.win = win;
			this.nodes = Array();
			this.direction = 2;
			
			//增加一个node
			this.addBox = function(x,y) {
				var item = document.createElement("div");
				item.className = "box";
				item.style.left = x;
				item.style.top = y;
				var len = this.nodes.length;
				this.nodes[len] = item;
				win.appendChild(item);
			};
			//初始化
			this.init = function() {
				var x = 200;
				var y = 200;
				this.addBox(x,y);
				//this.addBox(x+20,y);
			};
			//移动
			this.move = function() {
				for (i=0;i<this.nodes.length - 1;i++){
					var node = this.nodes[i];
					var nextNode = this.nodes[i+1];
					node.style.left = nextNode.style.left;
					node.style.top = nextNode.style.top;
				}
				var node = this.nodes[this.nodes.length-1];
				var left = parseInt(node.style.left);
				var top = parseInt(node.style.top);
				if (this.direction == 1) {
					top -= 20;
				}
				if (this.direction == 2) {
					left += 20;
				}
				if (this.direction == 3) {
					top += 20;
				}
				if (this.direction == 4) {
					left -= 20;
				}
				if (this.isOver(left,top)) {
					document.getElementById('text').innerHTML = "GAME OVER";
					clearInterval(interval);
					return;
				}
				if (!sweet.tryEat(left,top)) { 
					node.style.left = left;
					node.style.top = top;
				}
			};
			this.isOver = function(x,y) {
				for (i=0;i<this.nodes.length - 1;i++){
					var node = snake.nodes[i];
					var nx = parseInt(node.style.left);
					var ny = parseInt(node.style.top);
					if (x == nx && y == ny){
						return true;
					}
				}	
				if (x>=400 || x<0 || y<0 || y>=400) {
					return true;
				} else {
					return false;
				}
			}
			//反转
			this.reverse = function() {
				snake.nodes.reverse();
			}
		}

		//糖果
		var Sweet = function() {
			this.item = null;
			this.create = function() {
				this.x = parseInt (Math.random() * 20) * 20;
				this.y = parseInt (Math.random() * 20) * 20;
				this.item = document.createElement("div");
				this.item.className = "sweet";
				this.item.style.left = this.x;
				this.item.style.top = this.y;
				for (var index in snake.nodes ) {
					var node = snake.nodes[index];
					var nx = parseInt(node.style.left);
					var ny = parseInt(node.style.top);
					if (this.x == nx && this.y == ny){
						return this.create();
					}
				}				
				win.appendChild(this.item);
			}
			this.tryEat = function(x,y) {
				var sx = parseInt(this.item.style.left);
				var sy = parseInt(this.item.style.top);
				if (x == sx && y  == sy) {
					win.removeChild(this.item);
					snake.addBox(x,y);
					this.create();
					score++;
					document.getElementById('text').innerHTML = score;
					return true;
				}
				return false;
			}
		}

		//up
		function up() {
			if (snake.direction == 3) {snake.reverse();}
			snake.direction = 1;
			snake.move();
		}
		//right
		function right() {
			if (snake.direction == 4) {snake.reverse();}
			snake.direction = 2;
			snake.move();
		}
		//down
		function down() {
			if (snake.direction == 1) {snake.reverse();}
			snake.direction = 3;
			snake.move();
		}
		//left
		function left() {
			if (snake.direction == 2) {snake.reverse();}
			snake.direction = 4;
			snake.move();
		}
		//移动
		function move() {
			switch (nextDirection)
			{
				case 1:up();break;
				case 2:right();break;
				case 3:down();break;
				case 4:left();break;			
			}			
		}
		//捕获按键
		document.onkeydown = function(e) {
			switch(e.keyCode) {
				case 37:nextDirection =4;break;
				case 38:nextDirection =1;break;
				case 39:nextDirection =2;break;
				case 40:nextDirection =3;break;
			}				
		}		
		var win = document.getElementById("win");
		var snake = new Snake(win);
		var nextDirection = 2;
		var sweet = new Sweet();
		var score = 1;
		snake.init();
		sweet.create();
		var interval = setInterval("move()",100);
	</script>
</html>