js实现贪吃蛇以及自动寻找食物及项目报告

于 2020-12-23 17:12:20 发布
阅读量621 收藏 5
点赞数 1
文章标签： javascript html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45183998/article/details/111593833
版权

快到期末了也是老师喊写一个js贪吃蛇报告.所以就写了下,下面分享出来.

直接上代码了,除了自动寻找食物的bfs没有注释,其它注释都挺全的.这个只是简单的实现了,并没有很好的优化.后面有报告及源码,直接运行即可成功.

  1. 先来把截图

  2. HTML部分 
    <!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>贪吃蛇</title>
		<link rel="stylesheet" href="css.css">
		
		<script src="sanke.js"></script>
	</head>
	<body bgcolor="skyblue">
		<div style="scrollbar-width: none;">
		<h1 class="h1"><span class="sp1">贪</span><span class="sp2">吃</span><span class="sp3">蛇</span><span class="sp4">大</span><span
			 class="sp5">战</span></h1>
		<p class="p"><span>得分：</span><span id="fenshu">0</span></p>
		<p class="p p2"><span>用时：</span><span id="times">0</span></p>
		<div id="div1"></div>
		<p id="select">难度：
			<select id="selectop">
				<option value="100">慢</option>
				<option value="70">中</option>
				<option value="30">快</option>
			</select>
		</p>
		<input type="button" value="点击手动控制" id="but">
		<input type="button" value="点击自动控制" id="autobut">
		</div>
	</body>
</html>

     

  3. CSS部分 
    body{
	overflow-x: hidden;
	overflow-y: hidden;
}
#div1 {
	
	width: 500px;
	height: 500px;
	background: linear-gradient(#6ac1e9, #02293d);
	/* background-color: #000; */
	margin: 10px auto;
	position: relative;
}

#div1 span {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #38D138;
	position: absolute;
	/* border-radius: 50%; */
	border: 2px solid #fff;
	;
}

#div1 i {
	display: block;
	width: 20px;
	height: 20px;
	/* border-radius: 50%; */
	border: 2px solid #fff;
	;
	background-color: #E6AC0E;
	position: absolute;
}

h1 {
	text-align: center;
}

.p {
	position: absolute;
	display: block;
	width: 100px;
	font-size: 20px;
	left: 50px;
}

.p2 {
	top: 50px;
	width: 150px;
}

#fenshu {
	color: #2A15E7;
	position: relative;
	transition: all .5s;
	opacity: 1;
}

#select {
	font-size: 20px;
	position: absolute;
	top: 130px;
	left: 50px;
}

