javascript之【贪吃蛇系列】第二弹：jQuery实现简单的贪吃蛇。

最新推荐文章于 2022-07-21 20:37:31 发布

u010800530

最新推荐文章于 2022-07-21 20:37:31 发布

阅读量1.1k

点赞数

分类专栏： JavaScript学习文章标签： jquery css function javascript html

本文链接：https://blog.csdn.net/u010800530/article/details/38336385

版权

JavaScript学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

界面和第一个差不多，这次的代码纯手打。

还有几个地方没改，太困了也懒得改了，如果谁有问题可以在下边回复我。

这个是改过后的代码，第一次的有点小问题，我把这个小问题说下引以为戒。

在做加速度upSpeed()的时候，我把intervalTime(间隔时间)减少了100，然后又重新设置了setInterval()，但是这里就有问题了，在重新设置setInterval()方法之前，我并没有clearInterval()，因为就造成了贪吃蛇的头部和其余的身体速度不一致，然后他们就会一会快一会慢的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<script src="jquery.js"></script>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>贪吃蛇</title>
		
		<script type="text/javascript">
			var gridWidth = 20; //网格的行格子数目
			var gridHeight = 20; //网格的列格子数目
			var core = 0; //得分
			var direction = "right"; //初始方向
			var intervalTime = 1000; //间隔时间
			var speedClass = 0; //速度级别
			var size=20; //贪吃蛇和食物大小
			var interval_id;
			var body=[];
			
			$(function(){				
				$(document).keydown(function(evt){
        			evt = evt ||window.event;
        			var key=evt.which||evt.keyCode;
        			switch(key)
        			{
		            	case 37:direction="left";break;
		            	case 38:direction="up";break;
		            	case 39:direction="right";break;
		            	case 40:direction="down";break;
        			}
    			});
				init();
			})
			
			function init(){
				initGrid();
				initSnake();
				produceFood();
				$("#btn").click(btnStart);
				$("#reset").click(btnReStart);
				$("#upSpeed").click(upSpeed);
				$("#downSpeed").click(downSpeed);
			}
			
			//动态生成表格
			function initGrid(){
				var strHtml = "";
				strHtml+="<table border-collapse:collapse;>";
				for(var i=0;i<gridWidth;i++){
					strHtml+="<tr>";
					for(var j=0;j<gridHeight;j++){
						strHtml+="<td></td>";
					}
					strHtml+="</tr>";
				}
				$("#grid").append(strHtml);	
			}
			//初始化snake
			function initSnake(){
				var snakeX = gridWidth/2-1;
				var snakeY = gridHeight/2-1;
				
				var s = "";
				s+="tr:eq(";s+=snakeX;s+=") td:eq(";s+=snakeY;s+=")";
				$(s).addClass("snake");
				body.push({x:snakeX,y:snakeY});
			
			}
			//生成食物
			function produceFood(){
				var foodX = Math.floor(Math.random()*gridWidth+1);
				var foodY = Math.floor(Math.random()*gridHeight+1);
				
				var s = "";
				s+="tr:eq(";s+=foodX;s+=") td:eq(";s+=foodY;s+=")";
				$(s).addClass("food");
		
			}
			
			//开始事件
			function btnStart(){
				var value = $("#btn").val();
				if(value == "开始"){
					$("#btn").val("暂停");
					interval_id = setInterval(snakeRun,intervalTime);
				}
				else if(value == "暂停"){
					$("#btn").val("开始");
					window.clearInterval(interval_id);
				}
			} 
			//重新开始事件
			function btnReStart(){
				location.reload();
			}
			//snake开始函数
			function snakeRun(){
				var result = nextMove();
				if(result == -1){
					Failure();
				}else if(result == 1){
					core=parseInt($("#core").val());
					core+=10;
					$("#core").val(core);
					
				}
			}
			//判断蛇的下一步是什么
			function nextMove(){
				var pos = getNextPos();
				var x = pos.x; //这些是下一个节点的坐标
				var y = pos.y;
				
				var length = body.length;
				var s = str(x,y);
				
				if (x > 0 && x < 20 && y > 0 && y < 20) {
					if ($(s).hasClass('snake')) {
						alert("撞到自己了");
						return -1;
					}
					else if ($(s).hasClass('food')) {
						body.unshift({x:x,y:y});
						$(s).removeClass('food');
						$(s).addClass('snake');
						produceFood();
						return 1;
					}else{
						var _x = body[length-1].x;
						var _y = body[length-1].y;
						var s_last = str(_x,_y);
						
						$(s_last).removeClass('snake');
						body.pop();
						
						body.unshift({x:x,y:y});
						
						$(s).addClass('snake');
						
						return 0;
					}
				}else{
					alert("撞到墙了");
					return -1;
				}
			}
			function getNextPos(){
				var x = body[0].x;
				var y = body[0].y;
				
				if(direction == "left"){
					y-=1;
				}else if(direction == "right"){
					y+=1;
				}else if(direction == "up"){
					x-=1;
				}else if(direction == "down"){
					x+=1;
				}
				return {x:x,y:y};
				
			}
			//选择单元格函数
			function str(x,y){
				var s = "";
				s+="tr:eq(";s+=x;s+=") td:eq(";s+=y;s+=")";
				return s;
			}
			//游戏结束
			function Failure(){
				alert("游戏结束")
				clearInterval(interval_id);
			}
			//增加速度
			function upSpeed(){
				clearInterval(interval_id);
				intervalTime-=100;
				speedClass = (1000-intervalTime)/100;
				$("#speed").val(speedClass);
				interval_id = setInterval(snakeRun,intervalTime);
			}
			//减少速度
			function downSpeed(){
				if(speedClass<1000){
					intervalTime+=100;
					speedClass = (1000-intervalTime)/100;
					$("#speed").val(speedClass);
					interval_id = setInterval(snakeRun,intervalTime);
				}
			}
			
				
		</script>
		<style type="text/css">
			.snake{background:blue;width:20px;height:20px;}
			.food{background:red;width:20px;height:20px;}
			.clear{clear:both;}
			
			body{background:#333333;}
			
			table {color:white; line-height: 22px; color:red; }
			table, tr, td { border: 1px solid #ccc; border-collapse: collapse; }
			table tr { background-color: #ececec; }
			td{width:20px;height:20px;}
			
			#pannel{margin-left:650px; width:400px;}
			#grid{font-size:20px; border:1px solid red; background:white;}
			input{width:80px; height:30px; margin-left:10px;}
			#operate{margin-top:40px; margin-left:10px; font-size:20px;}
			#speed,#core{height:30px; width:50px; text-align:center; color:red; font-size:20px;}
		    #operate span{color:white;}	
				
		</style>
	</head>
	 
	<body>
		<div id="pannel">
			<div id="grid">
	
			</div>
			<div id="operate">
				<input type="button" id="btn" value="开始" />
				<input type="button" id="reset" value="重新开始" />
				<input type="button" id="upSpeed" value="加速" />
				<input type="button" id="downSpeed" value="减速" /><br><br>
				<span>当前分数：<input type="text" id="core" value=0 readonly="readonly" /></span>
				<span>当前速度<input type="text" id="speed" value=0 readonly="readonly" /></span>
			<div>
		</div>
	</body>
</html>