前段时间心血来潮，用jquery编写了一个小游戏，详见代码如下：
<HTML>
<HEAD>
<TITLE>
snack -- jym
</TITLE>
<style type="text/css">
#snackTable{
300px;
height:300px;
border:1px solid black;
}
</style>
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="./JS/jquery-1.4.4.min.JS"></SCRIPT>
<script type="text/javascript">
//移动方向
var sMove = null;
//将现有蛇身放入数组[x,y,color]
var sBody =[];
//食物坐标
var foodPlace = [];
//食物
var food = ['red','green','yellow'];
var invit = {
//行
rowscount:30,
//列
cellcount:30,
//时间
timer:null,
//速度
speed:200
};
//制造table
function newTable(){
var ntr="<tr></tr>";
var ntd="<td></td>";
for (var i=0;i<invit.rowscount;i++)
{
$("#snackTable").append(ntr);
for (var j=0;j<invit.cellcount;j++)
{
$("tr:eq("+i+")").append(ntd);
}
}
}
//初始化蛇
function InvitSnack(){
//定义蛇头
var snackHeadX = Math.floor(Math.random()*10+10);
var snackHeadY = Math.floor(Math.random()*10+10);
$("tr:eq("+snackHeadX+") td:eq("+snackHeadY+")").css("background-color","blue");
sBody.push({x:snackHeadX,y:snackHeadY});
//定义蛇头方向 0,1,2,3 上下左右
sMove = Math.floor(Math.random()*4);
switch(sMove)
{
case 0:
$("tr:eq("+(snackHeadX+1)+") td:eq("+snackHeadY+")").css("background-color","black");
$("tr:eq("+(snackHeadX+2)+") td:eq("+snackHeadY+")").css("background-color","black");
$("tr:eq("+(snackHeadX+3)+") td:eq("+snackHeadY+")").css("background-color","black");
sBody.push({x:snackHeadX+1,y:snackHeadY});
sBody.push({x:snackHeadX+2,y:snackHeadY});
sBody.push({x:snackHeadX+3,y:snackHeadY});
break;
case 1:
$("tr:eq("+(snackHeadX-1)+") td:eq("+snackHeadY+")").css("background-color","black");
$("tr:eq("+(snackHeadX-2)+") td:eq("+snackHeadY+")").css("background-color","black");
$("tr:eq("+(snackHeadX-3)+") td:eq("+snackHeadY+")").css("background-color","black");
sBody.push({x:snackHeadX-1,y:snackHeadY});
sBody.push({x:snackHeadX-2,y:snackHeadY});
sBody.push({x:snackHeadX-3,y:snackHeadY});
break;
case 2:
$("tr:eq("+snackHeadX+") td:eq("+(snackHeadY+1)+")").css("background-color","black");
$("tr:eq("+snackHeadX+") td:eq("+(snackHeadY+2)+")").css("background-color","black");
$("tr:eq("+snackHeadX+") td:eq("+(snackHeadY+3)+")").css("background-color","black");
sBody.push({x:snackHeadX,y:snackHeadY+1});
sBody.push({x:snackHeadX,y:snackHeadY+2});
sBody.push({x:snackHeadX,y:snackHeadY+3});
break;
case 3:
$("tr:eq("+snackHeadX+") td:eq("+(snackHeadY-1)+")").css("background-color","black");
$("tr:eq("+snackHeadX+") td:eq("+(snackHeadY-2)+")").css("background-color","black");
$("tr:eq("+snackHeadX+") td:eq("+(snackHeadY-3)+")").css("background-color","black");
sBody.push({x:snackHeadX,y:snackHeadY-1});
sBody.push({x:snackHeadX,y:snackHeadY-2});
sBody.push({x:snackHeadX,y:snackHeadY-3});
break;
}
}
$(function(){
newTable();
InvitSnack();
});
//开始游戏
function btnGame(){
invit.timer = setInterval("move()",invit.speed);
//生成食物
newFood();
}
//移动
function move(){
var newSnackHead = new Array();
switch(sMove)
{
case 0:
newSnackHead.push({x:sBody[0].x-1,y:sBody[0].y});
break;
case 1:
newSnackHead.push({x:sBody[0].x+1,y:sBody[0].y});
break;
case 2:
newSnackHead.push({x:sBody[0].x,y:sBody[0].y-1});
break;
case 3:
newSnackHead.push({x:sBody[0].x,y:sBody[0].y+1});
break;
}
//探索下一步
if(checkMove(newSnackHead))
{
$("tr:eq("+sBody[sBody.length-1].x+") td:eq("+sBody[sBody.length-1].y+")").css("background-color","");
Draw(newSnackHead,false);
}
else
{
clearInterval(invit.timer);
//移除颜色
removeSnack();
//移除食物
removeFood();
//重新生成蛇
InvitSnack();
$("#txtspan").html("");
alert("Game over!");
}
//吃了食物
if(newSnackHead[0].x==foodPlace[0].x&&newSnackHead[0].y==foodPlace[0].y)
{
//蛇身生成
Draw(foodPlace,true);
//出现食物
newFood();
}
}
//绘制蛇身
function Draw(arry,isEat){
sBody.unshift({x:arry[0].x,y:arry[0].y});
//如果只是移动改变蛇头，移除最后一位数组 如果吃食物，就不移除最后一位数组
if(!isEat)
{
sBody.pop();
}
for(var i=0;i<sBody.length;i++)
{
if(i==0)
$("tr:eq("+sBody[i].x+") td:eq("+sBody[i].y+")").css("background-color","blue");
else
$("tr:eq("+sBody[i].x+") td:eq("+sBody[i].y+")").css("background-color","black");
}
}
//产生食物
function newFood(){
var foodX="";
var foodY=""
var foodIndex = Math.floor(Math.random()*(food.length));
while(true)
{
foodX = Math.floor(Math.random()*(invit.rowscount-1));
foodY = Math.floor(Math.random()*(invit.cellcount-1));
for(var i=0;i<sBody.length;i++)
{
if(sBody[i].x==foodX&&sBody[i].y==foodY)
break;
}
break;
}
$("tr:eq("+foodX+") td:eq("+foodY+")").css("background-color",food[foodIndex]);
foodPlace=[];
foodPlace.push({x:foodX,y:foodY});
}
//键盘事件捕捉
document.onkeydown=function(e)
{
e=window.event;
switch(e.keyCode)
{
case 37:
if(sMove != 3)
sMove=2;
break;
case 38:
if(sMove != 1)
sMove=0;
break;
case 39:
if(sMove != 2)
sMove=3;
break;
case 40:
if(sMove != 0)
sMove=1;
break;
}
}
//探索下一步
function checkMove(arry){
//判断是否接触边界
if(arry[0].x==-1 || arry[0].y==-1 || arry[0].x==invit.rowscount || arry[0].y==invit.cellcount)
return false;
//判断是否接触蛇身
for(var i=0;i<sBody.length;i++)
{
if(arry[0].x==sBody[i].x&&arry[0].y==sBody[i].y)
return false;
}
return true;
}
//移除蛇身颜色
function removeSnack(){
for(var i=0;i<sBody.length;i++)
{
$("tr:eq("+sBody[i].x+") td:eq("+sBody[i].y+")").css("background-color","");
}
sBody=[];
}
//移除食物
function removeFood(){
$("tr:eq("+foodPlace[0].x+") td:eq("+foodPlace[0].y+")").css("background-color","");
}
</script>
</HEAD>
<BODY>
<table id="snackTable"></table><span id="txtspan"></span>
<input type="button" value="开始" id="btnBegin" onclick="btnGame();" />
</BODY>
</HTML>
运用的算法不算高深，只是简单的嵌套循环，进行判断，关键逻辑点：
1.蛇身加蛇头全部存放在二维数组当中
2.根据方向，确定蛇头下一步坐标方位，有了蛇头坐标能够决定蛇身坐标点
3.每次移动前，判断下一次前进是否接触食物，是的话则将食物坐标加进数组中