你的位置:首页 > Java教程

[Java教程]Javascript基础示例:用JS写简易版贪吃蛇(面向对象)


废话不多说,代码如下:

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>贪吃蛇</title> 6 <script> 7   var map; //地图类对象 8   var snake; //蛇类对象 9   var food; //食物类对象 10   var timer; //定时器对象 11   var sum=0; //分数 12    13   //地图类 14   function Map() 15   { 16     this.width=800; //地图宽度 17     this.height=400; //地图高度 18     this.position='absolute'; //定位方式 19     this.color='#cccccc'; //地图颜色 20     this._map=null; //保存地图dom元素 21      22     this.show=function() 23     { 24       //用于显示地图 25       //创建地图div元素 26       this._map = document.createElement('div'); 27       //设置地图样式 28       this._map.style.width = this.width + 'px'; 29       this._map.style.height = this.height + 'px'; 30       this._map.style.position = this.position ; 31       this._map.style.backgroundColor = this.color ; 32        33       //将地图div元素追加到body标签之间 34       document.getElementsByTagName('body')[0].appendChild(this._map); 35     }; 36   } 37    38   //食物类 39   function Food() 40   { 41     this.width=20; //宽度 42     this.height=20; //高度 43     this.position='absolute'; //定位方式 44     this.color='#00ff00'; //食物颜色 45     this._food=null; //用于保存食物dom元素 46     this.x=0; //横向第几个格 47     this.y=0; //纵向第几个格 48      49     this.show=function() 50     { 51       //用于显示食物 52       if(this._food==null) 53       { 54         this._food=document.createElement('div'); 55          56         //设置食物样式 57         this._food.style.width = this.width + 'px'; 58         this._food.style.height = this.height + 'px'; 59         this._food.style.position = this.position ; 60         this._food.style.backgroundColor = this.color ; 61          62         map._map.appendChild(this._food); 63       } 64       //如果之前创建过,只需要重新设置坐标 65       this.x=Math.floor(Math.random()*40); 66       this.y=Math.floor(Math.random()*20); 67       this._food.style.left = this.x*this.width+'px'; 68       this._food.style.top = this.y*this.height+'px'; 69     }; 70   } 71    72   //蛇类 73   function Snake() 74   { 75     this.width=20;  //蛇节宽度 76     this.height=20;  //蛇节高度 77     this.position='absolute'; //蛇节定位方式 78     this.direct=''; //蛇的移动方向 79     //所有蛇节全部信息 80     this.body=[[3,2,'red',null],[2,2,'blue',null],[1,2,'blue',null]]; 81      82     this.setDirect = function(code) 83     { 84       switch(code) 85       { 86         case 37: 87           this.direct='left'; 88           break; 89         case 38: 90           this.direct='up'; 91           break; 92         case 39: 93           this.direct='right'; 94           break; 95         case 40: 96           this.direct='down'; 97           break; 98       } 99     }100     101     this.show=function()102     {103       //用于显示蛇104       for(var i=0;i<this.body.length;i++)105       {106         if(this.body[i][3]==null)107         {108           this.body[i][3] = document.createElement('div');109           this.body[i][3].style.width = this.width +'px';110           this.body[i][3].style.height = this.height +'px';111           this.body[i][3].style.position = this.position;112           this.body[i][3].style.backgroundColor = this.body[i][2];113           map._map.appendChild(this.body[i][3]);114         }115         //设置蛇节的横纵坐标116         this.body[i][3].style.left=this.body[i][0]*this.width+'px';117         this.body[i][3].style.top=this.body[i][1]*this.height+'px';118       }119     }120     121     this.move = function()122     {123       //移动蛇身124       var length = this.body.length-1;125       for(var i=length;i>0;i--)126       {127         //让后面的蛇节的坐标等于前面蛇节的坐标128         this.body[i][0]=this.body[i-1][0]; //横坐标129         this.body[i][1]=this.body[i-1][1]; //纵坐标130         131       }132       switch(this.direct)133       {134         case 'right':135           this.body[0][0]=this.body[0][0]+1;136           break;137         case 'down':138           this.body[0][1]=this.body[0][1]+1;139           break;140         case 'left':141           this.body[0][0]=this.body[0][0]-1;142           break;143         case 'up':144           this.body[0][1]=this.body[0][1]-1;145           break;146         default:147           return;148       }149       150       //判断蛇吃到食物151       if(this.body[0][0]==food.x&&this.body[0][1]==food.y)152       {153         var x=this.body[length][0];154         var y=this.body[length][1];155         sum++;156         document.title='分数:'+sum+'分';157         this.body.push([x,y,'blue',null]);158         food.show();159       }160       161       //判断撞墙死162       if(this.body[0][0]<0 || this.body[0][0]>39 ||this.body[0][1]<0 ||this.body[0][1]>19)163       {164         alert('撞墙死');165         clearTimeout(timer);166         return;167       }168       169       //吃到自己死170       for(var i=1;i<this.body.length;i++)171       {172         if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1])173         {174           alert('吃到自己死');175           clearTimeout(timer);176           return;177         }178       }179       180       this.show();181     }182   }183   184   window.onload = function()185   {186     map = new Map(); //实例化地图类对象187     map.show();  //显示地图188     189     190     food=new Food(); //实例化食物类对象191     food.show(); //显示食物192     193     snake = new Snake(); //实例化蛇类对象194     snake.show();195     timer = setInterval('snake.move()',100);196     197     document.onkeydown = function()198     {199       var code;200       if(window.event)201       {202         code=window.event.keyCode;203       }else204       {205         code = event.keyCode;206       }207       snake.setDirect(code);208     };209     210     211   }212 </script>213 </head>214 <body>215 216 </body>217 </html>

运行截图: