學完js定時器後，我決定做一個貪喫蛇！

話不多說，上圖爲敬！

上面就是大概的效果了，可能還有很多bug，期待你們發現 =-= ！

這個貪喫蛇主要用到了js的定時器和鍵盤監聽事件，通過鍵盤監聽事件來觸發定時器（比如點左鍵，就會觸發一個定時器，這個定時器的作用就是每秒使蛇的left變小！），大概就是這麼個意思 =-=。

在讓我敲一遍也不一定能敲出來=-=，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈嗝~

好了下面是實現代碼

css部分

		<style>
			.oDiv {
				width: 20px;
				height: 20px;
				border-radius: 20px;
				position: absolute;
				background-color: brown;
			}

			#oDiv1 {
				width: 500px;
				height: 500px;
				border: 1px solid #000000;
				margin: auto;
				background-color: aquamarine;
			}
			#d{
				width: 10px;
				height: 10px;
				border-radius: 10px;
				background-color:black;
				position: absolute;		
			}
		</style>

html部分（就兩個div，一個是蛇，一個是食物）

<div id="oDiv1">
			<div class="oDiv"></div>
			<div id="d" style="display: none"></div>
		</div>

JavaScript部分

<script>
		var NewDiv = null;
		var oDiv = document.getElementsByClassName("oDiv");
		var oDiv1 = document.getElementById("oDiv1");
		var d = document.getElementById("d");
		var clc = null;

		/*開局5秒後先生成一個食物*/
		window.onload = function() {
			oDiv[0].style.left = "49%"
			oDiv[0].style.top = "27%"
			window.setTimeout(function() {
				a();
			}, 5000)
		}

		/*隨機食物*/
		function a() {
			d.style.display = "";
			d.style.left = (Math.random() * (1209 - 712) + 709) + "px";
			d.style.top = (Math.random() * (508 - 13) + 8) + "px";
		}


		b = setInterval(function() {
			/*判斷喫到食物後調用隨機食物的方法*/
			if ((parseInt(d.style.left) - parseInt(oDiv[0].offsetLeft) < 10 && parseInt(d.style.left) - parseInt(oDiv[0].offsetLeft) >
					-10) &&
				(parseInt(d.style.top) - parseInt(oDiv[0].offsetTop) < 10 && parseInt(d.style.top) - parseInt(oDiv[0].offsetTop) >
					-10)) {
				a();
				NewDiv = document.createElement("div");
				oDiv1.appendChild(NewDiv);
				NewDiv.className = "oDiv";
				tail();
			}
			/*判斷碰到牆壁*/
			if (oDiv[0].offsetLeft < oDiv1.offsetLeft || oDiv[0].offsetLeft > oDiv1.offsetLeft + 482 || oDiv[0].offsetTop <
				oDiv1.offsetTop || oDiv[0].offsetTop > oDiv1.offsetTop + 482) {
				alert("遊戲結束！")
				clearInterval(clc)
				clearInterval(b)
				location.reload(true) //reload方法：刷新頁面
			}
			/*判斷是否碰到身體*/
			for (var i = 5; i < oDiv.length; i++) {
				if (oDiv[0].offsetTop == oDiv[i].offsetTop && oDiv[0].offsetLeft == oDiv[i].offsetLeft) {
					alert("遊戲結束！")
					clearInterval(clc)
					clearInterval(b)
					location.reload(true)
					break;
				}
			}
		}, 100)


		/*鍵盤按下判斷方向*/
		function on() {
			switch (event.keyCode) {
				case 38:
					clearInterval(clc)
					clc = setInterval(function() {
						oDiv[0].style.top = oDiv[0].offsetTop - 5 + "px";
						tail();
					}, 50)
					break;
				case 40:
					clearInterval(clc)
					clc = setInterval(function() {
						oDiv[0].style.top = oDiv[0].offsetTop + 5 + "px";
						tail();
					}, 50)
					break;
				case 37:
					clearInterval(clc)
					clc = setInterval(function() {
						oDiv[0].style.left = oDiv[0].offsetLeft - 5 + "px";
						tail();
					}, 50)
					break;
				case 39:
					clearInterval(clc)
					clc = setInterval(function() {
						oDiv[0].style.left = oDiv[0].offsetLeft + 5 + "px";
						tail();
					}, 50)
					break;
			}
		}

		/*尾部div跟隨前一個div*/
		function tail() {
			for (var i = oDiv.length - 1; i > 0; i--) {
				oDiv[i].style.top = oDiv[i - 1].offsetTop + "px";
				oDiv[i].style.left = oDiv[i - 1].offsetLeft + "px";
			}
		}
	</script>

告辭！