日期:2014-05-16  浏览次数:20334 次

如何用javascript写一个贪吃蛇

我原来用C语言,借助curses库实现了linux 终端下的贪吃蛇游戏。

这个javascript版本的贪吃蛇是http://www.veryhuo.com/game/tanchishe.html 的学习笔记,实现的原理和C版本基本一样。

--------------------

1.怎样表示一条snake

用一个二维数组存snake的各个点(x,y),同时标记这些点(x,y)为“cover”,这是用于以后检查snake的头是否撞到了snake的body。

//initialize snake
function initSnake() {
	var pointer = randomPointer(len-1, len-1, WIDTH/2);
	for(var i = 0; i < len; i++) {
		var x = pointer[0] - i,
			y = pointer[1];
		snake.push([x,y]);
		carrier[x][y] = "cover"; //标记snake body
	}
}

2.用js画出格子

用document.createElent()方法创建出table->tr->td, 然后用document.appendChild()方法追加到id为“snakewrap”的元素上:

//initialize grid 
function initGrid() {
	var body = document.getElementsByTagName("body")[0];
	var table = document.createElement("table"),
		tbody = document.createElement("tbody")
	for(var j = 0; j < HEIGHT; j++) {  
		var col = document.createElement("tr");  
		for(var i = 0; i < WIDTH; i++) {  
			var row = document.createElement("td");
			gridElems[i][j] = col.appendChild(row);  
		}
		tbody.appendChild(col);  
	}
	table.appendChild(tbody);
	document.getElementById("snakewrap").appendChild(table);
}

3.生成食物的随机坐标

function randomPointer(startX,startY,endX,endY) {
	startX = startX || 0;
	startY = startY || 0;
	endX = endX || WIDTH;
	endY = endY || HEIGHT;
	
	var p = [],
	x = Math.floor(Math.random()*(endX - startX)) + startX,
	y = Math.floor(Math.random()*(endY - startY)) + startY;
	
	//如果(x,y)有物体,则重新生成坐标
	if(carrier[x][y]) {
		return randomPointer(startX,startY,endX,endY);
	}
	
	p[0] = x;
	p[1] = y;
	return p;
}

添加新的食物:

//addObject("food")
function addObject(name) {
	var p = randomPointer(); //get random position
	var x = p[0];
	var y = p[1];
	carrier[x][y] = name;
	gridElems[x][y].className = name;
}

4.方向键按下动作事件监听:

允许左上右下这4个按键来改变snake的运动方向,注意,如果方向相反的话,不生效。

对于键盘上的每一个按键,都有一个key cord,我的这篇博客记录了javascript的key cord,可看到:

left arrow