欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Javascript贪吃蛇

程序员文章站 2022-07-12 11:56:19
...
一个简单的javascript写的贪吃蛇游戏,不精致,但是可以玩。。。
哈哈。 我的记录是82。

Javascript贪吃蛇
            
    
    博客分类: js JavaScriptJ#游戏prototypeCSS
代码:

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>


慢慢把他整精致点。。。
  • Javascript贪吃蛇
            
    
    博客分类: js JavaScriptJ#游戏prototypeCSS
  • 大小: 13 KB