我的js学习笔记之第一阶段总结即小作业贪吃蛇V0.1
2011-12-27 19:56
645 查看
最近看到不少同龄人写的东西,实在自行惭愧,觉得自己落后太多了,一定要加油努力了。
来公司实习也有半个多月了,从对前端技术基本一无所知,到现在可以用EXT写一点点很简单前端,感觉进步还是有那么一点点的,但并没在EXT花费太多精力,主要还把大部分时间都放在对js的学习上。总觉得框架是好东西,但决不能依赖于框架。下一步的学习方向,是JS和EXT并行,并且多花些时间进行对《how tomcat works》的学习,我看了头俩章,觉得这本书讲得真的非常的好,不仅是对WEB服务器有很清楚的讲解,看这本书,对java本身也是很好的提升,希望国内的大牛们也能多出些这些关注技术本身的书,对于我四级都差点不过的人来说,英文书籍看着还是相当困扰的。
自学JS也有差不多10几天了,对语法的学习只是编写程序的第一步,为做练习而用,偶尔看了一个大牛写的js贪吃蛇,今天就抽空写了一个不完全版的还没有可玩性的贪吃蛇,差距是相当明显的,希望可以在以后对js的学习中,逐步完善这个小游戏。
游戏还只是构建中一小部分,构建出游戏的整体框架,可以根据上下左右键改变蛇的运动方向,和对墙壁的进行碰撞检测,
这个游戏的关键就是--根据蛇头的方向计算出下一步的坐标,进而判断,并把蛇身的坐标放到数组中,进而根据数组“重绘”,没用到html5的canvas,毕竟不懂,用js生成一个表格模拟了一个二维数组。
代码如下。
来公司实习也有半个多月了,从对前端技术基本一无所知,到现在可以用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>
相关文章推荐
- ORACLE的学习笔记第一阶段总结
- 大数据课程体系-学习笔记-第一阶段-Java Reflect
- Spring入门学习——第一阶段学习总结图
- 惠普第一阶段学习总结
- js学习笔记(1)之document.write()方法使用总结
- node第一阶段学习笔记
- 学习贪吃蛇JS项目实战笔记2
- 常用JS总结2-学习笔记
- java基础第一阶段的学习总结。
- Coursera吴恩达机器学习课程 总结笔记及作业代码——第1,2周
- Coursera吴恩达机器学习课程 总结笔记及作业代码——第6周有关机器学习的小建议
- Coursera吴恩达机器学习课程 总结笔记及作业代码——第3周逻辑回归
- linux内核学习初笔记(2)u-boot执行第一阶段为什么不移动bss段到sdram
- 百度前端技术学院,第一阶段学习笔记
- 【自考】第一阶段学习总结
- 我的FPGA之路 - 入门篇(暨我的第一阶段学习总结 )
- (44)Java学习笔记——IO流 / 分阶段总结和练习
- 大数据课程体系-学习笔记-第一阶段-Java Base
- 购物网第一阶段总结笔记3:友情链接模块之 删除友情链接 和 分页控件的使用
- 购物网第一阶段总结笔记6:新闻管理模块之添加新闻(kindeditor在线编辑器的使用)