您的位置：首页 > Web前端 > JavaScript

JS小游戏 贪食蛇v1.0

2013-02-18 16:23 218 查看
程序设计步骤

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航