#but {
	position: absolute;
	top: 200px;
	left: 50px;
	color: #fff;
	background-color: #337ab7;
	border: 1px solid #2e6da4;
	border-radius: 3px;
	padding: 5px 10px;
	cursor: pointer;
	opacity: .9;
	transition: all .5s;
}
#autobut {
	position: absolute;
	top: 250px;
	left: 50px;
	color: #fff;
	background-color: #337ab7;
	border: 1px solid #2e6da4;
	border-radius: 3px;
	padding: 5px 10px;
	cursor: pointer;
	opacity: .9;
	transition: all .5s;
}
#but:hover {
	opacity: 1;
}

     

  4. JS部分 
    window.onload = function() {
	
	var autotype = false;
	var maxn = 25;
	var autoMap = new Array();
	var autoVis = new Array();
	var autoDis = [[-1,0],[0,1],[1,0],[0,-1]];// u r d l ;
	var autoStr = new Array();
	var autofoodx=0;
	var autofoody=0;
	var Str="";
	var v=100;
	var bug=true;

	var div1 = document.getElementById("div1");       //获取地图的区域块
	var fenshu = document.getElementById("fenshu");//获取分数标签
	var select = document.getElementById("selectop");//获取等级选择标签
	var but = document.getElementById("but");//获取点击开始按钮标签
	var times = document.getElementById("times");//获取时间显示标签
	var arr = [];//创建一个数组，储存蛇身节点
	var size = 20;//定义的蛇节点移动距离单位，为20个像素
	var dir = "right";//初始化蛇向右移动
	var speed = 100;//蛇移动的初始速度
	var s = 0;//统计时间变量
	var gameIsPlay = false;//游戏是否结束 为false为结
	var tip=0;
	
	
	function init(){
		Str="";
		ans=0;
		for (var i = 0; i < maxn; i++) {
			autoMap[i] = new Array();
			autoVis[i] = new Array();
			autoStr[i] = new Array();
			for(var j = 0;j < maxn; j++){
				autoMap[i][j] = 0;
				autoVis[i][j] = 1;
				autoStr[i][j] = "";
			}
		}
		for(var i = 0;i<arr.length;i++){
			var x = arr[i].style.left;
			var y = arr[i].style.top;
			autoMap[parseInt(y)/size][parseInt(x)/size] = 1;
		}
		autoMap[autofoodx/size][autofoody/size] = 2;	
	}
	
	function NNode(x,y){
		this.x=x;
		this.y=y;
	}
	
	function bfs() {
		init();
		var head = arr[arr.length-1];
		var x = head.style.left;
		var y = head.style.top;
		var xx = parseInt(y)/size;
		var yy = parseInt(x)/size;
		var node = new NNode(xx,yy);
	    var queue = [];
		queue.push(node);
		autoVis[xx][yy] = 0;
		
	    while(queue.length!=0) {
			var temp = queue.shift();
			if(autoMap[temp.x][temp.y]==2&&bug==true){
				Str=autoStr[temp.x][temp.y];
				// console.log(Str);
				break;
			}
			if(autoMap[temp.x][temp.y]==0&&bug==false){
				Str=Str=autoStr[temp.x][temp.y];
				break;
			}
	        // 分层遍历队列，没有目标元素则删除该层元素，继续遍历下一层
	        for(var i =0; i<4; i++) {//autoDis = [[0,1],[1,0],[0,-1],[-1,0]];//u r d l;
	            var dx =temp.x+autoDis[i][0];
				var dy =temp.y+autoDis[i][1];
	            if(dx>=0&&dx<maxn&&dy>=0&&dy<maxn&&autoMap[dx][dy]!=1&&autoVis[dx][dy]==1){
					autoVis[dx][dy] = 0;
					var node1 = new NNode(dx,dy);
					if(i==0){
						autoStr[dx][dy] += autoStr[temp.x][temp.y]+"u";
					}
					if(i==1){
						autoStr[dx][dy]+= autoStr[temp.x][temp.y]+"r";
					}
					if(i==2){
						autoStr[dx][dy]+= autoStr[temp.x][temp.y]+"d";
					}
					if(i==3){
						autoStr[dx][dy]+= autoStr[temp.x][temp.y]+"l";
					}
					queue.push(node1);
	            }
	        }
	    }
		if(Str[ans]==undefined){
			var maxlen=0;
			for (var i = 0; i < maxn; i++) {
				for(var j = 0;j < maxn; j++){
					if(maxlen<autoStr[i][j].length){
						maxlen=autoStr[i][j].length;
						Str=autoStr[i][j];
						console.log(Str);
					}
				}
			}
			// bug=false;
			// bfs();
			// console.log("s");
		}else{
			bug=true;
		}
	}
	
	//生成一条蛇
	function createSnake() {
		for (var i = 0; i < 4; i++) {//初始化蛇身长为4个节点
			//生成一个span
			var span = document.createElement("span");//用一个span标签作为一个蛇的节点
			arr.push(div1.appendChild(span));//将节点放入arr数组中
			span.style.left = i * size + "px";//初始化蛇节点的横坐标位置
			span.style.top = 0;//初始化蛇节点的纵坐标位置
		}
	}
	//移动小蛇
	function moveSnake() {
		
		if(Str[ans]=='r'){
			dir = "right";
		}
		if(Str[ans]=='d'){
			dir = "bottom";
		}
		if(Str[ans]=='l'){
			dir = "left";
		}
		if(Str[ans]=='u'){
			dir = "top";
		}
		var head = arr[arr.length - 1];//取出数组的最后一个蛇节点当做蛇头节点
		var Left = head.style.left;//left,top获取蛇头节点的位置（坐标也可）
		var Top = head.style.top;
		if (dir == "right") {//如果按的是右键，则相当于蛇节点的横坐标增加，纵坐标不变，
			arr[0].style.left = parseInt(Left) + size + "px";//相当于节点的横坐标left加上20个像素单位，即蛇节点向右移动
			arr[0].style.top = parseInt(Top) + "px";//相当于蛇节点的纵坐标不变
		}
		if (dir == "left") {//原理同上，则相当于蛇节点的横坐标减少，纵坐标不变
			arr[0].style.left = parseInt(Left) - size + "px";
			arr[0].style.top = parseInt(Top) + "px";
		}
		if (dir == "bottom") {//原理同上 则相当于蛇节点的横坐标不变，纵坐标增加
			arr[0].style.left = parseInt(Left) + "px";
			arr[0].style.top = parseInt(Top) + size + "px";
		}
		if (dir == "top") {//原理同上 则相当于蛇节点的横坐标不变，纵坐标减少
			arr[0].style.left = parseInt(Left) + "px";
			arr[0].style.top = parseInt(Top) - size + "px";
		}
		var kk=true;
		
		//碰撞检测
		var fen = 10;//定义一个食物值10分
		if (parseInt(arr[0].style.left) == x && parseInt(arr[0].style.top) == y) {
			//得分
			scoreAnimation()
			fenshu.innerHTML = (Number(fenshu.innerHTML) + fen);//更新分数
			// fenshu.className = "hide";
			addspan();
			createfood();//创建食物
			// bfs();
		}
		//死亡检测---边界
		if (parseInt(arr[0].style.left) >480 || parseInt(arr[0].style.left) < 0 || parseInt(arr[0].style.top) > 480 || parseInt(arr[0].style.top) < 0) {
			if(tip>=arr.length+50){
				gameIsPlay = false;
				if(autotype)
					clearInterval(h);
				clearInterval(t);
			}
			clearInterval(gameTime);
			tip++;
		}

		//碰撞自身死亡
		arr2 = [];
		for (var j = 0; j < arr.length; j++) {
			var createObject = {};
			createObject.x = parseInt(arr[j].style.left);
			createObject.y = parseInt(arr[j].style.top);
			arr2.push(createObject);	
		}
		arr2.pop();
		//让蛇头和新数组的值比对
		for (var i = 1; i < arr2.length; i++) {
			if (parseInt(Left) == arr2[i].x && parseInt(Top) == arr2[i].y) {
				if(tip==0){
					if(autotype)
						clearInterval(h);
				}
				if(tip>=arr.length+2){
					gameIsPlay = false;
					clearInterval(t);
				}
				clearInterval(gameTime);
				tip++;	
				break;
			}
		}
		arr.push(arr.shift());
	}

	//分数动画
	function scoreAnimation() {
		fenshu.style.top = "-25px";
		fenshu.style.opacity = 0;
		setTimeout(function() {
			fenshu.style.top = 0;
			fenshu.style.opacity = 1;
		}, 500)
	}
	//游戏开始
	function ready() {
		createSnake();//创建蛇身
		createfood();//创建食物	
		gameIsPlay = true//将游戏状态置为true
	}
	//清空数据
	function clear() {
		tip=0;
		ans=0;
		dir = "right";
		arr = [];
		arr2 = [];
		speed = select.value;
		fenshu.innerHTML = 0;
		s = 0;
		div1.innerHTML = "";
		times.innerHTML = 0;

	}
	//难度选择
	select.onchange = function() {
		v = this.value;//改变速度
	}
	//点击手动控制
	but.onclick = function() {
		autotype = false;
		if (!gameIsPlay) {//当游戏未开始点击开始按钮才有效
			clear();
			t = setInterval(function() {
				moveSnake()
			}, v)
			clock();
			ready();
		}
	}
	//点击自动控制
	autobut.onclick = function() {
		autotype = true;
		if (!gameIsPlay) {//当游戏未开始点击开始按钮才有效
			clear();
			h=setInterval(function(){
				bfs()
			},1)
			t = setInterval(function() {
				moveSnake()
			}, v)
			clock();
			ready();
		}
	}
	//游戏时间
	function clock() {
		gameTime = setInterval(function() {
			s++
			if (s > 60) {
				var minutes = Math.floor(s / 60);
				var sec = s - minutes * 60;
				times.innerHTML = minutes + "分" + sec + "秒"
			} else {
				times.innerHTML = s + "秒"
			}
		}, 1000)
	}
	//生成随机食物
	function createfood() {
		//当页面里有食物，先清除页面上的食物
		var food = div1.getElementsByTagName("i")[0];//获取食物标签
		if (food) {//存在食物就移除食物
			div1.removeChild(food);//移除食物
		}
		//生成一个食物
		var food = document.createElement("i");//一个定义的i标签作为食物
		x = (Math.round(Math.random() * (maxn-3))+1) * size;//随机生成横纵坐标
		y = (Math.round(Math.random() * (maxn-3))+1) * size;
		// console.log("食物位置："+x+","+y);
		for(var i=0;i<arr.length;i++){
			if(x==parseInt(arr[i].style.left)&&y==parseInt(arr[i].style.top)){
				i=-1;
				x = (Math.round(Math.random() * (maxn-1))) * size;//随机生成横纵坐标
				y = (Math.round(Math.random() * (maxn-1))) * size;
			}
		}
		autofoody=x;
		autofoodx=y;
		div1.appendChild(food);//添加到div1标签里
		food.style.left = x + "px";
		food.style.top = y + "px";
	}
	//生成一个新span，添加到蛇尾
	function addspan() {
		var span = document.createElement("span");
		span.style.left = arr[0].style.left;
		span.style.top = arr[0].style.top;
		div1.appendChild(span);
		arr.unshift(span);//将span插入到数组下标为0的位置,unshift() 方法可向数组的开头添加一个或更多元素，其他已存在元素向后移并返回新的长度。
	}

	//键盘操纵
	window.onkeydown = function(event) {//获取键盘方向
		if (event.keyCode == 39 && dir != "left") {
			dir = "right";
		}
		if (event.keyCode == 40 && dir != "top") {
			dir = "bottom";
		}
		if (event.keyCode == 37 && dir != "right") {
			dir = "left";
		}
		if (event.keyCode == 38 && dir != "bottom") {
			dir = "top";
		}
		if (event.keyCode == 13) {//空格为重新开始

			if (!gameIsPlay) {//当游戏结束时才生效
				clear();
				t = setInterval(function() {
					moveSnake()
				}, speed);
				clock()
				ready()
			}
		}
	}
}

    最后来一手项目报告,一手垃圾报告只为完成期末的写的垃圾报告,源码,请移步百度网盘.

    链接：https://pan.baidu.com/s/1S73QdXYZw8BDRMDmQ1BN6w 
    提取码：only 

