贪吃蛇js

python都学不懂，c++又不会，只能写写js来维持生活了。555555

js：

window.onload = function() {
	var wrap = document.getElementsByClassName("wrap")[0];
	var uls = document.getElementsByClassName("sbody")[0];
	var hand = document.getElementsByClassName("hand")[0];
	var food = document.getElementsByClassName("food")[0]; //食物
	var lis = document.getElementsByTagName("li");
	var fens = document.getElementById("fens");
 
	//让头部动起来
	//判断方向的标志
	var handT = false; //ture上false下
	var handL = false; //ture左false右
 
	//控制定时器频率的
	var seep = 200;
 
	//键盘方向标志
	var handCt = false; //t被按f没有
 
	var handTop = 180,
		handLeft = 180; //初始值
	var stime;
	//本体和框架的宽高
	var handW = 30,
		handH = 30;
	var wrapW = 900,
		wrapH = 600;
	hand.style.top = handTop + "px";
	hand.style.left = handLeft + "px";
 
	//食物闪动
	setInterval(function() {
			if(food.style.opacity == "1") {
				food.style.opacity = "0.3";
			} else {
				food.style.opacity = "1";
			}
		}, 600)
		//存储身体各位置数组
 
	//存储位置数组
	var arrL = [];
	var arrT = [];
 
	function handMove() {
		stime = setInterval(function() {
 
			foodPingk();
			//-----sbody位置刷新函数,要写在hand位置获得之前才行
			//不然会重叠，因为是每次头部最后再移动位移就会先跑到前面了
			for(var i = lis.length - 1; i > 0; i--) {
				lis[i].style.left = lis[i - 1].style.left;
				lis[i].style.top = lis[i - 1].style.top;
			}
			//判断键盘上上下按键
			if(handCt) {
 
				if(handT) {
					if(handTop <= 0) { //边缘碰撞检测
						handTop = wrapH - handH;
					} else {
						handTop -= 30;
					}
				} else {
					if(handTop >= (wrapH - handH)) {
 
						handTop = 0;
					} else {
						handTop += 30;
					}
				}
				//				console.log(handTop);
				hand.style.top = handTop + "px";
			} else {
 
				if(handL) {
					if(handLeft <= 0) {
						handLeft = wrapW - handW;
					} {
						handLeft -= 30;
					}
				} else {
					if(handLeft >= (wrapW - handW)) {
						handLeft = 0;
					} else {
						handLeft += 30;
					}
				}
				//				console.log(handLeft);
				hand.style.left = handLeft + "px";
			}
 
			//存储位置数组
			arrL = [];
			arrT = [];
			for(var i = 0; i < lis.length; i++) {
				arrL.push(lis[i].style.left);
				arrT.push(lis[i].style.top);
			}
			console.log(arrL);
			console.log(arrT);
			//是否自杀了
			zisha();
 
		}, seep)
	}
 
	//判断是否撞到自己的函数
	function zisha() {
		//如果数组头部第一个和arrT、arrL里其他重复就是是叠加了
		for(var i = 1; i < arrT.length; i++) {
			if(arrT[0] == arrT[i] && arrL[0] == arrL[i]) {
 
				fens.innerHTML = "游戏结束：" + fen + "分<br/>点击任意键返回";
				uls.style.zIndex = "0";
 
				fen = 0;
				fens.style.fontSize = "100px";
				fens.style.lineHeight = "120px";
				clearInterval(stime);
				uls.style.opacity = "0.2";
 
				document.addEventListener("keydown", function() {
					//点击任意键返回
					location.reload();
				}, false)
 
			}
		}
 
	}
 
	//------随机产生的食物的位置
	function getRandom(min, max) {
		return Math.floor(Math.random() * (max - min) + min);
	}
	//宽度30个，高度20个
	function foods() {
		//		food.style.backgroundColor = "rgba(" + getRandom(0, 255) + "," + getRandom(0, 255) + "," + getRandom(0, 255) + ",1)";
		var foodRandomT = getRandom(0, 20);
		var foodRandomL = getRandom(0, 30);
		//不把食物在身体上
		for(var i = 0; i < arrT.length; i++) {
			while(foodRandomT == arrT[i] && foodRandomL == arrL[i]) {
				foodRandomT = getRandom(0, 20);
				foodRandomL = getRandom(0, 30);
				i = 0;
			}
		}
 
		food.style.top = foodRandomT * 30 + "px";
		food.style.left = foodRandomL * 30 + "px";
 
	}
	foods();
	//-----本体碰撞框内检测
	function sbodyPingk() {
 
		//碰到上下检测
		if(handTop <= 0) {
			handTop = wrapH - handH;
		} else if(handTop >= (wrapH - handH)) {
 
			handTop = 0;
		}
		//碰到左右检测
		if(handLeft <= 0) {
			handLeft = wrapW - handW;
		} else if(handLeft >= (wrapW - handW)) {
			handLeft = 0;
		}
	}
	//-----食物碰撞监测
	var fen = 0;
 
	function foodPingk() {
		var foodW = 30,
			foodH = 30;
		var foodLeft = food.offsetLeft;
		var foodTop = food.offsetTop;
		var foodRight = foodLeft + foodW;
		var foodBottom = foodTop + foodH;
		//碰撞情况,完全重叠
 
		if(foodLeft == handLeft && handTop == foodTop) {
			shuaxin();
		}
 
	}
	//刷新的函数
	function shuaxin() {
		foods();
 
		if(fens.style.fontSize == "300px") {
			fens.style.fontSize = "50px";
		} else {
			fens.style.fontSize = "300px";
		}
		fen += 1;
		fens.innerHTML = fen;
		//增加一个
		var newLi = document.createElement("li");
		uls.appendChild(newLi);
	}
 
	//-----同样的键值按两次不触发
	var TkeyCode = true,
		TkeyOld = 0;
 
	//-----检测键盘
	document.addEventListener("keydown", function(e) {
		uls.style.opacity = "1";
		fens.style.zIndex = "0";
		fens.innerHTML = fen;
		fens.style.fontSize = "300px";
 
		var e = e || window.event;
		var keyCode = e.keyCode || e.which;
 
		if(TkeyOld == keyCode) {
			TkeyCode = false;
		} else {
			TkeyCode = true;
		}
		if(TkeyCode == true) {
			TkeyOld = keyCode;
			//每次进入重置定时器
			clearInterval(stime);
			//加速
			if(e.shiftKey) {
				seep -= 40;
				if(seep < 40) {
					seep = 60;
				}
				//				alert(seep);
			}
			//开始运动
			handMove();
			//重新开始，刷新页面
			if(e.altKey) {
				location.reload();
			}
			//如果正在向左或右运动，左右键无效,反之同样
			if(handCt == false) {
				switch(keyCode) {
 
					case 40: //下
						handCt = true;
						handT = false;
						break;
					case 38: //上
						handCt = true;
						handT = true;
						break;
				}
			} else {
				switch(keyCode) {
					case 37: //左
						handCt = false;
						handL = true;
						break;
					case 39: //右
						handCt = false;
						handL = false;
						break;
				}
			}
		}
	}, false)
 
};

