js实例---贪吃蛇

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

			body {
				width: 900px;
				height: 600px;
			}

			#screen {
				width: 600px;
				height: 500px;
				background: black;
				position: absolute;
				left: 300px;
				top: 100px;
			}

			#box {
				width: 500px;
				height: 400px;
				position: absolute;
				left: 50px;
				top: 30px;
				background: grey;
			}

			#button {
				width: 400px;
				height: 40px;
				background: green;
				position: absolute;
				left: 100px;
				top: 450px;
				text-align: center;
				line-height: 40px;
			}

			#d1 {
				width: 8px;
				height: 8px;
				position: absolute;
				left: 200px;
				top: 200px;
				background: black;
				border: 1px black solid;
				z-index: 1000;
			}

			#d2 {
				width: 8px;
				height: 8px;
				position: absolute;
				left: 200px;
				top: 210px;
				background: blue;
				border: 1px black solid;
			}

			#d3 {
				width: 8px;
				height: 8px;
				position: absolute;
				left: 200px;
				top: 220px;
				background: green;
				border: 1px black solid;
			}

			#d4 {
				width: 8px;
				height: 8px;
				position: absolute;
				left: 200px;
				top: 230px;
				background: red;
				border: 1px black solid;
			}

			#d5 {
				width: 8px;
				height: 8px;
				position: absolute;
				left: 200px;
				top: 240px;
				background: red;
				border: 1px black solid;
			}

			#d6 {
				width: 8px;
				height: 8px;
				position: absolute;
				left: 200px;
				top: 250px;
				background: red;
				border: 1px black solid;
			}
		</style>
		<script type="text/javascript">
			var timer = null;
			var dir = '';
			var name = null;
			var oDiv = null;
			var boxDiv = null;
			var sDiv = null;
			var aDiv = null;
			var speed = 10;
			var time = 500;
			window.onload = function() {
				boxDiv = document.getElementById('box');
				sDiv = document.getElementById('screen');
				aDiv = boxDiv.getElementsByTagName('div');
				newEgg();
			}
			document.onkeydown = function(ev) {
				var oEvent = ev || event;
				clearInterval(timer);
				if (oEvent.keyCode == 37) {
					name = 'left';
					dir = 'west';
				} else if (oEvent.keyCode == 39) {
					name = 'left';
					dir = 'east';
				} else if (oEvent.keyCode == 38) {
					name = 'top';
					dir = 'north';
				} else if (oEvent.keyCode == 40) {
					name = 'top';
					dir = 'south';
				}
				move();
				timer = setInterval(move, 500);
			};

			function move() {
				for (var i = aDiv.length - 1; i > 0; i--) {
					aDiv[i].style.left = aDiv[i - 1].offsetLeft + 'px';
					aDiv[i].style.top = aDiv[i - 1].offsetTop + 'px';
				}
				if (name == 'left') {
					if (dir == 'west') {
						aDiv[0].style[name] = aDiv[0].offsetLeft - speed + 'px';
					} else if (dir == 'east') {
						aDiv[0].style[name] = aDiv[0].offsetLeft + speed + 'px';
					}
				} else if (name == 'top') {
					if (dir == 'north') {
						aDiv[0].style[name] = aDiv[0].offsetTop - speed + 'px';
					} else if (dir == 'south') {
						aDiv[0].style[name] = aDiv[0].offsetTop + speed + 'px';
					}
				}
				ifTouch();
				if ((aDiv[0].offsetLeft == oDiv.offsetLeft - 50) && (aDiv[0].offsetTop == oDiv.offsetTop - 30)) {
					boxDiv.appendChild(oDiv);
					oDiv.style.top = aDiv[aDiv.length - 2].offsetTop + 'px';
					oDiv.style.left = aDiv[aDiv.length - 2].offsetLeft + 'px';
					newEgg();
				}

			}

			function newEgg() {
				oDiv = null;
				oDiv = document.createElement('div');
				oDiv.style.display = 'none';
				oDiv.style.position = 'absolute';
				oDiv.style.background = 'red';
				oDiv.style.width = '8px';
				oDiv.style.height = '8px';
				oDiv.style.borderWidth = '1px';
				oDiv.style.borderColor = 'black';
				oDiv.style.borderStyle = 'solid';
				oDiv.style.zIndex = '100';
				sDiv.appendChild(oDiv);
				oDiv.style.display = 'block';
				while (true) {
					var l = parseInt(Math.random() * 49) * 10 + 50;
					var t = parseInt(Math.random() * 39) * 10 + 40;
					for (var i = 0; i < aDiv.length; i++) {
						if ((l == aDiv[i].offsetLeft + 50) && (t == aDiv[i].offsetTop + 30)) {
							continue;
						}
						break;
					}
					break;
				}
				oDiv.style.left = l + 'px';
				oDiv.style.top = t + 'px';
			}

			function gameover() {
				clearInterval(timer);
				aDiv = null;
				name = '';
				dir = '';
				alert('GAME OVER');
			}

			function ifTouch() {
				if (aDiv[0].offsetLeft < 0) {
					aDiv[0].style.left = 0 + 'px';
					gameover();


				} else if (aDiv[0].offsetLeft > boxDiv.offsetWidth - aDiv[0].offsetWidth) {
					aDiv[0].style.left = boxDiv.offsetWidth - aDiv[0].offsetWidth + 'px';
					gameover();
				}
				if (aDiv[0].offsetTop < 0) {
					aDiv[0].style.top = 0 + 'px';
					gameover();
				} else if (aDiv[0].offsetTop > boxDiv.offsetHeight - aDiv[0].offsetHeight) {
					aDiv[0].style.top = boxDiv.offsetHeight - aDiv[0].offsetHeight + 'px';
					gameover();
				}
				for (var i = aDiv.length - 1; i > 0; i--) {
					if ((aDiv[0].offsetLeft == aDiv[i].offsetLeft) &&
						(aDiv[0].offsetTop == aDiv[i].offsetTop)) {
						gameover();
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="screen">
			<div id="box">
				<div id="d1"></div>
				<div id="d2"></div>
				<div id="d3"></div>
				<div id="d4"></div>
				<div id="d5"></div>
				<div id="d6"></div>
			</div>
			<div id='button'>
				点击屏幕后按方向键开始游戏。
				<!-- 
<input id="go" type="button" value="开始">
<input id="pause" type="button" value="暂停">
<input id="end" type="button" value="结束"> -->
			</div>
		</div>
	</body>
</html>
在这里插入图片描述
猜你喜欢