一枳理智梦
关注
java贪吃蛇详细设计,javascript贪吃蛇游戏设计与实现
weixin_33539834的博客
03-16 533
本文为大家分享了javascript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下效果图设计贪吃蛇游戏是一款休闲益智类游戏。既简单又耐玩。该游戏通过控制蛇头方向吃蛋，从而使得蛇变得越来越长。玩法：点击屏幕控制蛇的移动方向，寻找吃的东西，每吃一口就能得到一定的积分，而且蛇的身子会越吃越长，身子越长玩的难度就越大，不能咬到自己的身体，更不能咬自己的尾巴，等到了一定的分数，游戏胜利。设计：首先需要创...
贪食蛇 课程设计 完整课题报告
10-09
里面包含贪食蛇的源程序，运行截图以及心得感受
JS写的贪吃蛇
sdlfx的专栏
10-24 2147
         昨晚睡前突然想用JS写一个贪吃蛇的程序。下午没什么事，于是就动笔了。不够熟练，花了两小时，更惭愧的是还有点问题，就是从吃第二个食物开始蛇的长度就不会增加了。整条蛇是一个对象数组，测试时发现数组的长度是正确的，只是保存的坐标有误，然未能想到怎么修正。         过了一天，晚上重新拿出来看，突然想到了是哪的问题。现将代码分享如下： head>meta http-
