[JavaScript知识库] js贪吃蛇小游戏

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> js贪吃蛇小游戏 -> 正文阅读

[JavaScript知识库]js贪吃蛇小游戏

今天学习了一个贪吃蛇小游戏，过程给我的感觉是非常痛苦的📡
不过到最后面就感觉也还好吧，好啦，让我们一起去看看我们的小蛇叭🐍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#dvs {
				width: 800px;
				height: 600px;
				background: gray;
				position: relative;
			}
		</style>
	</head>

	<body>
		<div id="dvs"></div>
	</body>
	<script src="../js/day01.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		(function() {
		//  食物的构造方法
			function Food(x, y, width, height, color) {
				this.x = x || 0;
				this.y = y || 0;
				this.width = width || 20;
				this.height = height || 20;
				this.color = color || "green";
				console.log(this.x);
			}
			// 	定义一个数组存放我们的食物
			var dvarr = [];
			//	初始化食物
			Food.prototype.init = function(map) {
				//	刚开始先调用清除食物的方法，让页面一次只出现一个食物
				remove();
				var div = document.createElement("div");
				map.appendChild(div);
				div.style.width = this.width + "px";
				div.style.height = this.height + "px";
				div.style.backgroundColor = this.color;
				div.style.position = 'absolute';
				//	随机生成食物的坐标
				this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width;
				this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height;
				div.style.left = this.x + "px";
				div.style.top = this.y + "px";
				dvarr.push(div);
			}
			//	清除食物
			function remove() {
				for(var i = 0; i < dvarr.length; i++) {
					var ele = dvarr[i];
					ele.parentNode.removeChild(ele);
					dvarr.splice(i,1);
				}
			}
			//	把食物的构造函数暴露给全局，让他可以被整个页面访问
			window.food = new Food();
		}());
		(function() {
		//	定义装小蛇身体的数组
			var element = [];
			//	定义小蛇的构造函数，direction是小蛇移动的方向
			function Snake(width, height, direction) {
				this.width = width || 20;
				this.height = height || 20;
				//	body属性是小蛇的身体，保存着小蛇每一段的宽、高、颜色
				//	我们这里是把头看成一段，身体每一块看成一段，初始长度是3
				this.body = [{
						x: 3,
						y: 2,
						color: "red"
					},
					{
						x: 2,
						y: 2,
						color: "orange"
					},
					{
						x: 1,
						y: 2,
						color: "orange"
					}
				];
				this.direction = direction || 'right';
			};
			//	添加小蛇初始化的方法，因为经常调用，所以放原型里
			Snake.prototype.init = function(map) {
				remove();
				//	遍历小蛇的长度，给每段加入样式
				for(var i = 0; i < this.body.length; i++) {
					var obj = this.body[i];
					var div = document.createElement("div");
					div.style.position = "absolute";
					//	将小蛇加入我们的地图中
					map.appendChild(div);
					div.style.width = this.width + "px";
					div.style.height = this.height + "px";
					div.style.backgroundColor = obj.color;
					div.style.left = obj.x * this.width + "px";
					div.style.top = obj.y * this.height + "px";
					element.push(div);
				}
			}
			// 定义小蛇移动的方法
			Snake.prototype.move = function(food, map) {
				var i = this.body.length - 1;
				//	这个for循环做的是把前面一段小蛇的坐标给后一段，
				//	i大于0是因为小蛇的头前面没有东西
				for(; i > 0; i--) {
					this.body[i].x = this.body[i - 1].x;
					this.body[i].y = this.body[i - 1].y;
				}
				//	判断小蛇移动的方向
				switch(this.direction) {
					case "right":
						this.body[0].x += 1;
						break;
					case "left":
						this.body[0].x -= 1;
						break;
					case "top":
						this.body[0].y -= 1;
						break;
					case "bottom":
						this.body[0].y += 1;
						break;
				}
				//	判断小蛇的头的坐标有没有和食物重叠，重叠说明吃到食物了
				var headX = this.body[0].x*this.width;
				var headY = this.body[0].y*this.height;
				if (headX == food.x && headY==food.y) {
				//	把小蛇最后一段保存在last变量中
					var last = this.body[this.body.length-1];
					//	将最后一段加入小蛇的长度里
					this.body.push({
						x:last.x,
						y:last.y,
						color:last.color
					});
					food.init(map);
				}
			};
			//	移除小蛇的方法，遍历装小蛇身体的数组
			function remove() {
				var i = element.length - 1;
				for(; i >= 0; i--) {
					var ele = element[i];
					ele.parentNode.removeChild(ele);
					//	删除对应位置数组的小蛇的身体
					element.splice(i, 1);
				}
			}
			//	将小蛇暴露在全局中
			window.Snake = new Snake();
		}());

		(function() {
			var that = null;
			//	定义game构造方法
			function Game() {
				this.snake = Snake;
				this.food = food;
				this.map = map;
				//	that代表的就是Game()构造函数
				that = this;
			};
			//	游戏初始化
			Game.prototype.init = function() {
				//	初始化食物
				this.food.init(this.map);
				//	初始化小蛇
				this.snake.init(this.map);
				//	调用小蛇移动方法
				this.snakerun(this.food,this.map);
				//	判断小蛇移动方向
				this.bindkey(this.food,this.map);

			};
			//	小蛇移动方法
			Game.prototype.snakerun = function() {
				var snakego = setInterval(function() {
					//	小蛇初始化
					this.snake.init(map);
					//	调用上面小蛇移动的方法
					this.snake.move(food, map);
					//	获取小蛇最大移动距离以及小蛇头部的坐标
					var maxX = map.offsetWidth/this.snake.width;
					var maxY = map.offsetHeight/this.snake.height;
					var headX = this.snake.body[0].x;
					var headY = this.snake.body[0].y;
					//	根据小蛇头部的位置，判断小蛇没有出界，如果出界，则游戏结束
					if (headX<0||headX>maxX-1||headY<0||headY>maxY-1) {
						//	小蛇出界，游戏结束，清除小蛇移动的定时器
						clearInterval(snakego);
						alert('游戏结束');
					}
					//	bind()方法改变了定时器内部的this指向，使内部this指向Game()构造器
				}.bind(that), 150);
			};
			//	键盘按下事件
			Game.prototype.bindkey = function () {
			//  添加鼠标按下监听事件		
				document.addEventListener('keydown',function(e){
					switch (e.keyCode){
						case 37:this.snake.direction = "left";
							break;
						case 38:this.snake.direction = "top";
							break;
						case 39:this.snake.direction = "right";
							break;
						case 40:this.snake.direction = "bottom";
							break;
					}
				}.bind(that),false);
			};
			//把game构造函数暴露全局	
			window.Game = Game;
		}());
		//测试代码
		var map = document.querySelector("#dvs");
		var game = new Game(map);
		game.init();
	</script>

</html>