Javascript贪吃蛇

一个简单的javascript写的贪吃蛇游戏，不精致，但是可以玩。。。
哈哈。 我的记录是82。


代码:

DIRECTION = {
	left : 37,
	top : 38,
	right : 39,
	bottom : 40,
	isAntiDirection : function(dir1, dir2) {
		if (dir1 == dir2) {
			return false;
		} // same direction
		return (dir1 + dir2) % 2 == 0;
	}
}

var LAYOUT = {
	span : 30,
	cellWidth :14,
	offset_y : 120,
	offset_x : 0
};

/**
 * 
 * @param {}
 *            span
 * @param {}
 *            delay
 */
function Site(span, delay) {
	this.span = span;
	this.delay = delay;
	this.cells = [];
	this.targetCell = undefined;

	// Add event listener for top/right/bottom/left key pressing ...
	document.addEventListener("keypress", function(event) {
				if (event.charCode == 119) {
					if (site.delay > 20) {
						site.delay = site.delay - 20;
						window.clearInterval(oTimer);
						// reset interval
						oTimer = setInterval("site.snake.run()", site.delay);
					}
				} else if (event.charCode == 115) {
					site.delay = site.delay + 20;
					window.clearInterval(oTimer);
					// reset interval
					oTimer = setInterval("site.snake.run()", site.delay);
				}else {
					if (site && site.snake) {
						site.snake.move(event.keyCode);
					}
				}
			}, true);
}

Site.prototype = {
	createSite : function(container) {
		for (var i = 0; i < this.span; i++) {
			this.cells[i] = [];
			for (var j = 0; j < this.span; j++) {
				var cell = document.createElement('div');
				cell.id = "cell_" + j + "_" + i;
				cell.className = "cell";
				cell.cell_i = i;
				cell.cell_j = j;
				cell.style.left = LAYOUT.offset_x + LAYOUT.cellWidth * j;
				cell.style.top = LAYOUT.offset_y + LAYOUT.cellWidth * i;
				container.appendChild(cell);
				this.cells[i][j] = cell;
			}
		}
	},

	clean : function() {
		for (var i = 0; i < this.cells.length; i++) {
			var cell_i = this.cells[i];
			for (var j = 0; j < cell_i.length; j++) {
				var cell = cell_i[j];
				this.markNotSnakeCell(cell);
			}
		}
	},

	randomSnakeCell : function() {
		var cell = this.randomCell();
		while (this.isInSnake(cell)) {
			cell = this.randomCell();
		}

		// Make target cell
		this.targetCell = cell;
		this.markTargetCell(cell);
	},

	randomCell : function() {
		var i = Math.floor(Math.random() * (this.span - 1));
		var j = Math.floor(Math.random() * (this.span - 1));
		return this.getCell(i, j);
	},

	getCell : function(i, j) {
		return this.cells[i][j];
	},

	markTargetCell : function(cell) {
		cell.className = 'targer_cell';
	},

	isSnakeCell : function(cell) {
		return cell.className == 'snake';
	},

	isTargetCell : function(cell) {
		return this.targetCell.id == cell.id;
	},

	isInSnake : function(cell) {
		return this.snake.isInSnakeBody(cell);
	},

	markSnakeCell : function(cell) {
		if (cell.className != "snake") {
			cell.className = "snake";
		}
	},

	markNotSnakeCell : function(cell) {
		if (cell.className != "cell") {
			cell.className = "cell";
		}
	}
};

/*
 * Mock the 'Stack' structure
 */
function Snake(init) {
	this.init = init;
	this.data = [];
	this.direction = DIRECTION.bottom;
	this.eatListeners = [];
	this.eatListeners[0] = function() {
		if (site) {
			site.randomSnakeCell();
		}
	}
	this.eatListeners[1] = function() {
		if (site) {
			document.getElementById("snake_number").innerHTML = site.snake.data.length;
		}
	}

	this.gameOverListeners = [];
	this.gameOverListeners[0] = function(snake) {
		if (oTimer) {
			window.clearInterval(oTimer);
		}
		alert("Game over! " + snake.data.length);
	}
}

