js 贪吃蛇 大部分显而易见的问题已解决 但是代码过于复杂 欢迎纠错
时间： 09:54:08
&&&& 阅读：138
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&//代码相比，上次做了优化，解决自身缠绕问题 解决后退问题 &食物出现问题与自身缠绕问题大同小异，这里不做代码演示，各位如有兴趣，可以自己参考，自作
//鄙人拙作，献丑了
//时间：6小时
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&js控制移动&/title&
window.onload=function(){
var snake={
timer:null,
oEvent:null,
speed:300,
oDiv:document.getElementById(‘tou‘),
p:document.getElementsByClassName(‘lei‘),
update:function(){
snake.p=document.getElementsByClassName(‘lei‘);
oBigDiv:document.getElementById(‘lei1‘),
color:function(){//颜色分离
for(var i=1;i&snake.p.i++){
if(i%2==0)
snake.p[i].style.background=‘red‘
move:function(oEvent){//控制方向
if(snake.dir==‘left‘&&oEvent.keyCode==37&&snake.sp&0)
if(snake.dir==‘left‘&&oEvent.keyCode==39&&snake.sp&0)//控制不能后退，四种情况
if(snake.dir==‘top‘&&oEvent.keyCode==38&&snake.sp&0)
if(snake.dir==‘top‘&&oEvent.keyCode==40&&snake.sp&0)
switch(oEvent.keyCode){
case 97:clearInterval(snake.timer);
snake.speed=snake.speed-50;
snake.timer=setInterval(function(){
snake.oDiv.style[snake.dir]=snake.oDiv.offsetLeft+snake.sp+‘px‘;
snake.follow();
},snake.speed);
case 98:clearInterval(snake.timer);snake.speed=snake.speed+50;
snake.timer=setInterval(function(){
snake.oDiv.style[snake.dir]=snake.oDiv.offsetLeft+snake.sp+‘px‘;
snake.follow();
},snake.speed);
case 32:clearInterval(snake.timer);
case 37: clearInterval(snake.timer);
snake.timer=setInterval(function(){
snake.dir=‘left‘;
snake.sp=-20;
snake.oDiv.style.left=snake.oDiv.offsetLeft-20+‘px‘;
snake.follow();
},snake.speed);
case 39: clearInterval(snake.timer);
snake.timer=setInterval(function(){
snake.dir=‘left‘;
snake.sp=20;
snake.oDiv.style.left=snake.oDiv.offsetLeft+20+‘px‘;
snake.follow();
},snake.speed);
case 38: clearInterval(snake.timer);
snake.timer=setInterval(function(){
snake.dir=‘top‘;
snake.sp=-20;
snake.oDiv.style.top=snake.oDiv.offsetTop-20+‘px‘;
snake.follow();
},snake.speed);
case 40:clearInterval(snake.timer);&
snake.timer=setInterval(function(){
snake.dir=‘top‘;
snake.sp=20;
snake.oDiv.style.top=snake.oDiv.offsetTop+20+‘px‘;
snake.follow();
},snake.speed);
follow:function(){
snake.p[0].style.left=snake.oDiv.offsetLeft+‘px‘;
snake.p[0].style.top=snake.oDiv.offsetTop+‘px‘;
for(var i=snake.p.length-1;i&0;i--){
snake.p[i].style.left=snake.p[i-1].offsetLeft+‘px‘;
snake.p[i].style.top=snake.p[i-1].offsetTop+‘px‘;
snake.death();
if(snake.oDiv.offsetLeft&snake.oBigDiv.offsetWidth-snake.oDiv.offsetWidth){
alert(‘游戏结束，共吃‘+snake.num+‘个食物‘);
clearInterval(snake.timer);
document.onkeydown=
if(snake.oDiv.offsetLeft&0)
alert(‘游戏结束，共吃‘+snake.num+‘个食物‘);
clearInterval(snake.timer);
document.onkeydown=
if(snake.oDiv.offsetTop&0)
alert(‘游戏结束，共吃‘+snake.num+‘个食物‘);
clearInterval(snake.timer);
document.onkeydown=
if(snake.oDiv.offsetTop&snake.oBigDiv.offsetHeight-snake.oDiv.offsetHeight){
alert(‘游戏结束，共吃‘+snake.num+‘个食物‘);
clearInterval(snake.timer);
document.onkeydown=
if((snake.oDiv.offsetLeft==snake.pos.x)&&(snake.oDiv.offsetTop==snake.pos.y)){
snake.num++;
snake.eat();
x:Math.round(Math.random()*39)*20,
y:Math.round(Math.random()*39)*20,
food:function(){
var food=document.createElement(‘div‘);
food.className=‘food‘;
food.style.left=snake.pos.x+‘px‘;
food.style.top=snake.pos.y+‘px‘;
snake.oBigDiv.appendChild(food);
eat:function(){//吃食物
var she=document.createElement(‘div‘);
she.className=‘lei‘;
snake.oBigDiv.appendChild(she);
snake.pos.x=Math.round(Math.random()*39)*20;
snake.pos.y=Math.round(Math.random()*39)*20;
snake.oBigDiv.removeChild(snake.oBigDiv.getElementsByClassName(‘food‘)[0]);
snake.food();
death:function(){//解决自身缠绕问题
for(var i=2;i&snake.p.i++){
if(snake.p[i].offsetLeft==snake.oDiv.offsetLeft&&snake.p[i].offsetTop==snake.oDiv.offsetTop){
alert(&you are dead!!&);
clearInterval(snake.timer);
document.onkeydown=
snake.food();
document.onkeydown=function(ev){
var oEvent=ev||
snake.color();
snake.oEvent=oE
snake.move(snake.oEvent);
background:#FF0;
background:#0FF;
background:#063;
border:1px solid #000;
height:798
background:#9F3;
height:100
&div id=&text&&
&h1&说明：上下左右控制方向，小键盘1加速，2减速，space键暂停，上下左右随便开始&/h1&
&div id=&lei1&&
&div id=&tou& class=&lei&&1&/div&
&div class=&lei&&2&/div&
&div class=&lei&&3&/div&
&div class=&lei&&4&/div&
&/html&标签：&&&&&&&&&原文：http://blog.csdn.net/do_bset_yourself/article/details/
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！君，已阅读到文档的结尾了呢~~
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
js编写的贪吃蛇无论如何改变div的top、left，蛇和食物在地图显式位置始终不变
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口