javascript实现简单的贪吃蛇游戏

javascript实现简单的贪吃蛇游戏，功能很简单，代码也很实用，就不多废话了，小伙伴们参考注释吧。
<html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><title>贪吃蛇</title><script type="text/javascript">var map;//地图var snake; //蛇var food;//食物var timer; //定时器var initSpeed=200; //初始定时器时间间隔（毫秒）,间接代表蛇移动速度var nowSpeed=initSpeed; //游戏进行时蛇移动速度var grade=0;//积分var flag=1; //（可间接看做）关卡//地图类function Map（）{this.width=800;this.height=400;this.position="absolute";this.color="#EEEEEE";this._map=null;//生成地图this.show=function（）{this._map=document.createElement（"div"）;this._map.style.width=this.width+"px";this._map.style.height=this.height+"px";this._map.style.position=this.position;this._map.style.backgroundColor=this.color;document.getElementsByTagName（"body"）[0].appendChild（this._map）;}}//食物类function Food（）{this.width=20;this.height=20;this.position="absolute";this.color="#00FF00";this.x=0;this.y=0;this._food;//生成食物this.show=function（）{this._food=document.createElement（"div"）;this._food.style.width=this.width+"px";this._food.style.height=this.height+"px";this._food.style.position=this.position;this._food.style.backgroundColor=this.color;this.x=Math.floor（Math.random（）*map.width/this.width）;this.y=Math.floor（Math.random（）*map.height/this.width）;this._food.style.left=this.x*this.width;this._food.style.top=this.y*this.height; map._map.appendChild（this._food）;}}//蛇类function Snake（）{this.width=20;this.height=20;this.position="absolute";this.direct=null;//移动方向//初始蛇身this.body=new Array（[3,2,"red",null],//蛇头[2,2,"blue",null],[1,2,"blue",null]）;//生成蛇身this.show=function（）{for（var i=0;i<this.body.length;i++）{if（this.body[i][3]==null）{this.body[i][3]=document.createElement（"div"）;this.body[i][3].style.width=this.width;this.body[i][3].style.height=this.height;this.body[i][3].style.position=this.position;this.body[i][3].style.backgroundColor=this.body[i][2];map._map.appendChild（this.body[i][3]）;}this.body[i][3].style.left=this.body[i][0]*this.width+"px";this.body[i][3].style.top=this.body[i][1]*this.height+"px";}}//控制蛇移动this.move=function（）{ var length=this.body.length-1;for（var i=length;i>0;i--）{this.body[i][0]=this.body[i-1][0];this.body[i][1]=this.body[i-1][1];} switch（this.direct）{case "right":this.body[0][0]=this.body[0][0]+1;break;case "left":this.body[0][0]=this.body[0][0]-1;break;case "up":this.body[0][1]=this.body[0][1]-1;break;case "down":this.body[0][1]=this.body[0][1]+1;break;} this.condition（）;this.show（）;}//定时器，开始游戏时，调用this.speed=function（）{timer=setInterval（"snake.move（）",initSpeed）;}//条件处理this.condition=function（）{//吃食物if（this.body[0][0]==food.x&&this.body[0][1]==food.y）{grade++;this.body[[this.body.length]]=[0,0,"blue",null];map._map.removeChild（food._food）food.show（）;}//判断是否撞墙if（this.body[0][0]<0||this.body[0][0]>=map.width/this.width||this.body[0][1]<0||this.body[0][1]>=map.height/this.height）{alert（"game over"）;clearInterval（timer）;return ;}//判断是否撞到自身for（var i=1;i<this.body.length;i++）{if（this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1]）{alert（"game over"）;clearInterval（timer）;return ;}}//速度提升处理，积分每曾2分，速度提升一倍if（grade/2==flag）{clearInterval（timer）;flag++;nowSpeed=initSpeed/flag;timer=setInterval（"snake.move（）",nowSpeed）;}document.title="贪吃蛇 积分"+grade+" 速度等级"+initSpeed/nowSpeed; }} document.onkeydown=function（event）{//按下任意键，开始游戏if（snake.direct===null）{snake.direct="right";snake.speed（）;}//控制方向，W S D A分别代表 上下右左switch（window.event?window.event.keyCode:event.keyCode）{//浏览器兼容处理case 87 :snake.direct=snake.body[0][0]==snake.body[1][0]?snake.direct:"up";//避免反向移动，触发死亡bugbreak;case 83 :snake.direct=snake.body[0][0]==snake.body[1][0]?snake.direct:"down";break;case 68 :snake.direct=snake.body[0][1]==snake.body[1][1]?snake.direct:"right";break;case 65 :snake.direct=snake.body[0][1]==snake.body[1][1]?snake.direct:"left";break;}}//自动加载游戏window.onload=function（）{map=new Map（）;map.show（）;food=new Food（）;food.show（）;snake=new Snake（）;snake.show（）; }</script></head><body></body></html>
以上所述就是本文的全部内容了，希望大家能够喜欢。