一个120行的javascript贪吃蛇的代码

最新推荐文章于 2024-08-08 13:37:43 发布

疯狂的逻辑

最新推荐文章于 2024-08-08 13:37:43 发布

阅读量1k

点赞数 1

分类专栏：杂文文章标签： javascript function timer xhtml html div

本文链接：https://blog.csdn.net/gary_1026/article/details/7457982

版权

杂文专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>贪吃蛇</title>
<style type="text/css">
	#playSpace{ width:300px; height:300px; background-color:#CCCCCC; padding:0px;}
	ul{ position:absolute; margin:0px; padding:0px; width:15px; height:15px;; background-color:#00FFFF; z-index:1;}
</style>
<script type="text/javascript">
	var oDiv;
	var uls;
	var timer;
	var newUl;
	var keyNum=37;
	var posX = new Array(3);
	var posY = new Array(3);
	window.οnlοad=function(){
		oDiv = document.getElementById("playSpace");
		uls = document.getElementsByTagName("ul");
		for(var i=0;i<uls.length;i++){
			uls[i].style.top = oDiv.offsetTop+225+"px";
			uls[i].style.left = oDiv.offsetLeft+(15*(13+i))+"px";
		}
		runTimer();
		randomUl();
	}
	//模块运动函数
	function runTimer(){
		timer = setInterval(function(){
			setPosition();
			firstMove();
			checkPosition();
			showResult();
		},500);
	}
	//获取各个模块定位函数
	function setPosition(){
		for(var i=0;i<uls.length-1;i++){
			posX[i] = uls[i].offsetLeft;
			posY[i] = uls[i].offsetTop;
		}
	}
	//获得第一个模块的运动方向
	function setDirection(){
		if(event.keyCode==37||event.keyCode==38||event.keyCode==39||event.keyCode==40){
			if(checkDirection(event.keyCode)){
				keyNum = event.keyCode;
			}
		}		
	}
	//设置第一个模块的运动轨迹
	function firstMove(){
		if(keyNum==37){
			uls[0].style.left = uls[0].offsetLeft-15+"px";
		}else if(keyNum==38){
			uls[0].style.top = uls[0].offsetTop-15+"px";
		}else if(keyNum==39){
			uls[0].style.left = uls[0].offsetLeft+15+"px";
		}else if(keyNum==40){
			uls[0].style.top = uls[0].offsetTop+15+"px";
		}
	}
	//产生一个随机模块
	function randomUl(){
		newUl = document.createElement("ul");
		do{
			newUl.style.top = oDiv.offsetTop+15*parseInt(Math.random()*20)+"px";
			newUl.style.left = oDiv.offsetLeft+15*parseInt(Math.random()*20)+"px";
		}while(ulFlag());
		oDiv.appendChild(newUl);
	}
	//判断新模块是否重叠
	function ulFlag(){
		for(var i=0;i<uls.length-1;i++){
			if(uls[i].offsetTop==newUl.offsetTop && uls[i].offsetLeft==newUl.offsetLeft){
				return true;
			}
		}
		return false;
	}
	//判断是否已经连接新模块
	function checkPosition(){
		if(uls[0].offsetTop==newUl.offsetTop && uls[0].offsetLeft==newUl.offsetLeft){
			randomUl();
		}
		for(var i=1;i<uls.length-1;i++){
				uls[i].style.top = posY[i-1]+"px";
				uls[i].style.left = posX[i-1]+"px";
		}
	}
	//判断运动方向是否合理

         function checkDirection(num){
		if(num==37){
			if(uls[0].offsetLeft-15==uls[1].offsetLeft){
				return false;
			}
		}else if(num==38){
			if(uls[0].offsetTop-15==uls[1].offsetTop){
				return false;
			}
		}else if(num==39){
			if(uls[0].offsetLeft+15==uls[1].offsetLeft){
				return false;
			}
		}else if(num==40){
			if(uls[0].offsetTop+15==uls[1].offsetTop){
				return false;
			}
		}
		return true;
	}
	//结果显示
	function showResult(){
		if(uls[0].offsetTop<oDiv.offsetTop || uls[0].offsetTop>oDiv.offsetTop+300){
			clearInterval(timer);
			alert("GAME OVER");
		}else if(uls[0].offsetLeft<oDiv.offsetLeft || uls[0].offsetLeft>oDiv.offsetLeft+300){
			clearInterval(timer);
			alert("GAME OVER");
		}
		for(var i=4;i<uls.length-1;i++){
			if(uls[0].offsetTop==uls[i].offsetTop && uls[0].offsetLeft==uls[i].offsetLeft){
				clearInterval(timer);
				alert("GAME OVER");
			}
		}
	}
</script>
</head>

<body οnkeyup="setDirection()">
	<div id="playSpace">
		<ul></ul>
		<ul></ul>
		<ul></ul>
	</div>
</body>
</html>