贪吃蛇上

html代码

//简单的小地图
	<div class="map">
	</div>

css代码

<style>
/*设置地图样式*/
	.map {
			width: 800px;
			height: 600px;
			background-color: #ccc;
			position: relative;
		}
	</style>

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 = [];//设置数组用来存储蛇的div

				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();
					//通过循环进行创建body元素数量次数的蛇身div并保存在elements数组中
					for(var i = 0; i < this.body.length; i++) {
						var div = document.createElement("div");
						map.appendChild(div);
						div.style.position = "absolute";
						div.style.width = this.width + "px";
						div.style.height = this.height + "px";
						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(food,map) {
					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;
					}
				}
				//同时蛇也需要清除在创建实现移动
				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.food,this.map);
				}
				//蛇移动加入定时器，实现连续，其中判断蛇什么时候撞墙，游戏结束
				Game.prototype.runSnake=function(food,map){
					var timeId=setInterval(function(){
						this.snake.move(food,map);
						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);
				}
				window.Game=Game;
			}());
			var gm=new Game(document.querySelector(".map"));
			gm.init();

蛇移动的过程：

蛇撞墙的过程：

今天就到这里了，下次继续贪吃蛇。