我的js学习笔记之第一阶段总结即小作业贪吃蛇V0.1

来源：互联网发布：电脑怎么没网络了编辑：程序博客网时间：2024/04/20 06:18

最近看到不少同龄人写的东西，实在自行惭愧，觉得自己落后太多了，一定要加油努力了。
来公司实习也有半个多月了，从对前端技术基本一无所知，到现在可以用EXT写一点点很简单前端，感觉进步还是有那么一点点的，但并没在EXT花费太多精力，主要还把大部分时间都放在对js的学习上。总觉得框架是好东西，但决不能依赖于框架。下一步的学习方向，是JS和EXT并行，并且多花些时间进行对《how tomcat works》的学习，我看了头俩章，觉得这本书讲得真的非常的好，不仅是对WEB服务器有很清楚的讲解，看这本书，对java本身也是很好的提升，希望国内的大牛们也能多出些这些关注技术本身的书,对于我四级都差点不过的人来说，英文书籍看着还是相当困扰的。
自学JS也有差不多10几天了，对语法的学习只是编写程序的第一步，为做练习而用，偶尔看了一个大牛写的js贪吃蛇，今天就抽空写了一个不完全版的还没有可玩性的贪吃蛇，差距是相当明显的，希望可以在以后对js的学习中，逐步完善这个小游戏。
游戏还只是构建中一小部分，构建出游戏的整体框架，可以根据上下左右键改变蛇的运动方向，和对墙壁的进行碰撞检测，
这个游戏的关键就是--根据蛇头的方向计算出下一步的坐标，进而判断，并把蛇身的坐标放到数组中，进而根据数组“重绘”，没用到html5的canvas，毕竟不懂，用js生成一个表格模拟了一个二维数组。
代码如下。

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">*{margin:10px auto;}td{width:12px;height:12px;}</style></head><body onload="Frame.init()"><div id="tit"><h1>贪吃蛇V0.1-按任意键开始</h1></div><div id="div"></div><script type="text/javascript">//屏蔽游览器的事件差异的工具类var EventUtil={    addHandler:function(element,type,handler){        if(element.addEventListener){            element.addEventListener(type,handler,false);        }else if(element.attachEvent){            element.attachEvent("on"+type,handler)        }else{            element["on"+type]=handler;        }    },    removeHandler:function(element,type,handler){        if(element.removeEventListener){            element.removeEventListener(type,handler,false);        }else if(element.detachEvent){            element.detachEvent("on"+type,handler);        }else{            element["on"+type]=null;        }    },    getEvent:function(event){        return event ? event : window.event;    },    getTarget:function(event){        return event.target || event.srcElement;    },    preventDefault:function(event){        if(event.preventDefault){            event.preventDefault();        }else{            event.returnValue=false;        }    },    stopPropagation:function(event){        if(event.stopPropagation){            event.stopPropagation();        }else{            event.cancelBubble=true;        }    }}//界面对象Frame={    e:null,    init:function(){                    //表格的行列数         var rows=25;         var cols=25;         //用表格模拟一个二维数组         var table=document.createElement("table");         //插入行和单元格         for(i=0;i<rows;i++){             var tr=table.insertRow(i);             for(j=0;j<cols;j++){                 var td=tr.insertCell(j);             }         }         table.border='1';         var tab=document.getElementById("div");         tab.appendChild(table);         //绑定键盘监听         EventUtil.addHandler(document,"keydown",function(event){             e=EventUtil.getEvent(event);             Dargon.setDir(e);             Dargon.move(e,table);         });    }}//蛇对象var Dargon={     //定时器     timer:null,     //速度     speed:2000,     //存放蛇身{x:x,y:y},作为绘制蛇的根依据     body:[{x:4,y:4},{x:5,y:4},{x:6,y:4}],     //头的方向,1是右，2是左，3是上，4是下，默认为右     direction:1,     //根据事件，设置蛇头方向     setDir:function(event){         var code=event.keyCode;         switch(code){             case 37:                Dargon.direction=2;                break;             case 38:                Dargon.direction=3;                break;             case 39:                Dargon.direction=1;                break;             case 40:                Dargon.direction=4;                break;            }     },     //蛇的一定，设置定时器     move:function(event,table){         this.timer=setInterval(function(){             Dargon.erase(table);             Dargon.moveOne(event);             Dargon.paint(table);        },this.speed);     },     //定时器驱动任务之一     moveOne:function(event){         if(this.checkNext()==-1){             alert("笨蛋，撞墙了！");             clearInterval(this.timer);             return;         }         //得到下一个点         var nextP=this.nextStep();         var _x=nextP.x;         var _y=nextP.y;         //蛇尾的坐标出栈         this.body.pop()         //把下一个点的想x，y放入数组头部         this.body.unshift({x:_x,y:_y});     },     eraseDot: function(x,y,table){          table.rows[x].cells[y].style.backgroundColor = "";      },     paintDot:function(x,y,table){         table.rows[x].cells[y].style.backgroundColor = "black";      },     //根据数组的值，绘制蛇身     paint:function(table){          for(var i=0;i<this.body.length;i++){              this.paintDot(this.body[i].y,this.body[i].x,table);          }     },     //根据数组的值，擦出蛇身     erase:function(table){          for(var i=0;i<this.body.length;i++){              this.eraseDot(this.body[i].y,this.body[i].x,table);          }     },     //得到下一个点的坐标     nextStep:function(){         var x=this.body[0].x;         var y=this.body[0].y;         if(this.direction==1){             x++;         }         if(this.direction==2){             x--;         }         if(this.direction==3){             y--;         }         if(this.direction==4){             y++;         }         return {x:x,y:y};     },     //碰撞检测，情况并不完全     checkNext:function(){        var point = this.nextStep();         var x = point.x;         var y = point.y;         if(x<0||x>=Frame.rows||y<0||y>=Frame.cols){             return -1;//碰撞边界，游戏结束        }      }}//种子类,还未用到var Bean={     //种子会出现的位置     x:null,     y:null,}</script></body></html>