贪吃蛇

原生dom实现的贪吃蛇

鼠标操作上下左右箭头 利用dom来演示,点击查看效果: demo

核心算法

// 产生一个食物
function makeFood() {
	var temp = Math.random() * 20; // temp 值为[0, 20)
	var x = Math.floor(Math.random() * 20);
	var y = Math.floor(Math.random() * 20);
	// console.log(snake);
	food = [x, y];
	//若产生的食物坐标是蛇身体，则重新产生
	// 由于index不能数组找数组,所以转换为字符串查找
	while (snake.join("").indexOf(food.join("")) != -1) {
		food = [Math.floor(Math.random() * 20), Math.floor(Math.random() * 20)];
	}
	// console.log("最终的食物坐标" + food[0] + food[1]);
	getTd(food[0], food[1]).id = "food";
	foodCount++;
}

function action(t) {
	var head = getSnakeHead(t);
	var flag = 0; //看撞墙，吃食物，或者正常前进的状态
	//看是否撞墙撞身体
	if (judgeWall(head[0], head[1], t) || judgeBody(head[0], head[1], t)) {
		flag = 1;
		gameOver();
		return;
	}
	// 看是否有食物,若有食物则不move了，只需要重新渲染蛇等
	if (judgeFood(head[0], head[1], t)) {
		flag = 2;
		getTd(food[0], food[1]).id = ""; //食物消失
		foodCount--;
		score++; //加分数
		showScore.innerHTML = "分数是:" + score;
		snake.push([food[0], food[1]]);
		renderSnake(); //重新渲染蛇
		makeFood();
	}
	// 既没有撞墙也没有食物，则move
	if (flag == 0) {
		move(t);
	}
}