用JS写贪吃蛇游戏的问题
本人新手，一直在学习JS。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.o...
本人新手，一直在学习JS。
<!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" />
<title>无标题文档</title>
<style>
table{ width:auto; height:12px;}
table tr{ border-right: 1px solid #808080; float:left;}
table td{border: 1px solid #808080; border-right:none; float:left;width: 10px;height: 10px;font-size: 0;line-height: 0;overflow: hidden; margin:0px; padding:0px;}
.hs{ background:#000;}
</style>
</head>
<body>
<script>
function a()
{
for (i=1;i<=10;i++)
{
document.getElementById("d"+i).className="hs";
}
}
</script>
<table border="0">
<tr>
<td width="10" height="10" id="d1"> </td>
<td width="10" height="10" id="d2"> </td>
<td width="10" height="10" id="d3"> </td>
<td width="10" height="10" id="d4"> </td>
<td width="10" height="10" id="d5"> </td>
<td width="10" height="10" id="d6"> </td>
<td width="10" height="10" id="d7"> </td>
<td width="10" height="10" id="d8"> </td>
<td width="10" height="10" id="d9"> </td>
<td width="10" height="10" id="d10"> </td>
</tr>
</table>
<input name="" type="button" value="开始" onclick="a()" />
</body>
</html>
上面是我全部的语句。贪吃蛇的原理暂时理解了。无非就是来回的换背景色。已有CLASS样式。但是怎么才能做到点一下按钮背景色自动来回切换？要求不高。现在能动就可以。下面的步骤在慢慢研究。使用的FOR循环语句。 展开
<!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" />
<title>无标题文档</title>
<style>
table{ width:auto; height:12px;}
table tr{ border-right: 1px solid #808080; float:left;}
table td{border: 1px solid #808080; border-right:none; float:left;width: 10px;height: 10px;font-size: 0;line-height: 0;overflow: hidden; margin:0px; padding:0px;}
.hs{ background:#000;}
</style>
</head>
<body>
<script>
function a()
{
for (i=1;i<=10;i++)
{
document.getElementById("d"+i).className="hs";
}
}
</script>
<table border="0">
<tr>
<td width="10" height="10" id="d1"> </td>
<td width="10" height="10" id="d2"> </td>
<td width="10" height="10" id="d3"> </td>
<td width="10" height="10" id="d4"> </td>
<td width="10" height="10" id="d5"> </td>
<td width="10" height="10" id="d6"> </td>
<td width="10" height="10" id="d7"> </td>
<td width="10" height="10" id="d8"> </td>
<td width="10" height="10" id="d9"> </td>
<td width="10" height="10" id="d10"> </td>
</tr>
</table>
<input name="" type="button" value="开始" onclick="a()" />
</body>
</html>
上面是我全部的语句。贪吃蛇的原理暂时理解了。无非就是来回的换背景色。已有CLASS样式。但是怎么才能做到点一下按钮背景色自动来回切换？要求不高。现在能动就可以。下面的步骤在慢慢研究。使用的FOR循环语句。 展开
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
table{ width:auto; height:12px;}
table tr{ border-right: 1px solid #808080; float:left;}
table td{border: 1px solid #808080; border-right:none; float:left;width: 10px;height: 10px;font-size: 0;line-height: 0;overflow: hidden; margin:0px; padding:0px;}
.hs{ background:#000;}
.hs{ background:#ffff;}
</style>
</head>
<body>
<script>
function a()
{
for (i=1;i<=10;i++)
{
document.getElementById("d"+i).className="hs";
}
}
var sudu = 1;//速度
var tar = 1;//当前目标
var flag = true;//正反向
var tar_pre;//上一个
var tar_next;//下一个
function a1(){
var tarTd = document.getElementById("d"+tar).className="hs";
if(flag){
tar_pre = tar -1;//用于灭掉前面的背景，当然如果是上下移动就不是减1了，你可以再研究
tar_next = tar+1;//试探下一个是否有
if(document.getElementById("d"+tar_next)!=null){
tar+=1;//这里加1也是只针对于横向
}else{
flag = false;
tar-=1;
}
}else{
tar_pre = tar +1;
tar_next = tar-1;//试探下一个是否有
if(document.getElementById("d"+tar_next)!=null){
tar-=1;//这里加1也是只针对于横向
}else{
flag = true;
tar+=1;
}
}
if(document.getElementById("d"+tar_pre)!=null){
document.getElementById("d"+tar_pre).className="hs1"
}
setTimeout("a1()",1000)
}
</script>
<table border="0">
<tr>
<td width="10" height="10" id="d1"> </td>
<td width="10" height="10" id="d2"> </td>
<td width="10" height="10" id="d3"> </td>
<td width="10" height="10" id="d4"> </td>
<td width="10" height="10" id="d5"> </td>
<td width="10" height="10" id="d6"> </td>
<td width="10" height="10" id="d7"> </td>
<td width="10" height="10" id="d8"> </td>
<td width="10" height="10" id="d9"> </td>
<td width="10" height="10" id="d10"> </td>
</tr>
</table>
<input name="" type="button" value="开始" onclick="a1()" />
</body>
</html>
我没写过贪吃蛇，不过可以一起学习，这是我的一个思路，望交流，qqqun21.77/7/12
我突然觉得更好的办法是用二维数组
追问
嗯，貌似是在我的原基础上加了IF语句跟声明了一些新的变量。毕竟刚开始学JS，工作的要求啊、有个程序让我写个贪吃蛇，说写出来后差不多就会用JS了。但是光有思路而不会用那些标签，弄得我极其纠结，现在下班了，家里没DW，等明天回了公司我再看看，如果可行直接给你了，如果不可行你在帮我改改。
追答
嗯一起学习吧，我现在在试着用数组写，分我有近6k，不差你这个，我图学习
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
实现你说的移动，没有实现吃后的效果。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
