JavaScript贪吃蛇游戏

我就是我 2023-02-18 15:19 53阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>贪吃蛇游戏</title>
    </head>
    <body>
    	<div id="map" style="width: 800px; height: 600px; background-color: lightgray; "></div>
    	<script>
    		
    	</script>
    	<script>
    		
    		/************************食物**********************************************/
    		// 采用自调用函数,开启一个新的局部作用域，防止不同js文件的命名重复
    		(function(){ 
    
    			// 随机数函数，用于随机出现的食物
    			var Tools = { 
    				getRandom: function(min, max){ 
    					return Math.floor(Math.random() * (max - min + 1)) + min;
    				}
    			};
    
    			var elements = [];
    			function Food(options){ 
    				options = options || { };
    				this.x = options.x || 0;
    				this.y = options.y || 0;
    
    				this.width = options.width || 20;
    				this.height = options.height || 20;
    
    				this.color = options.color || 'green';
    			};
    
    			// var postion = 'absolute'
    			// 渲染，把这个实物对象显示在页面上
    			Food.prototype.render = function(map){    // 给构造函数的原型prototype构造一个render方法
    				// 删除之前的食物的实物
    				remove();
    
    				// 随机设置x和Y的值
    				this.x = Tools.getRandom(0, map.offsetWidth/this.width - 1) * this.width;
    				this.y = Tools.getRandom(0, map.offsetHeight/this.height - 1) * this.height;
    				
    				var div = document.createElement('div'); //动态创建div 页面上显示实物
    				map.appendChild(div);  // 吧这个div放到地图上,相当于是在map地图上创建一个div实物
    
    				elements.push(div);
    
    				// 设置div样式
    				div.style.position = 'absolute';
    				div.style.left = this.x + 'px';
    				div.style.top = this.y + 'px';
    				div.style.width = this.width + 'px';
    				div.style.height = this.height + 'px';
    				div.style.backgroundColor = this.color;
    			};
    
    			// 删除元素的函数 需要从最后一个元素删除到第一个元素
    			function remove(){ 
    				for (var i = elements.length - 1; i >= 0; i--){ 
    					elements[i].parentNode.removeChild(elements[i]);
    					// alert(elements[i]);
    					// 删除元素
    					// 第一个参数，从哪个元素开始删除
    					// 第二个元素，删除几个元素
    					elements.splice(i, 1)
    				}
    			};
    
    			// window代表全局变量
    			window.Food = Food;    // 把Food构造函数，让自调用函数里面的可以外部进行访问
    
    		})();
    
    		// var map = document.getElementById('map');
    		// var food = new Food(); // 原式为: var food = new window.Food(); window可以省略
    		// food.render(map);
    		/************************************************************************/
    
    
    		/*********************************蛇***********************************/
    		(function () { 
    			var elements = [];
    			var position = 'absolute';
    			function Snake(options) { 
    				options = options || { };
    
    				this.width = options.width || 20;
    				this.height = options.height || 20;
    
    				// 蛇移动的方向
    				this.direction = options.direction || 'right';
    
    				// 蛇的身体(蛇节), 第一个元素是蛇头
    				this.body = [
    					{ x: 3, y: 2, color: 'red'},  // x表示前面（默认左边）有几个蛇节，y表示面上有几个节
    					{ x: 2, y: 2, color: 'blue'},
    					{ x: 1, y: 2, color: 'blue'},
    				];
    			};
    
    			Snake.prototype.render = function (map){ 
    
    				// 删除之前创建的蛇, 这个是私有的方法不能被外面的访问，如果访问的话就把外面的东西给删除了
    				remove();
    
    				// 把每一个蛇节渲染到地图上
    				for( var i = 0, len = this.body.length; i < len; i++){ 
    						var object = this.body[i];   // 遍历所得的每一个蛇节
    
    						// 每个蛇节都需要一个div, 所以要创建许多div
    						var div = document.createElement('div');
    						// 把div放在map地图上
    						map.appendChild(div);
    
    						elements.push(div);
    						div.style.position = position;
    						div.style.width = this.width + 'px'; 
    						div.style.height = this.height + 'px';
    						div.style.left = object.x * this.width + 'px'; 
    						div.style.top = object.y * this.height + 'px';
    						div.style.backgroundColor = object.color;
    				}
    
    				// 控制蛇移动的方法
    				Snake.prototype.move = function (food, map) { 
    					//1, 控制蛇身体的移动(当前蛇节到上一个蛇节的位置)
    					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;
    					}
    
    					//2, 控制舌头的移动
    					var head = this.body[0];
    					switch(this.direction){ 
    						case 'right':
    							head.x += 1;
    							break;
    						case 'left':
    							head.x -= 1;
    							break;
    						case 'top':
    							head.y += 1;
    							break;
    						case 'bottom':
    							head.y -= 1;
    							break;
    					}
    
    					//3，判断舌头是否和食物触碰重合
    					var headX = head.x * this.width;
    					var headY = head.y * this.height;
    					if (headX === food.x && headY === food.y){ 
    						// 让蛇增加一节
    						// 获取蛇的最后一节
    						var last = this.body[this.body.length - 1];
    						this.body.push({ 
    							x: last.x,
    							y: last.y,
    							color: last.color,
    						})
    						// 地图上重新生成食物
    						food.render(map);
    					}
    				}
    
    				// 私有的成员
    				function remove (){ 
    					for (var i = elements.length - 1; i >= 0; i--){ 
    						// 删除div
    						elements[i].parentNode.removeChild(elements[i]);
    
    						// 删除元素
    						elements.splice(i, 1);
    					}
    				}
    			};
    			// 将构造函数暴露给外面，让外面可以访问自调用函数里面的构造函数Snake
    			window.Snake = Snake;
    		})();
    		// var map = document.getElementById('map');
    		// var snake = new Snake();
    		// snake.render(map);
    
    		/************************************************************************/
    
    		/******************************游戏控制***********************************/
    
    		(function () { 
    			var that;     // 记录游戏对象
    			function Game(map) { 
    				this.food = new Food();
    				this.snake = new Snake();
    				this.map = map;
    				that = this;
    			};
    			Game.prototype.start = function (){ 
    
    				// 1, 把蛇和食物渲染到地图上
    				this.food.render(this.map);
    				this.snake.render(this.map);
    				// this.snake.move()
    				// this.snake.render(this.map);
    				// this.snake.move()
    				// this.snake.render(this.map);
    				// this.snake.move()
    
    				// 2, 开始游戏的逻辑
    				// 2，1 让蛇移动起来
    				// 2，2 当蛇遇到边界游戏结束
    				runSnake();
    				
    				// 2，3 控制方向让蛇移动起来
    				bindKey();
    				// 2，4 当蛇遇到食物，做相应的处理
    				
    
    				// 3，暴露构造函数给外部
    			};
    
    			// 通过键盘控制蛇移动的方向
    			function bindKey() { 
    				// document.onkeydown = function(){}
    				// 注册一个键盘事件
    				document.addEventListener('keydown', function(e) {  
    					// console.log(e.keyCode); 查看键盘在浏览器事件绑定的键盘码
    					// 上38 下40 左37 右39
    					switch(e.keyCode){ 
    						case 37:
    							this.snake.direction = 'left';
    							break;
    						case 38:
    							this.snake.direction = 'bottom';
    							break;
    						case 39:
    							this.snake.direction = 'right';
    							break;
    						case 40:
    							this.snake.direction = 'top';
    							break;
    
    					}
    					
    				}.bind(that), false);  // 当false是事件冒泡，true是事件阻塞
    			}
    
    			// 私有函数
    			function runSnake (){ 
    				var timeId = setInterval(function(){ 
    					// 让蛇走一格
    					// 在定时器的function中this是指window对象的
    					// 要获取游戏对象中的蛇的属性
    					this.snake.move(that.food, that.map);
    					this.snake.render(that.map);
    
    					// 当蛇遇到边界游戏结束
    					var maxX = this.map.offsetWidth / this.snake.width;
    					var maxY = this.map.offsetHeight / this.snake.height;
    					var headX = this.snake.body[0].x;
    					var headY = this.snake.body[0].y;		
    					if (headX  < 0 || headX >= maxX){ 
    						alert('Game Over');
    						clearInterval(timeId);   // 停掉定时器
    					}			
    					if (headY < 0 || headY >= maxY){ 
    						alert('Game Over');
    						clearInterval(timeId);
    					}
    					
    				}.bind(that), 150);
    			}
    			window.Game = Game;
    		})();
    
    		var map = document.getElementById('map');
    		var game = new Game(map);
    		game.start();
    
    		/************************************************************************/
    
    	</script>
    </body>
    </html>