Snake.prototype = {

	/**
	 * Append a snake cell to snake
	 * 
	 * @param {}
	 *            element
	 */
	append : function(element) {
		this.data[this.data.length] = element;
		this.markSnakeCell(element);
	},

	/**
	 * Slide on site, the snake length is not changed.
	 * 
	 * @param {}
	 *            element
	 * @return {The snake tail removed from snake}
	 */
	slide : function(element) {
		this.markSnakeCell(element);
		var temp = [];
		for (var i = 1; i < this.data.length; i++) {
			temp[i - 1] = this.data[i];
		}
		temp[temp.length] = element;
		var tail = this.data[0];
		this.markNotSnakeCell(tail);
		this.data = temp;
		return tail;
	},

	/**
	 * Move one cell accord given direction.
	 * 
	 * @param {top/right/bottom/left}
	 *            keyCode
	 */
	move : function(keyCode) {
		// Negative direction is not allow.
		if (DIRECTION.isAntiDirection(this.direction, keyCode)) {
			return;
		}
		var head = this.data[this.data.length - 1];
		var i = head.cell_i;
		var j = head.cell_j;
		var changeDirection = true;
		switch (keyCode) {
			case DIRECTION.left :
				j = j - 1 < 0 ? site.span - 1 : j - 1;
				break;
			case DIRECTION.top :
				i = i - 1 < 0 ? site.span - 1 : i - 1;
				break;
			case DIRECTION.right :
				j = j + 1 < site.span ? j + 1 : 0;
				break;
			case DIRECTION.bottom :
				i = i + 1 < site.span ? i + 1 : 0;
				break;
			default :
				changeDirection = false;
		}
		// find next cell
		var cell = site.getCell(i, j);

		if (this.isInSnakeBody(cell)) {
			// If next cell is already exist in snake, game over.
			if (this.gameOverListeners) {
				for (var i = 0; i < this.gameOverListeners.length; i++) {
					this.gameOverListeners[i](this);
				}
			}
		}

		if (site.isTargetCell(cell)) {
			this.append(cell);
			// Eat a cell. Fire eat listener. Here call Site to generate a
			// new target cell.
			if (this.eatListeners && this.eatListeners.length > 0) {
				for (var l = 0; l < this.eatListeners.length; l++) {
					this.eatListeners[l]();
				}
			}
		} else {
			this.slide(cell);
		}

		if (changeDirection) {
			// record the current direction
			this.direction = keyCode;
		}
	},

	/**
	 * Alias for 'move' method.
	 */
	run : function() {
		this.move(this.direction);
	},

	prepare : function() {
		for (var i = 0; i < this.init; i++) {
			this.append(site.getCell(i, 0));
		}
	},

	markSnakeCell : function(cell) {
		this.site.markSnakeCell(cell);
	},

	markNotSnakeCell : function(cell) {
		this.site.markNotSnakeCell(cell);
	},

	length : function() {
		return this.data.length;
	},

	isInSnakeBody : function(cell) {
		for (var i = 0; i < this.data.length; i++) {
			var snakeCell = this.data[i];
			if (snakeCell.id == cell.id) {
				return true;
			}
		}
	}
};

function layout(event) {
	var container = document.getElementById('site');
	var width_offset = (window.outerWidth - LAYOUT.cellWidth * LAYOUT.span) / 2;
	LAYOUT.offset_x = width_offset;
	site = new Site(LAYOUT.span, 200);
	site.createSite(container);
}

function start(event) {
	site.clean();
	var snake = new Snake(3);
	snake.site = site;
	snake.prepare();
	site.snake = snake;
	oTimer = setInterval("site.snake.run()", site.delay);
	site.randomSnakeCell();
	document.getElementById("snake_number").innerHTML = site.snake.data.length;
}

另外是一个html文件，css的定义在里面，

<html>
<head>
<style type="text/css">
body {
	font-family: Impact;
}

.cell {
	background-color: blue;
	width: 20px;
	height: 20px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	border: thin solid red;
}

.snake {
	background-color: yellow;
	width: 20px;
	height: 20px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	border: thin solid rgb(200, 100, 20);
}

.targer_cell {
	background-color: red;
	width: 20px;
	height: 20px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	border: thin solid rgb(200, 100, 20);
}

.toolbar {
	text-align:center;
}

p {
	color: red;
	align: center;
}
</style>
<script type="text/javascript" src="snake.js"></script>
<title>贪吃蛇</title>
</head>
<body onload="layout();">
	<h2 align="center">贪吃蛇 !!!</h2>
	<div id="toolbar" class="toolbar">
		<p>控制：上，下，左，右     &nbsp;&nbsp; 加速：w 减速：s</p>
		<a href="javascript:void(0);" onclick="start();" >Start</a> 
	</div>
	<div id="site"></div>
	<div id="record">
		<p>Now record: <span id="snake_number" style="color:purple">3</span></p>
	</div>
</body>
</html>

慢慢把他整精致点。。。