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

最新推荐文章于 2020-09-13 20:27:27 发布

songzheng_741

最新推荐文章于 2020-09-13 20:27:27 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签：作业 function table null 游戏 xhtml

本文链接：https://blog.csdn.net/songzheng_741/article/details/7106982

版权

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

最近看到不少同龄人写的东西，实在自行惭愧，觉得自己落后太多了，一定要加油努力了。
来公司实习也有半个多月了，从对前端技术基本一无所知，到现在可以用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 οnlοad="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>

songzheng_741

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的js学习笔记之第一阶段总结即小作业贪吃蛇V0.1

最近看到不少同龄人写的东西，实在自行惭愧，觉得自己落后太多了，一定要加油努力了。来公司实习也有半个多月了，从对前端技术基本一无所知，到现在可以用EXT写一点点很简单前端，感觉进步还是有那么一点点的，但并没在EXT花费太多精力，主要还把大部分时间都放在对js的学习上。总觉得框架是好东西，但决不能依赖于框架。下一步的学习方向，是JS和EXT并行，并且多花些时间进行对《how tomcat
复制链接

扫一扫