贪食蛇实验报告
05-08
贪食蛇的源代码，还有实验过程，非常好用，可以让想学习c的项目的人
贪吃蛇游戏设计报告 游戏 报告 贪吃蛇
11-07
游戏报告 贪吃蛇游戏设计报告 游戏 报告 贪吃蛇
汇编语言实验报告 贪食蛇 贪吃蛇 汇编语言版
05-30
汇编语言实验报告 贪食蛇 贪吃蛇 贪吃蛇贪吃蛇 汇编语言版 贪吃蛇汇编版汇编语言实验报告 贪食蛇 贪吃蛇 贪吃蛇贪吃蛇 汇编语言版 贪吃蛇汇编版汇编语言实验报告 贪食蛇 贪吃蛇 贪吃蛇贪吃蛇 汇编语言版 贪吃蛇汇编版汇编语言实验报告 贪食蛇 贪吃蛇 贪吃蛇贪吃蛇 汇编语言版 贪吃蛇汇编版汇编语言实验报告 贪食蛇 贪吃蛇 贪吃蛇贪吃蛇 汇编语言版 贪吃蛇汇编版汇编语言实验报告 贪食蛇 贪吃蛇 贪吃蛇贪吃蛇 汇编语言版 贪吃蛇汇编版
JS贪吃蛇总结
周小宇的专栏
11-03 612
先上代码 //1.绘制地图 function Map(){ var len = 20; var w = 800; var h = 500; this.showmap = function(){ var div = document.createElement('div'); div.style.width=w+"px"; div.st
JS实现贪吃蛇自动寻路算法，使用JS完成的贪吃蛇游戏，在此基础上增加了寻路算法自动寻找食物
12-29
在JavaScript（JS）编程中，实现贪吃蛇自动寻路算法是一项有趣且具有挑战性的任务。这个项目基于经典的贪吃蛇游戏，通过引入寻路算法，使得蛇能够自动找到并追逐食物，增强了游戏的趣味性和自动化程度。在这个过程中...
贪吃蛇(个体自动追踪).zip
最新发布
06-17
标题中的“贪吃蛇(个体自动追踪)”暗示了这是一个与编程相关的项目，可能是用代码实现了一个具有自动追踪功能的贪吃蛇游戏。贪吃蛇游戏是经典的计算机程序，通常用作初学者学习编程的入门练习。它涉及到基本的编程...
JS贪吃蛇游戏增添智能寻路算法
资源摘要信息:"该资源主要讨论如何使用JavaScript（JS）实现贪吃蛇游戏中的自动寻路算法。贪吃蛇游戏是经典的电子游戏之一，玩家需要控制一条不断增长的蛇，通过吃掉屏幕上出现的食物来获得分数，同时避免撞到自己的...
《贪吃蛇游戏课程设计》报告.pdf
09-19
《贪吃蛇游戏课程设计》报告.pdf
贪吃蛇大作战实训报告引言.docx
06-23
。。。
javascript贪吃蛇游戏设计与实现
10-14
主要为大家详细介绍了javascript贪吃蛇游戏设计与实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
C++贪吃蛇自动吃食物
07-20
可以自动吃食物，但是本算法考虑因素较低，读懂本程序，可以在上面进行扩展。
原生JS 实现贪吃蛇
11-11
原生js 实现贪吃蛇。
贪吃蛇3（增强版）.zip
11-10
通过分析和学习这个源代码，开发者可以深入了解贪吃蛇游戏的实现原理，以及如何使用JavaScript来创建交互式的网页应用程序。 总之，《贪吃蛇3（增强版）.zip》是一个很好的学习资源，它展示了JavaScript在游戏开发...
前几天搞定了贪吃蛇自动寻路算法……
热门推荐
blankmanp的专栏
05-24 1万+
写了几天，搞定了贪吃蛇自动寻路……目前在20*20的格子上面可以稳定跑到100+分，200+的话……看运气吧o(╯□╰)o，总之算法还有很多可以修改的地方，而且UI部分还有部分没写的…… 总结下：这次写的话主要算法用的是BFS，没有用A*算法，因为太复杂了，用JS实现感觉好难，所以暂时没有写……然后有两种策略，一种是吃到食物还能找到自己尾巴的话就直接去吃食物，如果发现找不到吃食物的路径OR吃了就会
用 js 写个自动寻路的贪吃蛇
weixin_33851429的博客
12-02 339
前言 偶尔看到两年前写的贪吃蛇，当时没把自动寻路的算法写好，蛇容易挂，周末找了个时间把当年的坑填上，写了个不会挂的贪吃蛇。 两年前的版本_点击查看 这次更新的版本_点击查看 代码比较简单,使用 canvas 完成游戏的画图，抛开 A* 算法的实现，整个 html 代码在 300 行以内~源码 ：https://github.com/myf...
利用JS实现贪吃蛇的游戏(具体分析)之一食物模块的分析
weixin_42839080的博客
08-04 1332
一. 食物模块需求分析: 1.在页面地图上显示一个食物的方块盒子,位置是随机显示的. 2.需要盒子被蛇吃后要消失,并且重新随机生成新的食物盒子 二. 食物的设计思路分析: 1.将一块地图分割成一个一个的方格,而这个方格刚好是食物盒子的大小.这样我们可以先确定食物盒子在地图上的X,Y坐标,再利用X,Y坐标来定位食物盒子的left,top的值.比如:上图红色的坐标是:(4...
使用JS实现贪吃蛇小游戏及加墙功能
"本文介绍如何使用JavaScript实现一个带有墙壁元素的贪吃蛇小游戏，强调了游戏规则、HTML结构、CSS样式以及JavaScript的核心逻辑。" 在JavaScript实现的贪吃蛇游戏中，核心知识点包括以下几个方面： 1. **游戏规则...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值