html

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>贪食蛇</title>
</head>
<script type="text/javascript" src="js/index.js">
		
	</script>
<style type="text/css">
*{
	padding: 0;
	margin: 0;
}
li{
	list-style: none;
}
		.wrap{
	position: relative;
	width: 900px;
	height: 600px;
	margin: 100px auto 0;
	border: 10px red solid;
	background-color: rgba(0,0,0,0.7);
	z-index: 1;
}
.sbody{
	position: relative;
	z-index: 3;
	
}
.sbody li{
	position: absolute;
	height: 30px;
	width: 30px;
	background-color: aqua;
	border-radius: 45%;
 
	
}
.sbody li:last-child{
	background-color: pink;
}
.wrap .sbody .hand{
	
	background-color: lawngreen;
	border-radius: 5px;
}
 
.food{
	position: absolute;
	height: 30px;
	width: 30px;
	background-color: yellow;
	border-radius: 50%;
	
	transition-duration: .6s;
	
}
.fen{
	position: absolute;
	width: 100%;
	height: 100%;
}
.fen #fens{
	z-index: 2;
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	display: block;
	line-height: 70px;
	transition-duration: .4s;
	
	width: 100%;
	/*height: 100%;*/
	font-size: 50px;
	text-align: center;
	/*color: lightpink;*/
}
/*#bg{
	position: absolute;
	width: 100%;
	height: 100%;
	
}*/
	</style>
<body>
<!--游戏区域-->
<div class="wrap">
	
	<div class="fen">
		<span id="fens" style="font-size: 50px;">点击任意键开始游戏<br />
		按Shift加速<br />方向键控制移动<br />Alt键重新开始</span>
	</div>
	<!--<div id="bg">
		
	</div>-->
	<!--食物-->
	<div class="food" style="opacity: 1;"></div>
	<!--本体-->
	<ul class="sbody">
				<!--头部-->
		<li class="hand"></li>
			</ul>
</div>
 
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>