js贪吃蛇源码

1、注意，自己引入jquery,这个demo基于jquery的，我的jquery是写的本地的

2、没有写注释，看不懂的再问我吧，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			div.wrap {
				text-align: center;
				padding-top: 50px;
			}

			div.container {
				display: inline-block;
				border: 1px solid rgba(0, 0, 0, 0.2);
			}

			div.row {
				display: flex;
			}

			div.row div {
				width: 20px;
				height: 20px;
				border: 1px solid rgba(0, 0, 0, 0.2);
			}

			div.row div.snake {
				background: #26376b;
			}

			div.row div.snakeHeader {
				background: red;
			}

			div.row div.food {
				background: greenyellow;
			}

			div.grade {}
		</style>
	</head>
	<body>
		<div class="wrap">
			<button class="btn">从新开始</button>
			<div class="grade">
				0
			</div>
			<div class="container">
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		function snakeCreate(wrap, grade) {
			var fn = {},
				$wrap = $(wrap),
				$row = null;
			var direct = "up";
			var count = 0;
			var data = [];
			var food = {
				x: 0,
				y: 0
			};
			var gameRun = true;
			var snake = [{
				x: 9,
				y: 10
			}, {
				x: 10,
				y: 10
			}, {
				x: 11,
				y: 10
			}, {
				x: 12,
				y: 10
			}];
			fn.init = function() {
				fn.keyCode();
				fn.createDom();
				fn.config();
				fn.createFood();
				fn.display();
			};
			fn.createDom = function() {
				for(var i = 0; i < 21; i++) {
					$wrap.append('<div class="row"></div>');
					for(var j = 0; j < 21; j++) {
						$wrap.find(".row").last().append("<div></div>");
					}
				}
				$row = $wrap.find(".row");
			};
			fn.config = function() {
				for(var i = 0; i < 21; i++) {
					var temp = [];
					for(var j = 0; j < 21; j++) {
						temp.push(0);
					}
					data.push(temp);
				}
				for(var i = 0; i < snake.length; i++) {
					data[snake[i].x][snake[i].y] = 2;
				}
			};
			fn.display = function() {
				for(var i = 0; i < data.length; i++) {
					for(var j = 0; j < data.length; j++) {
						var className = "";
						if(data[i][j] == 0) {
							className = "";
						} else if(data[i][j] == 2) {
							className = "snake";
						} else if(data[i][j] == 1) {
							className = "food";
						} else {
							className = "";
						}
						$row.eq(i).find("div").eq(j)[0].className = className;
						$row.eq(snake[0].x).find("div").eq(snake[0].y)[0].className = "snakeHeader";
					}
				}
			};
			fn.keyCode = function() {
				$(window).on("keydown", function(event) {
					if(gameRun) {
						switch(event.key) {
							case "w":
								fn.moveToUp();
								break;
							case "s":
								fn.moveToDown();
								break;
							case "a":
								fn.moveToLeft();
								break;
							case "d":
								fn.moveToRight();
								break;
							default:
								break;
						}
					}
				});
			};
			fn.change = function(x, y) {
				fn.judegDeth(x, y);
				if(gameRun) {
					data[snake[snake.length - 1].x][snake[snake.length - 1].y] = 0;
					data[x][y] = 2;
					if(x == food.x && y == food.y) {
						var feed = {
							x: x,
							y: y
						}
						$(grade).html($(grade).html() * 1 + 1);
						snake.push(feed);
						fn.createFood();
					}
					for(var i = snake.length - 1; i > 0; i--) {
						snake[i].x = snake[i - 1].x;
						snake[i].y = snake[i - 1].y;
					}
					for(var i = 0; i < snake.length; i++) {
						data[snake[i].x][snake[i].y] = 2;
					}
					snake[0].x = x;
					snake[0].y = y;
					fn.display();
				}
			};
			fn.moveToUp = function() {
				if(direct != "down") {
					direct = "up";
					fn.outMove(-1, 0);
				}
			};
			fn.moveToDown = function() {
				if(direct != "up") {
					direct = "down";
					fn.outMove(1, 0);
				}
			};
			fn.moveToLeft = function() {
				if(direct != "right") {
					direct = "left";
					fn.outMove(0, -1);
				}
			};
			fn.moveToRight = function() {
				if(direct != "left") {
					direct = "right";
					fn.outMove(0, 1);
				}
			};
			fn.outMove = function(speedx, speedy) {
				clearInterval(fn.timer);
				fn.change(snake[0].x + speedx, snake[0].y + speedy);
				fn.timer = setInterval(function() {
					fn.change(snake[0].x + speedx, snake[0].y + speedy);
				}, 400);
			};
			fn.createFood = function() {
				var x = Math.floor(Math.random() * 21);
				var y = Math.floor(Math.random() * 21);
				while(data[x][y] != 0) {
					x = Math.floor(Math.random() * 21);
					y = Math.floor(Math.random() * 21);
				}
				food.x = x;
				food.y = y;
				data[x][y] = 1;
			};
			fn.judegDeth = function(x, y) {
				if(gameRun) {
					fn.judegBound(x, y);
					fn.judgeOver(x, y);
				}
			};
			fn.judegBound = function(x, y) {
				if(x >= 21 || x < 0 || y >= 21 || y < 0) {
					clearInterval(fn.timer);
					gameRun = false;
					alert("game over1!");
				}
			};
			fn.judgeOver = function(x, y) {
				for(var i = 0; i < snake.length; i++) {
					if(snake[i].x == x && snake[i].y == y) {
						clearInterval(fn.timer);
						gameRun = false;
						alert("game over2!");
						break;
					}
				}
			};
			fn.clear = function() {
				clearInterval(fn.timer);
				count = 0;
				direct = "up";
				food = {
					x: 0,
					y: 0
				};
				$(grade).html(0);
				gameRun = true;
				snake = [{
					x: 9,
					y: 10
				}, {
					x: 10,
					y: 10
				}, {
					x: 11,
					y: 10
				}, {
					x: 12,
					y: 10
				}];
				for(var i = 0; i < data.length; i++) {
					for(var j = 0; j < data.length; j++) {
						data[i][j] = 0;
					}
				}
				for(var i = 0; i < snake.length; i++) {
					data[snake[i].x][snake[i].y] = 2;
				}
				fn.createFood();
				fn.display();
			};
			return fn;
		}
		var snakeOne = snakeCreate(".container", ".grade");
		snakeOne.init();
		$(".btn").on("click", function() {
			snakeOne.clear();
		});
	</script>
</html>