采用数据结构，不使用表格的 贪吃蛇

蛇形的数据结构的设计及相关的操作：

// 画布的宽度
	var x = 20;
	// 画布的长度
	var y = 20;
	// 初始时蛇的长度
	var startLength = 10;
	
	// 记录每个蛇的节点信息
	var BNode = function() {
		this.x = 0;
		this.y = 0;
		this.directory = 0;// 北 0、南 1、西 2、东 3
	}
	
	// 贪吃蛇
	var Snake = function() {
		// 记录蛇身的信息
		this.snakeBody = new Array();
		
		// 改变蛇行走的方向
		this.changeDir = function(dir) {
			// 修改头节点方向达到调整方向的目的
			var node = this.snakeBody[0]
			var currDir = node.directory;
			// 行走方向必须与当前头节点的行走方向垂直
			if(currDir == dir)
				return;
			else if(currDir == 0 && dir == 1 || currDir == 1 && dir == 0)
				return;
			else if(currDir == 2 && dir == 3 || currDir == 3 && dir == 2)
				return;
			
			node.directory = dir;
		}
		
		// 向前移动
		this.forword = function() {
			// 获取尾节点
			var node = this.snakeBody[this.snakeBody.length - 1];
			// 将头结点的信息复制个尾节点
			node.x = this.snakeBody[0].x;
			node.y = this.snakeBody[0].y;
			node.directory = this.snakeBody[0].directory;
			// 调整列表中的节点位置
			this.snakeBody.pop();
			this.snakeBody.unshift(node);
			
			switch(node.directory) {
				case 0:
					node.x = node.x - 1;
					break;
				case 1:
					node.x = node.x + 1;
					break;
				case 2:
					node.y = node.y - 1;
					break;
				case 3:
					node.y = node.y + 1;
					break;
			}
		}
		
		// 判断是否可以移动
		this.canMove = function() {
			var bNode = this.snakeBody[0];
			// 判断是否碰壁
			if(bNode.x < 0 || bNode.x > x || bNode.y < 0 || bNode.y > y)
				return false;
			for(var i = 1; i < this.snakeBody.length; i++)
				if(bNode.x == this.snakeBody[i].x && bNode.y == this.snakeBody[i].y)
					return false;
			// 判断是否碰到自己
			
			return true;
		}
		
		// 用来创建初始蛇形
		this.create = function() {
			// 尚未解决初始就是死蛇的情况
			var startX = Math.round(x * Math.random());
			var startY = Math.round(y * Math.random());
			var startDir = Math.round(3 * Math.random());
			for(var i = 0; i < startLength; i++) {
				var bNode = new BNode();
				switch(startDir){
					case 0:
						bNode.x = startX - i;
						bNode.y = startY;
						break;
					case 1:
						bNode.x = startX + i;
						bNode.y = startY;
						break;
					case 2:
						bNode.x = startX;
						bNode.y = startY - i;
						break;
					case 3:
						bNode.x = startX;
						bNode.y = startY + i;
						break;
				}
				bNode.directory = startDir;
				this.snakeBody.unshift(bNode);
			}
		}
		
		// 获取显示的蛇形html
		this.show = function() {
			var bNode;
			var content = "";
			for(var i = 0; i < this.snakeBody.length; i++) {
				bNode = this.snakeBody[i];
				content += "<div class='bnode' style='top: "+bNode.x*20+"px; left: "+bNode.y*20+"px;'></div></br>";
			}
			return content;
		}
		
		// 构造初始蛇形
		this.create();
	}

JavaScript 测试脚本：

var snake = new Snake();
	var draw ;
	window.onload = function() {
		draw = document.getElementById("snake");
		draw.style.width = x * 20 + "px";
		draw.style.height = y * 20 + "px";
		draw.innerHTML = snake.show();
	}
	
	
	// 测试运行蛇行走
	setInterval("demoMove()",200);
	var i = 0;
	function demoMove() {
		snake.forword();
		draw.innerHTML = snake.show();
	}
	
	document.onkeydown =function() {
		switch(event.keyCode) {
			case 38:
				snake.changeDir(0);
				break;
			case 40:
				snake.changeDir(1);
				break;
			case 37:
				snake.changeDir(2);
				break;
			case 39:
				snake.changeDir(3);
				break;
		}
	}

<style type="text/css" >
.bnode {
	width:20px;
	height:20px;
	background-color:#0F0;
	position:absolute;
}
</style>

   <div  id="snake" style="background-color:#96C;" ></div>

说明：snake层为蛇出现的地方，以上只是贪吃蛇中“蛇”的基本操作，并未完全实现贪吃蛇的所有功能，所有代码尽请参考。

评论

1 楼 asialee 2010-03-08  

不错，把边界控制和吃蛇的代码也实现了吧。