JS小游戏贪食蛇v1.0

最新推荐文章于 2022-08-15 10:54:19 发布

shirenfeigui

最新推荐文章于 2022-08-15 10:54:19 发布

阅读量1.5k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/shirenfeigui/article/details/8588313

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

程序设计步骤

1、设计格子生成函数。这是一个通用的生成函数，可以自己输入行，列，单元格高度。每个单元格是一个div。结合CSS代码的调整可以生成各种大小和宽窄的地面。

2、生成一条蛇。采用一个数组表示蛇，每个元素是一个div，可以通过id值获取元素的行、列属性。

3、检测方向按键

4、设计判断下一步位置的函数。在这个函数中，首先判断有没有撞，如果没有撞则判断下一步的位置并且改变蛇的形状。这时候有两种情况，第一种是没有吃到食物，在蛇的数组前加入新元素，将蛇尾的元素删除；另一种情况是吃到了食物，这时候只添加新元素，还要生成新的食物。

5、通过setInterval调用上一步中的函数

程序代码

<!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" />
<style type="text/css">
/*需要调整的内容有.inner的font-size,line-height*/
.inner {width:29px;height:29px;
	float:left;display:inline;
	font-size:20px;line-height:20px;text-align:center;font-weight:bold;color:#F00;
	border-top:1px solid black;
	border-left:1px solid black;
}

#outside{
	padding:0;
	float:left;
	border-right:1px solid black;
	border-bottom:1px solid black;
}
.clearFix:after{
	clear:both;
	display:block;
	visibility:hidden;
	height:0;
	content:"";
}
.clearFix{zoom:1;}
</style>
<script type="text/javascript">
var foodR = -1;//食物坐标
var foodC = -1;
var dir = 0;
window.onload = function(){
	var r = 15;//行数
	var c = 20;//列数
	var w = 18;//单元格宽度
	var cell = createCell(r,c,w);//创建格子，行，列，单元格宽度。这个格子是一个二维数组
	var snake = new Array();//创建蛇。这个蛇是一个一维数组
	for(var i=0;i<3;i++)//初始化蛇
	{
		snake[i] = cell[0][3-i];
		snake[i].innerText="*";
	}
	document.onkeydown = function()//检测当前方向按键
	{
		dir = changeDir(this);
	}
	generateFood(cell);//生成食物
	setInterval(function(){checkDir(cell,snake);},200);  //检测当前前进方向并前进。在setInterval中不能直接传入参数，需要采用function进行函数调用
}
function generateFood(cell)//生成食物
{	
	do{
		foodR = Math.floor(Math.random()*cell.length);//根据格子的总数量生成
		foodC = Math.floor(Math.random()*cell[0].length);
	}while(cell[foodR][foodC].innerText == "*")//食物不能和蛇重合
	cell[foodR][foodC].innerText = "○";//画出食物
}

function changeDir(e)//检测当前方向按键
{
	if(event.keyCode>=37&&event.keyCode<=40)//如何按键是方向键，返回按键码
		return event.keyCode;
}
function checkDir(cell,snake)//检测当前前进方向并前进
{
	if(dir>=37&&dir<=40)//初始化的时候，按下任意方向键开始运行
	{
		var nextNode = new Array(2);//下一步的坐标
		nextNode = getNext(dir,cell,snake);//获取下一步坐标
		if(nextNode[0]!=-1&&nextNode[1]!=-1&&nextNode[0]!=cell.length&&nextNode[1]!=cell[0].length&&cell[nextNode[0]][nextNode[1]].innerText!="*")
		//如果没有撞到边上，也没有撞到自己，继续前进.cell.length行数，cell[0].length列数
		{
			snake.unshift(cell[nextNode[0]][nextNode[1]]);//在最前面添加一截
			snake[0].innerText="*";
			if(nextNode[0]==foodR&&nextNode[1]==foodC)//如果吃到食物，生成新的食物
			{	generateFood(cell);}
			else
			{	snake.pop().innerText="";}//如果没吃到食物，将最后一截去掉
			for(var i = 0;i<snake.length;i++)//设置颜色
			{
				switch(i)
				{
					case 0:
						snake[i].style.color="#F00";
						break;
					case 1:
						snake[i].style.color="#F11";
						break;
					case 2:
						snake[i].style.color="#F22";
						break;
					case 3:
						snake[i].style.color="#F33";
						break;
					case 4:
						snake[i].style.color="#F44";
						break;
					default:
						snake[i].style.color="#F55";
						break;
				}
			}
		}
		else  //如果撞了，刷新页面
		{	alert("撞了");
			window.location.reload();
		}
	}
}
function getNext(dir,cell,snake)//获取下一步坐标
{
	var nextNode = new Array(2);
	nextNode[0] = getRow(snake[0]);//获取当前行
	nextNode[1] = getCol(snake[0]);//获取当前列
	switch(dir)//根据方向不同前进
	{
		case 37: //左
			nextNode[1]--;
			break;
		case 38: //上
			nextNode[0]--;
			break;
		case 39: //右
			nextNode[1]++;
			break;
		case 40:
			nextNode[0]++;
			break;
		default:
			break;
	}
	return (nextNode);//返回下一步的行和列
}
function createCell(row,col,wid)//创建格子。内部小格子显示左，上边框；外部大个子显示右，下边框
{
	//box.style.width = row*30+"px";
	
	var i = 0;
	var j = 0;
	var box = document.getElementById("outside");//设置外部格子宽高
	box.style.width = col*(wid+1)+"px";
	box.style.height = row*(wid+1)+"px";
	var cell = new Array();
	for(i=0;i<row;i++)//创建内部格子
	{
		cell[i] = new Array();
		for(j=0;j<col;j++)
		{
			//alert("in:r"+i+"c"+j);
			cell[i][j] = document.createElement("div");
			cell[i][j].style.width = wid+"px";//设置宽度
			cell[i][j].style.height = wid+"px";//设置高度
			cell[i][j].className = "inner";//设置class
			cell[i][j].name = "inner";
			cell[i][j].id = "r"+i+"c"+j;//设置id
			box.appendChild(cell[i][j]);//加入结点
		}
		
	}
	return cell;
}
function getRow(cell)//获得当前格子的行
{
	var r = String(cell.id.match(/r[0-9]*/));//截取id的r及数字部分
	var rID = r.substr(1);//截取r后面的数字
	return(rID);
}
function getCol(cell)//获得当前格子的列
{
	var c = cell.id.indexOf("c");//占到id中c的位置
	var cID = cell.id.substr(c+1);//截取c后面的数字
	return(cID);
}
</script>
</head>
<body>
<div id="outside" class="clearFix"></div>
<div id="mess"></div>
</body>
</html>

shirenfeigui

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS小游戏贪食蛇v1.0

程序设计步骤1、设计格子生成函数。这是一个通用的生成函数，可以自己输入行，列，单元格高度。每个单元格是一个div。结合CSS代码的调整可以生成各种大小和宽窄的地面。2、生成一条蛇。采用一个数组表示蛇，每个元素是一个div，可以通过id值获取元素的行、列属性。3、检测方向按键4、设计判断下一步位置的函数。在这个函数中，首先判断有没有撞，如果没有撞则判断下一步的位置并且改变蛇的形状。这
复制链接

扫一扫