贪吃蛇html - 悦读

写着玩的
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>贪吃蛇</title>
	<style>
		#map {
			width: 400px;
			height: 400px;
			border: 1px solid black;
		}


		.divMap {
			width: 18px;
			height: 18px;
			margin: 1px;
			background-color: yellow;
			float: left;
		}


		.divSnake {
			width: 18px;
			height: 18px;
			margin: 1px;
			background-color: red;
			float: left;
		}


		.divFood {
			width: 18px;
			height: 18px;
			margin: 1px;
			background-color: green;
			float: left;
		}
	</style>
	<script>
		var mapX = 20,
			mapY = 20; 
		var arrMap = new Array(); 
		var snakeX = [4, 5, 6],
			snakeY = [2, 2, 2]; 
		var foodX = 9,
			foodY = 3; 
		var keyCode = 39; 

		function createMap() {
			var map = document.getElementById("map");
			for (y = 0; y < mapY; y++) {
				arrMap[y] = new Array();
				for (x = 0; x < mapX; x++) {
					var div = document.createElement("div"); 
					div.className = "divMap"; 
					arrMap[y][x] = div;
					map.appendChild(div); 
				}
			}
		}

		function createSnake() {
			var result; 
			for (i = 0; i < snakeX.length; i++) {
				arrMap[snakeY[i]][snakeX[i]].className = "divSnake";

			}
		}

		function createFood() {
			result = false;
			do {
				foodX = parseInt(Math.random() * mapX);
				foodY = parseInt(Math.random() * mapY);
				for (i = 0; i < snakeX.length; i++) {
					if (snakeX[i] == foodX && snakeY[i] == foodY) {
						result = true; 
						break;
					}

				}
			} while (result);

			arrMap[foodY][foodX].className = "divFood"
		}

		function claerSnake() {
			for (i = 0; i < snakeX.length; i++) {
				arrMap[snakeY[i]][snakeX[i]].className = "divMap";
			}
		}

		function snakeMove() {
			claerSnake();

			for (i = 0; i < snakeX.length - 1; i++) {
				snakeX[i] = snakeX[i + 1];
				snakeY[i] = snakeY[i + 1];

			}

			switch (keyCode) {
				case 37: 
					snakeX[snakeX.length - 1]--;
					break;
				case 38: 
					snakeY[snakeY.length - 1]--;
					break;
				case 39: 
					snakeX[snakeX.length - 1]++;
					break;
				case 40:
					snakeY[snakeY.length - 1]++;
					break;
			}


			if (snakeX[snakeX.length - 1] == foodX && snakeY[snakeY.length - 1] == foodY) {

				snakeX[snakeX.length] = snakeX[snakeX.length - 1];
				snakeY[snakeY.length] = snakeY[snakeY.length - 1];
			
				for (i = snakeX.length - 1; i > 0; i--) {
					snakeX[i] = snakeX[i - 1];
					snakeY[i] = snakeY[i - 1];
				}
				createFood(); 

			}
			if (snakeX[snakeX.length - 1] < 0 ||
				snakeX[snakeX.length - 1] > mapX - 1 ||
				snakeY[snakeY.length - 1] < 0 ||
				snakeY[snakeY.length - 1] > mapY - 1) {
				clearInterval(move);
				alert("游戏失败，重头再来");
				window.location.reload();
				return;
			}

			createSnake(); 
		}

		function keyDown() {
			var newKey = event.keyCode; 
			if (keyCode == 37 && newKey == 39 ||
				keyCode == 39 && newKey == 37 ||
				keyCode == 38 && newKey == 40 ||
				keyCode == 40 && newKey == 38
			) {
				
				return;
			} else if (newKey >= 37 && newKey <= 40) {
				keyCode = newKey;
			} else {
			}

		}
		window.onload = function () {
			createMap(); 
			createSnake(); 
			createFood(); 
			move = setInterval("snakeMove()", 200); 
			document.onkeydown = keyDown; 
		}
	</script>
</head>

<body>
	<div id="map"></div>
</body>

</html>