JQuery贪吃蛇

呆萌小狼君

于 2021-01-18 23:57:25 发布

阅读量155

点赞数

分类专栏： Java入门文章标签：游戏

本文链接：https://blog.csdn.net/weixin_44093802/article/details/112797703

版权

Java入门专栏收录该内容

15 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.mainpanel{
			width: 800px;
			height: 400px;
			border: 1px solid #00007f;
			margin: auto;
            }

			p{
				text-align: center;
			}
			
			.innerbg{
				height: 18px;
				width: 18px;
				margin: 1px;
				float: left;
				background-color: #c4d3ce;
			}
			.snake{
				background-color: #FF0000;
			}
			.food{
				background-color: #00007F;
			}
			.window{
				width: 300px;
				height: 200px;
				background-color: #ffaaff;
				border-radius: calc(20px);
				display: none;
				position: fixed;
				top: 15%;
				left: 35%;
				text-align: center;
				line-height: 200px;
				font-size: 50px;
				color: #FF0000;
			}
			

		</style>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script>
			//蛇的横纵向坐标
			var snakeX=[4,5,6,7];
			var snakeY=[4,4,4,4];
			var foodX;
			var foodY;
			var mytime=200;
			var flag=true;
			var run;
			var canFlag=true;
			
			//蛇头位置
			var snakeXHead=7;
			var snakeYHead=4;
			direction=39;
			
			//数组创建点阵占位
			var basearr=new Array(40);
			
			for(var i=0;i<40;i++){
				basearr[i]= new Array(20);
			}
			
			$(function(){
				//查看数组
				// console.log(basearr);
				//创建div并与数组关联
				for(var y=0;y<20;y++){
					for(var x=0;x<40;x++){
					var content=$('<div class="innerbg"></div>');
						basearr[x][y]=content;
					$("#mainpanel").append(basearr[x][y]);
					}
				}
				//开始游戏
				
				$("#startBtn").click(function(){
					//游戏开始后禁用开始按钮
					
					$(this).prop("disabled",true);
					init();
					run = setInterval("snakeMove()",mytime);	
					makeFood();
					
				})
				
				//停止游戏  启用按钮
				$("#stopBtn").click(function(){
					clearInterval(run);
					$("#startBtn").prop("disabled",false);
					
				})
				//蛇默认位置
				drawSnake();
				
				$(document).keyup(function(event){
					if(canFlag&&event.keyCode>=37&&event.keyCode<=40&&Math.abs(direction-event.keyCode)!=2){
						direction=event.keyCode;
						console.log(event.keyCode);
						canFlag=false;
					}
				})
			})
			//制造食物
			function makeFood(){
			
				
				do{
					foodX= parseInt(Math.random()*40);
					foodY=parseInt(Math.random()*20);
					
					for(var z=0;z<=snakeX.length;z++){
						if(snakeX[z]==foodX&&snakeY[z]==foodY){
							flag=true;
							console.log("食物长身体上了!")
							
						}else{
							basearr[foodX][foodY].addClass("food");
							flag=false;
							
						}
						
					}
				}while(flag)
				
				
			}
				 //画蛇方法体
				function drawSnake(){
					
					for(var i=0;i<snakeX.length;i++){
						if(snakeX[i]>=0&&snakeX[i]<=39&&snakeY[i]>=0&&snakeY[i]<=19){
						basearr[snakeX[i]][snakeY[i]].addClass("snake");
						console.log(11111111111111111);
						}
					}
				}
				//清空蛇以便制造移动的蛇
				function clearSnake(){
					for(var i=0;i<snakeX.length;i++){
						basearr[snakeX[i]][snakeY[i]].removeClass("snake");
					}
				}
		
				//蛇移动
				function snakeMove(){
					
					clearSnake();
					//方向向右
					//x方向+1  y方向不变
					/*
					37左
					38上
					39右
					40下
					 */
					
					if(direction==39){
						snakeX.push(++snakeXHead);
						snakeY.push(snakeYHead);
					}else if(direction==37){
						snakeX.push(--snakeXHead);
						snakeY.push(snakeYHead);
					}else if(direction==40){
						snakeX.push(snakeXHead);
						snakeY.push(++snakeYHead);
					}else if(direction==38){
						snakeX.push(snakeXHead);
						snakeY.push(--snakeYHead);
					}
					
					//吃食物
					if(snakeXHead==foodX&&snakeYHead==foodY){
						basearr[foodX][foodY].removeClass("food");
						mytime-=20;
						//显示速度
						console.log("speed:"+mytime);
						//清除原来的interval 越吃越快
						clearInterval(run);
						run=setInterval("snakeMove()",mytime);
						makeFood();
					}else{
						
						snakeX.shift();
						snakeY.shift();
						
					};
					
					//判断蛇死亡
					snakeDie();
					
					//画蛇
					drawSnake();
					
					canFlag=true;
				}
				//蛇死亡
			function snakeDie(){
				if(snakeXHead<0||snakeYHead<0||snakeXHead>39||snakeYHead>19){
					//console.log(snakeXHead+"----"+snakeYHead);
					//alert("撞墙了!");
					$(".window").html("撞墙了");
					$(".window").fadeIn(500);
					
					clearInterval(run);
					return;
				}
				for(var dd=0;dd<snakeX.length-1;dd++){
					if(snakeX[dd]==snakeXHead&&snakeY[dd]==snakeYHead){
						//alert("吃到自己了!");
						$(".window").html("吃到自己了!");
						$(".window").show(500);
						clearInterval(run);
						return;
					}
				}
				
			}
			function init(){
				$("#mainpanel").html("");
				
				for(var y=0;y<20;y++){
					for(var x=0;x<40;x++){
					 content=$('<div class="innerbg"></div>');
						basearr[x][y]=content;
					$("#mainpanel").append(basearr[x][y]);
					}
				}
				 snakeX=[4,5,6,7];
				 snakeY=[4,4,4,4];
				drawSnake();
				 mytime=200;
				
				//蛇头位置
				 snakeXHead=7;
				 snakeYHead=4;
				direction=39;
			}
			
		</script>
	</head>
	<body>
		<div id="mainpanel" class="mainpanel">
		</div>
		<div class="window"></div>
		<p>
			<input id="startBtn" type="button" value="开始" />
			<!-- <input id="testBtn" type="button" value="测试" /> -->
			<input id="stopBtn" type="button" value="停止" />
		</p>
	</body>
</html>

呆萌小狼君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery贪吃蛇

JQuery贪吃蛇<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .mainpanel{ width: 800px; height: 400px; border: 1px solid #00007f; margin: auto; } p{
复制链接

扫一扫