JQuery初学--贪吃蛇小游戏

ForRise_Liu

已于 2023-02-22 20:40:45 修改

阅读量154

点赞数

文章标签： jquery javascript 前端

于 2023-02-18 11:22:03 首次发布

本文链接：https://blog.csdn.net/m0_51589341/article/details/129098135

版权

全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>贪吃蛇</title>
		<style type="text/css">
			table{
				border-collapse: collapse;
				background-image: url('img/3.jpeg');
				background-repeat: no-repeat;
				background-size: 100%;
			}
			td{
				height: 20px;
				width: 20px;
				border: 1px ;

			}
			.red{
				background-color: blue;
			}
			.green{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<table id="tb1" align="center">
			
		</table>
		<p style="text-align: center;">按↑，←，→开始游戏</p>
		<p style="text-align: center;">按 空格 暂停</p>
		<script src="js/jquery-3.6.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			//init a space to active
			var x=20;
			var y=20;
			for(var i=0;i<x;i++){
				var tr="<tr>";
				for(var j=0;j<y;j++){
					tr+="<td></td>";
				}
				tr+="</tr>";
				$("#tb1").append(tr);
			}
			
			//init a snack
			var arr=[[13,10],[12,10],[11,10],[10,10]];
			var render=function(){
				$("td").removeClass("red");
				
			$.each(arr,function(i,v){
				var x1=v[0];
				var y1=v[1];
				$("tr:eq("+x1+") td:eq("+y1+")").addClass("red");
			});
			};
			var self =function(a,b){
				$.each(arr,function(i,v){
					if(v[0]===a&&v[1]===b){
						if(confirm("game over")){
							window.location.reload();
						}
						
					}
				});
			}
			setInterval(render,100);
			var f=0;
			var move=function(){
				if(f==39){
					arr.splice(0,1);
					var l=arr.length;
					if(arr[l-1][1]===19){						
						if(confirm("game over")){
							window.location.reload();
						}
					}
					self(arr[l-1][0],arr[l-1][1]+1);
					if(arr[l-1][0]===randomx&&arr[l-1][1]===randomy){
						arr.splice(l,0,[randomx,randomy+1]);
						$("tr:eq("+randomx+") td:eq("+randomy+")").removeClass("green");
						random();
						}
					arr[arr.length]=[arr[l-1][0],arr[l-1][1]+1];
					
				}
				else if(f==40){
					arr.splice(0,1);
					var l=arr.length;
					if(arr[l-1][0]===19){
						if(confirm("game over")){
							window.location.reload();
						}
					}
					self(arr[l-1][0]+1,arr[l-1][1]);
					
					if(arr[l-1][0]===randomx&&arr[l-1][1]===randomy){
						arr.splice(l,0,[randomx+1,randomy]);
						$("tr:eq("+randomx+") td:eq("+randomy+")").removeClass("green");
						random();
						}
					arr[arr.length]=[arr[l-1][0]+1,arr[l-1][1]];
					
				}
				else if(f==38){
					arr.splice(0,1);
					var l=arr.length;
					if(arr[l-1][0]===0){
						if(confirm("game over")){
							window.location.reload();
						}
					}
					self(arr[l-1][0]-1,arr[l-1][1]);
					if(arr[l-1][0]===randomx&&arr[l-1][1]===randomy){
						arr.splice(l,0,[randomx-1,randomy]);
						$("tr:eq("+randomx+") td:eq("+randomy+")").removeClass("green");
						random();
						}
					arr[arr.length]=[arr[l-1][0]-1,arr[l-1][1]];
					
				}
				else if(f==37){
					
					
					arr.splice(0,1);
					var l=arr.length;
					if(arr[l-1][1]===0){						
						if(confirm("game over")){
							window.location.reload();
						}
					}
					self(arr[l-1][0],arr[l-1][1]-1);
					if(arr[l-1][0]===randomx&&arr[l-1][1]===randomy){
						arr.splice(l,0,[randomx,randomy-1]);
						$("tr:eq("+randomx+") td:eq("+randomy+")").removeClass("green");
						random();
						}
					arr[arr.length]=[arr[l-1][0],arr[l-1][1]-1];
					
				}
			}
			setInterval(move,200);
			
			var randomx = parseInt (Math.random( )*20) ;
			var randomy = parseInt (Math.random( )*20) ;
			$("tr:eq("+randomx+") td:eq("+randomy+")").addClass("green");
			var random=function(){
				randomx = parseInt (Math.random( )*20) ;
				randomy = parseInt (Math.random( )*20) ;
			$("tr:eq("+randomx+") td:eq("+randomy+")").addClass("green");}
			$("body").on("keydown",function(e){
				if(e.keyCode===37&&f!=39){//left
					f=e.keyCode;
				}else if(e.keyCode===38&&f!=40){//up
					f=e.keyCode;
				}else if(e.keyCode===39&&f!=39){//right
					f=e.keyCode;
				}else if(e.keyCode===40&&f!=38&&f!=0){//down
					f=e.keyCode;
				}else if(e.keyCode===32&&f!=0){//parse
					f=e.keyCode;
				}
				
			});
		</script>
	</body>
</html>