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

jquery 写的贪吃蛇。。

2010-06-18 09:02 253 查看

看csdn各位大大写js游戏早就想练练手也写一个了。

这个贪吃蛇是我的第一个js游戏不对的地方各位大大给指正。

代码写的没什么难的，用Firefox看里面span的属性改变就知道我是怎么做的了。

不多说了，代码贴出来

<!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=utf-8" />
<title>贪吃蛇</title>
<mce:script language="javascript" type="text/javascript" src="../scripts/jquery-1[1].2.6.js" mce_src="scripts/jquery-1[1].2.6.js"></mce:script>
<mce:script language="javascript" type="text/javascript"><!--
$(function(){
$("body").append("<div id='panel'></div>");

//构建地图
var strHtml = "";
for(i=0;i<long;i++)
{
for(j=0;j<high;j++)
{
strHtml+='<span Xindex="' + j + '" Yindex="' + i + '" class="map noSnake"></span>';
}
strHtml+='<div class="clear"></div>';
}
$("#panel").append(strHtml);

//键盘点击事件
$(document).keydown(function(evt){
evt = evt ||window.event;
var key=evt.which||evt.keyCode;
switch(key)
{
case 37:direction="left";break;
case 38:direction="up";break;
case 39:direction="right";break;
case 40:direction="down";break;
}
});

init();

});
var long = 10;
var high = 10;
var sLong = 3;
var direction = 'right';
var MyInterval = null;
var timeSpan = 1000;
//初始化
function init()
{
long = 10;
high = 10;
sLong = 3;
direction = 'right';

for(i=0;i<sLong;i++)
{
$("span[Yindex='0'][Xindex='" + (sLong-i-1) + "']").attr("index",i).removeClass("noSnake").addClass("snake");
}
DisFood();
MyInterval=setInterval("moveNext()",timeSpan);
}
//移动到下一个
function moveNext()
{
hspan = $("span[index='0']");
x = 0;
y = 0;
if(direction=='left')
{
x = -1;
y = 0;
}else if(direction=='right')
{
x = 1;
y = 0;
}else if(direction=='up')
{
x = 0;
y = -1;
}else if(direction=='down')
{
x = 0;
y = 1;
}

hx = parseInt(hspan.attr('Xindex'));
hy = parseInt(hspan.attr('Yindex'));
nx = hx + x;
ny = hy + y;
if(nx<0 || nx>=long || ny<0 || ny>=high)
{
Failure();
}else if($(".snake[Xindex='" + nx + "'][Yindex='" + ny + "']").size()>0)
{
Failure();
}

$(".snake").attr("temp","temp");
nextMove(0,nx,ny);
if($(".food").size()==0)
{
DisFood();
$("span[temp='temp']").attr("index",sLong).removeAttr("temp").removeClass("noSnake").addClass("snake");
timeSpan=timeSpan-10;
sLong++;
}
$("span[temp='temp']").removeClass("snake").removeClass("food").addClass("noSnake").removeAttr("index").removeAttr("temp");
}
//显示食物
function DisFood()
{

noSnakeCount = parseInt($(".noSnake").size());
if(noSnakeCount>1)
{
foodIndex = Math.round(Math.random()*noSnakeCount);
$(".noSnake").eq(foodIndex).removeClass("noSnake").addClass("food");
}else
{
success();
}
}
//蛇身体的下一节移动
function nextMove(index,x,y)
{
if(index<sLong && $("span[index='" + index + "'][temp='temp']").size()>0)
{
tx = $("span[index='" + index + "'][temp='temp']").attr("Xindex");
ty = $("span[index='" + index + "'][temp='temp']").attr("Yindex");

$("span[Xindex='" + x + "'][Yindex='" + y + "']").attr("index",index).removeAttr("temp").removeClass("noSnake").removeClass("food").addClass("snake");
nextMove(++index,tx,ty);
}

}

function success()
{
alert("您获胜了");
}

function Failure()
{
clearInterval(MyInterval);
alert('结束了');
}
// --></mce:script>
<mce:style type="text/css"><!--
.map{
width:10px;
height:10px;
border:1px solid #000;
float:left;
}
.noSnake{
background:#00F;
}
.snake{
background:#F00;
}
.food{
background:#FF0;
}
.clear{
clear:both;
}
--></mce:style><style type="text/css" mce_bogus="1">.map{
width:10px;
height:10px;
border:1px solid #000;
float:left;
}
.noSnake{
background:#00F;
}
.snake{
background:#F00;
}
.food{
background:#FF0;
}
.clear{
clear:both;
}</style>
</head>
<body>
</body>
</html>

里面<script language="javascript" type="text/javascript" src="../scripts/jquery-1[1].2.6.js"></script>

是jquery库，路径需要改下的

下载地址：
http://download.csdn.net/source/2463742

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery function javascript xhtml float firefox

相关文章推荐

新的分享

章节导航