您所在的位置:小祥子 » 编程 » JavaScript » 正文

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

时间:2015-05-02 编辑:怪盗dark 来源:本站整理

废话不多说,代码如下:

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>贪吃蛇</title>
 <script>
     var map; //地图类对象
     var snake; //蛇类对象
     var food; //食物类对象
     var timer; //定时器对象
     var sum=0; //分数
     
     //地图类
     function Map()
     {
         this.width=800; //地图宽度
         this.height=400; //地图高度
         this.position='absolute'; //定位方式
         this.color='#cccccc'; //地图颜色
         this._map=null; //保存地图dom元素
         
         this.show=function()
         {
             //用于显示地图
             //创建地图div元素
             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 ;
             
             //将地图div元素追加到body标签之间
             document.getElementsByTagName('body')[0].appendChild(this._map);
         };
     }
     
     //食物类
     function Food()
     {
         this.width=20; //宽度
         this.height=20; //高度
         this.position='absolute'; //定位方式
         this.color='#00ff00'; //食物颜色
         this._food=null; //用于保存食物dom元素
         this.x=0; //横向第几个格
         this.y=0; //纵向第几个格
         
         this.show=function()
         {
             //用于显示食物
             if(this._food==null)
             {
                 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 ;
                 
                 map._map.appendChild(this._food);
             }
             //如果之前创建过,只需要重新设置坐标
             this.x=Math.floor(Math.random()*40);
             this.y=Math.floor(Math.random()*20);
             this._food.style.left = this.x*this.width+'px';
             this._food.style.top = this.y*this.height+'px';
         };
     }
     
     //蛇类
     function Snake()
     {
         this.width=20;    //蛇节宽度
         this.height=20;    //蛇节高度
         this.position='absolute'; //蛇节定位方式
         this.direct=''; //蛇的移动方向
         //所有蛇节全部信息
         this.body=[[3,2,'red',null],[2,2,'blue',null],[1,2,'blue',null]];
         
         this.setDirect = function(code)
         {
             switch(code)
             {
                 case 37:
                     this.direct='left';
                     break;
                 case 38:
                     this.direct='up';
                     break;
                 case 39:
                     this.direct='right';
                     break;
                 case 40:
                     this.direct='down';
                     break;
             }
         }
         
         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 +'px';
                     this.body[i][3].style.height = this.height +'px';
                     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 'down':
                     this.body[0][1]=this.body[0][1]+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;
                 default:
                     return;
             }
             
             //判断蛇吃到食物
             if(this.body[0][0]==food.x&&this.body[0][1]==food.y)
             {
                 var x=this.body[length][0];
                 var y=this.body[length][1];
                 sum++;
                 document.title='分数:'+sum+'分';
                 this.body.push([x,y,'blue',null]);
                 food.show();
             }
             
             //判断撞墙死
             if(this.body[0][0]<0 || this.body[0][0]>39 ||this.body[0][1]<0 ||this.body[0][1]>19)
             {
                 alert('撞墙死');
                 clearTimeout(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('吃到自己死');
                     clearTimeout(timer);
                     return;
                 }
             }
             
             this.show();
         }
     }
     
     window.onload = function()
     {
         map = new Map(); //实例化地图类对象
         map.show();    //显示地图
         
         
         food=new Food(); //实例化食物类对象
         food.show(); //显示食物
         
         snake = new Snake(); //实例化蛇类对象
         snake.show();
         timer = setInterval('snake.move()',100);
         
         document.onkeydown = function()
         {
             var code;
             if(window.event)
             {
                 code=window.event.keyCode;
             }else
             {
                 code = event.keyCode;
             }
             snake.setDirect(code);
         };
         
         
     }
 </script>
 </head>
 <body>
 
 </body>
 </html>

运行截图:

关键词:JS 面向对象 对象