master

分支 (2)

管理

管理

master

meng

JavaScript
/
snake.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>snake贪吃蛇</title>
	</head>

	<body>
	</body>
	<script type="text/javascript">
		var map;
		var snake;
		var food;
		var timer;
		var sum = 0;

		function Map() {
			this.width = 600;
			this.height = 400;
			this.position = 'relative';
			this.color = "#ccc";
			this._map = null;
			this.show = function() {
				this._map = document.createElement("div");
				this._map.style.width = this.width + "px";
				this._map.style.height = this.height + 'px';
				this._map.style.position = this.position;
				this._map.style.background = this.color;
				this._map.style.margin = "100px auto";
				document.body.appendChild(this._map);
			}
		}

		function Food() {
			this.width = 10;
			this.height = 10;
			this.position = 'absolute';
			this.color = "blue";
			this.x = 0;
			this.y = 0;
			this._food = null;
			this.show = function() {
				if(this._food == null) {
					this._food = document.createElement("div");
					this._food.style.width = this.width + 'px';
					this._food.style.height = this.height + 'px';
					this._food.style.position = this.position;
					this._food.style.background = this.color;
					map._map.appendChild(this._food);
				}
				this.x = Math.floor(Math.random() * 60);
				this.y = Math.floor(Math.random() * 40);
				this._food.style.left = this.x * this.width + 'px';
				this._food.style.top = this.y * this.height + 'px';
			}
		}

		function Snake() {
			this.width = 10;
			this.height = 10;
			this.position = 'absolute';
			this.body = [
				[4, 3, 'red', null],
				[3, 3, 'green', null],
				[2, 3, 'green', null]
			];
			this.direct = '';
			this.setDirect = function(code) {
				switch(code) {
					case 37:
						this.direct = "left";
						break;
					case 38:
						this.direct = "up";
						break;
					case 39:
						this.direct = "right";
						break;
					case 40:
						this.direct = "down";
						break;
				}
			};
			this.show = function() {
				for(var i = 0; i < this.body.length; i++) {
					if(this.body[i][3] == null) {
						this.body[i][3] = document.createElement("div");
						this.body[i][3].style.width = this.width + 'px';
						this.body[i][3].style.height = this.height + 'px';
						this.body[i][3].style.background = this.body[i][2];
						this.body[i][3].style.position = this.position;
						map._map.appendChild(this.body[i][3]);
					}
					this.body[i][3].style.left = this.width * this.body[i][0] + 'px';
					this.body[i][3].style.top = this.height * this.body[i][1] + 'px';
				}
			}
			this.move = function() {
				var length = this.body.length - 1;
				for(var i = length; i > 0; i--) {
					this.body[i][0] = this.body[i - 1][0];
					this.body[i][1] = this.body[i - 1][1];
				}
				switch(this.direct) {
					case "left":
						this.body[0][0] = this.body[0][0] - 1;
						break;
					case "up":
						this.body[0][1] = this.body[0][1] - 1;
						break;
					case "right":
						this.body[0][0] = this.body[0][0] + 1;
						break;
					case "down":
						this.body[0][1] = this.body[0][1] + 1;
						break;
					default:
						return;
				}
				if(this.body[0][0] == food.x && this.body[0][1] == food.y) {
					var x = this.body[length][0];
					var y = this.body[length][1];
					sum++;
					document.title = "积分：" + sum + "分";
					this.body.push([x, y, 'green', null]);
					if(sum % 10 == 0) {
						timer = setInterval('snake.move()', (200 - sum));
					}
					food.show();
				}
				if(this.body[0][0] > 59 || this.body[0][1] > 39 || this.body[0][0] < 0 || this.body[0][1] < 0) {
					alert("撞墙啦，重新来吧");
					clearInterval(timer);
					window.location.reload();
					return;
				}

				for(var i = 1; i < this.body.length; i++) {
					if(this.body[0][0] == this.body[i][0] && this.body[0][1] == this.body[i][1]) {
						alert("吃到自己啦");
						clearInterval(timer);
						window.location.reload();
						return;
					}
				}
				console.log(this.direct);
				this.show();
			}
		}
		window.onload = function() {
			map = new Map();
			map.show();

			food = new Food();
			food.show();

			snake = new Snake();
			snake.show();

			timer = setInterval('snake.move()', 200);

			document.onkeydown = function() {
				var code;
				if(window.event) {
					code = window.event.keyCode;
				} else {
					code = event.keyCode;
				}
				snake.setDirect(code);
			}
		}
	</script>

</html>