Javascript小游戏：贪吃蛇+详细注释

Javascript小游戏：贪吃蛇+详细注释2009-9-2221:16:56已被阅读：146发表评论作者：CNwander测试：IE7FF3.0.14代码如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/title贪吃蛇-byCNwander/titlestyletype=text/css*{margin:0;padding:0}body{background:#333;-moz-user-select:none;text-align:center;font-size:12px}table{margin:80pxauto10pxauto;overflow:hidden;border-collapse:collapse;}td{width:20px;height:20px;border:1pxsolid#eee;background:#f4f4f4}.cover{background:#39c;}.food{background:#093}.block{background:#333}.brake{background:#f00}.skate{background:#00f}#say{margin-top:50px;color:white}#help{width:420px;margin:0auto;line-height:17px;color:white}#helpspan{float:left;margin-right:10px}#help.box{width:15px;height:15px;margin-right:5px;border:1pxsolidwhite}#btnStart{clear:both;width:100px;height:30px;margin-top:10px;padding:0;background:#bbb;color:#222;border:1pxsolid#fff;border-bottom-color:#000;border-right-color:#000;cursor:pointer}/stylescripttype=text/javascript//codebyCNwander.//commonfunction(str){returndocument.getElementById(str);}functiontag(str,target){target=target||document;returntarget.getElementsByTagName(str);}//global//constvarWIDTH=20,//网格宽度HEIGHT=20,//网格高度SAY=[相当不错，虽然说和CNwander还不是一个级别的,可以啊，再加点油都可以和CNwander媲美了！,一个字，牛，连CNwander都甘拜下风了,差不多行了，别把游戏玩爆了];varlen=3,//蛇的长度speed,//爬行速度gridElems=multiArray(WIDTH,HEIGHT),//单元格对象carrier,//承载对象(食物，障碍，滑板，刹车)snake,//蛇每节的坐标点info,//交互对话btnStart,//开始按钮topScore=len,snakeTimer,//蛇行走计时器brakeTimers=[],//随机刹车skateTimers=[],//随机滑板directkey;//方向键值37-40左上右下window.onload=function(){info=(say);btnStart=(btnStart);initGrid();//网格初始化document.onkeydown=attachEvents;//绑定方向事件btnStart.onclick=function(e){btnStart.blur();//firefox中必须释放焦点start();//游戏开始btnStart.setAttribute(disabled,true);btnStart.style.color=#aaa;}}//开始游戏functionstart(){len=3;speed=10;directkey=39;carrier=multiArray(WIDTH,HEIGHT);snake=newArray();clear();initSnake();//蛇初始化addObject(food);walk();addRandomBrake();}//创建网格functioninitGrid(){varbody=tag(body)[0];vartable=document.createElement(table),tbody=document.createElement(tbody)for(varj=0;jHEIGHT;j++){varcol=document.createElement(tr);for(vari=0;iWIDTH;i++){varrow=document.createElement(td);gridElems[i][j]=col.appendChild(row);}tbody.appendChild(col);}table.appendChild(tbody);(snakeWrap).appendChild(table);}//创建蛇functioninitSnake(){varpointer=randomPointer(len-1,len-1,WIDTH/2);for(vari=0;ilen;i++){varx=pointer[0]-i,y=pointer[1];snake.push([x,y]);carrier[x][y]=cover;}}//添加键盘事件functionattachEvents(e){e=e||event;directkey=Math.abs(e.keyCode-directkey)!=2&&e.keyCode36&&e.keyCode41?e.keyCode:directkey;//非方向键、反向无效returnfalse;}functionwalk(){if(snakeTimer)window.clearInterval(snakeTimer);snakeTimer=window.setInterval(step,Math.floor(3000/speed));}functionstep(){//获取目标点varheadX=snake[0][0],headY=snake[0][1];switch(directkey){case37:headX-=1;break;case38:headY-=1;break;case39:headX+=1;breakcase40:headY+=1;break;}//碰到边界，阻挡物，则结束游戏if(headX=WIDTH||headX0||headY=HEIGHT||headY0||carrier[headX][headY]==block||carrier[headX][headY]==cover){trace(GAMEOVER);if(getText((score))*1len)trace(len,(score));btnStart.removeAttribute(disabled);btnStart.style.color=#000;window.clearInterval(snakeTimer);for(vari=0;ibrakeTimers.length;i++)window.clearTimeout(brakeTimers[i]);for(vari=0;iskateTimers.length;i++)window.clearTimeout(skateTimers[i]);return;}//加速if(len%4==0&&speed60&&carrier[headX][headY]==food){speed+=5;walk();trace(加速！);}//捡到刹车if(carrier[headX][headY]==brake){speed=5;walk();trace(恭喜！捡到刹车一个。);}//遭遇滑板if(carrier[headX][headY]==skate){speed+=20;walk();trace(遭遇滑板！);}//添加阻挡物if(len%6==0&&len60&&carrier[headX][headY]==food){addObject(block);}//对话if(len=40&&len%10==0){varcheer=SAY[len/10-1];trace(cheer);}//吃东西if(carrier[headX][headY]!=food){varlastX=snake[snake.length-1][0],lastY=snake[snake.length-1][1];carrier[lastX][lastY]=false;gridElems[lastX][lastY].className=;snake.pop();}else{carrier[headX][headY]=false;trace(吃到食物);addObject(food);}snake.unshift([headX,headY]);carrier[headX][headY]=cover;gridElems[headX][headY].className=cover;len=snake.length;}//添加物品functionaddObject(name){varp=randomPointer();carrier[p[0]][p[1]]=name;gridElems[p[0]][p[1]].className=name;}//添加随机数量刹车和滑板functionaddRandomBrake(){varnum=randowNum(1,5);for(vari=0;inum;i++){brakeTimers.push(window.setTimeout(function(){addObject(brake)},randowNum(10000,100000)));skateTimers.push(window.setTimeout(function(){addObject(skate)},randowNum(5000,100000)));}}//输出信息functiontrace(sth,who){who=who||info;if(document.all)who.innerText=sth;elsewho.textContent=sth;}//获取信息functiongetText(target){if(document.all)returntarget.innerText;elsereturntarget.textContent;}//创建二维数组functionmultiArray(m,n){vararr=newArray(n);for(vari=0;im;i++)arr[i]=newArray(m);returnarr;}//清除画面functionclear(){for(vary=0;ygridElems.length;y++){for(varx=0;xgridElems[y].length;x++){gridElems[x][y].className=;