贪吃蛇汇总

贪吃蛇下续进行汇总

html代码

<div class="map"></div>

css<代码

.map{
	width:800px;
	height:600px;
	background-color:#ccc;
	position:absolute;

js代码

//食物对象
(function() {
				var elements = [];
				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";
				}
				//食物样式初始化
				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";
					elements.push(div);
				}
		//清除食物
				function remove() {
					for(var i = 0; i < elements.length; i++) {
						var ele = elements[i];
						ele.parentNode.removeChild(ele);
						elements.splice(i, 1);
					}
				}
				window.Food = Food;
			}());

//小蛇对象
			(function() {
				var elements = [];
				function Snake(width, height, direction) {
					this.width = width || 20;
					this.height = height || 20;
					this.direction = direction || "right";
					this.body = [{
							x: 3,
							y: 2,
							color: "red"
						},
						{
							x: 2,
							y: 2,
							color: "orange"
						},
						{
							x: 1,
							y: 2,
							color: "orange"
						}
					];
				}
				//小蛇样式初始化
				Snake.prototype.init = function(map) {
					remove();
					for(var i = 0; i < this.body.length; i++) {
						var div = document.createElement("div");
						map.appendChild(div);
						div.style.width = this.width + "px";
						div.style.height = this.height + "px";
						div.style.position = "absolute";
						div.style.left = this.body[i].x * this.width + "px";
						div.style.top = this.body[i].y * this.height + "px";
						div.style.backgroundColor = this.body[i].color;
						elements.push(div);
					}
				}
				//小蛇移动
				Snake.prototype.move = function(map, food) {
					var i = this.body.length - 1;
					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) {
						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 = elements.length - 1;
					for(; i >= 0; i--) {
						var ele = elements[i];
						ele.parentNode.removeChild(ele);
						elements.splice(i, 1);
					}
				}
				window.Snake = Snake;
			}());
//游戏对象
			(function() {
				var that = null;

				function Game(map) {
					this.food = new Food();
					this.snake = new Snake();
					this.map = map;
					that = this;
				}
				//游戏初始化进行创建食物对象和小蛇对象
				Game.prototype.init = function() {
					this.food.init(this.map);
					this.snake.init(this.map);
					this.runSnake(this.map, this.food);
					this.bindKey();
				}
				//定时器让小蛇进行开始移动
				Game.prototype.runSnake = function(map, food) {
					var timeId = setInterval(function() {
						this.snake.move(map, food);
						this.snake.init(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 || headY < 0 || headY >= maxY) {
							clearInterval(timeId);
							alert("游戏结束");
						}
					}.bind(that), 150);
				}
				//通过获取上下左右方向按键进行控制小蛇方向
				Game.prototype.bindKey = function() {
					document.addEventListener("keydown", function(e) {
						switch(e.keyCode) {
							case 37:
								this.snake.direction = "left";
								break;
							case 39:
								this.snake.direction = "right";
								break
							case 38:
								this.snake.direction = "top";
								break;
							case 40:
								this.snake.direction = "bottom";
								break;
						}
					}.bind(that), false)
				}
				window.Game = Game;
			}());
			//创建游戏对象并进行操作
			var gm = new Game(document.querySelector(".map"));
			gm.init();

通过图示可见相应的一些操作，小蛇吃东西，及长度变化，随之食物进行随机分布，及被吃掉之后，重新出现。