原生JavaScript贪吃蛇

在实例开发过程中还是能认识到很多不足的，并且加强了一些基础。

简单写一下制作过程：

1.创建画布

2.创建蛇和老鼠坐标不能重叠

3.让蛇移动起来

4.添加死亡方法

5.添加转点坐标和方向

6.添加吃老鼠的方法

整个开发的难点有几个：

1.蛇身体的转向

2.吃老鼠添加蛇长度

总结：

1.原来玩的FC贪吃蛇100合一的小游戏其实就是根据画布大小/蛇的移动速度/蛇的长度来设置关卡。

2.最后测试时老有个bug就是删除了最后的转点但是蛇尾没转过去，一直找不到原因，虽然最后修复了，但不是很满意。

在线测试地址：http://jsfiddle.net/dtdxrk/aL9DF/embedded/result/

1 <!DOCTYPE HTML>
2 <htmllang="en">
3 <head>
4 <metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
5 <title>贪吃蛇JavaScript版</title>
6 <styletype="text/css">
7 *{margin:0;padding:0;line-height:1;}
8 body{font-family:Arial, 'Microsoft Yahei', Simsun, sans-serif;background-color:#7bef70;}
9 #con{width:400px;margin:20px auto;}
10 #con span.r{float:right;}
11 #con h1{text-align:center;}
12 #Canvas{margin:20px auto;background-color:#f4f9f5;overflow:hidden;}
13 #Canvas table{width:100%;border:2px solid #000;border-collapse:collapse;}
14 #Canvas table td{border-collapse:collapse;border:1px solid #bfcde9;width:8px;height:8px;}
15 #Canvas table td.SnakeBody{background-color:#82f170}
16 #Canvas table td.SnakeHead{background-color:#4ca72e;}
17 #Canvas table td.Mouse{background-color:red;}
18     /*#Canvas table td.SnakeBody, #Canvas table td.SnakeHead, #Canvas table td.Mouse{border:1px solid #000;*border:0;}*/
19 </style>
20 </head>
21 <body>
22     <divid="con">
23         <h1>贪吃蛇JavaScript版</h1>
24         <divid="Canvas">
25         </div>
26
27         <div>
28             <span>分数：<iid="integral">0</i></span>
29             <spanclass="r">速度：<iid="speed">200</i></span>
30         </div>
31     </div>
32
33 <scripttype="text/javascript">
34 varSnake={35 time :"",36 mapX :40,37 mapY :40,38 speed :200,39 mousePos : {},//老鼠坐标
40 snakeStartPos : {"x":10,"y":20},//蛇起始位置
41 snakeDirection :"Right",//起始方向
42 snakeLen :5,//长度
43 snakeArr : [],//蛇身体的坐标
44 pointArr : [],//转点数组
45 $ :function(id){46         returndocument.getElementById(id);47 },48 init :function(){49         this.CreateMap();50         this.CreateSnake();51         this.CreateMouse();52 document.onkeydown= this.keyDirection;53         this.timer=setInterval(this.MoveSnake,this.speed);54 },55 CreateMap :function(){//创建画布
56         varx= this.mapX,57 y= this.mapY,58 html=["<table>"];59         for(vari=0; i<y; i++){60 html.push("<tr>");61             for(varj=0; j<x; j++){62 html.push("<td id='map_"+j+"_"+i+"'></td>");63 }64 html.push("</tr>");65 }66 html.push("</table>");67         this.$("Canvas").innerHTML=html.join("");68 },69 CreateMouse :function(){//创建老鼠
70         varx,y,id,71 that= this,72 getMouse= function(){73                 for(variinthat.snakeArr){74                     if(x==that.snakeArr[i]["x"]&&y==that.snakeArr[i]["y"]){//如果坐标与snake身体重叠重置
75                         returnrandom();76 }77 }78 that.mousePos.x=x;79 that.mousePos.y=y;80 that.$("map_"+x+"_"+y).className= "Mouse";81 },82 random= function(){83 x=Math.floor(Math.random()*(that.mapX-1));84 y=Math.floor(Math.random()*(that.mapY-1));85 getMouse();86 };87
88 random();89 },90 CreateSnake :function(){91         var$= this.$,92 snakeArr= this.snakeArr,93 snakeLen= this.snakeLen,94 posX= this.snakeStartPos.x,95 posY= this.snakeStartPos.y,96 n=snakeLen+posX;97         for(vari=posX; i<n; i++){98             if(i==n-1){99 $("map_"+i+"_"+posY).className= "SnakeHead";100 }else{101 $("map_"+i+"_"+posY).className= "SnakeBody";102 }103 snakeLen--;104 snakeArr[snakeLen]=[];105 snakeArr[snakeLen]["x"]=i;106 snakeArr[snakeLen]["y"]=posY;107 snakeArr[snakeLen]["d"]= this.snakeDirection;108 }109 },110 MoveSnake :function(){111         varbody,112 _d,113 snakeLen=Snake.snakeLen,114 snakeArr=Snake.snakeArr;115
116 Snake.$('map_'+snakeArr[snakeLen-1]['x']+'_'+snakeArr[snakeLen-1]['y']).className= "";//蛇尾去除css样式
117         for(vari=0,len=snakeLen; i<len; i++){118 body=snakeArr[i];119             if(i==0) {120 Snake.$("map_"+body['x']+"_"+body['y']).className= "SnakeBody";121 }122 _d=Snake.getPoint(body['x'],body['y']);123             if(_d) body['d']=_d;//获取转点改变蛇的方向
124
125             //bug 删除转点的时候蛇尾没有转过来
126             if(i==snakeLen-1 &&Snake.pointArr.length>0) Snake.delPoint(body['x'],body['y']);//删除转点
127
128             switch(body['d']){129                 case "Left":130                     if(i==0)Snake.GameOver(body['x']-1,body['y']), Snake.eatMouse(body['x']-1,body['y']);131 body['x']--;132                     break;133                 case "Up":134                     if(i==0)Snake.GameOver(body['x'],body['y']-1), Snake.eatMouse(body['x'],body['y']-1);135 body['y']--;136                     break;137                 case "Right":138                     if(i==0)Snake.GameOver(body['x']+1,body['y']), Snake.eatMouse(body['x']+1,body['y']);139 body['x']++;140                     break;141                 case "Down":142                     if(i==0)Snake.GameOver(body['x'],body['y']+1), Snake.eatMouse(body['x'],body['y']+1);143 body['y']++;144                     break;145 }146
147 }148 Snake.$("map_"+snakeArr[0]['x']+"_"+snakeArr[0]['y']).className= "SnakeHead";149 },150 GameOver :function(x,y){//游戏结束
151         if(x<0 ||y<0 ||x>this.mapX-1 ||y>this.mapY-1){//超出边界
152 clearInterval(this.timer);153             returnalert("GameOver");154 }155
156         for(variin this.snakeArr){//碰到身体
157             if(x==this.snakeArr[i]['x']&&y==this.snakeArr[i]['y']){158 clearInterval(this.timer);159                 returnalert("GameOver");160 }161 }162 },163 keyDirection :function(event){//键盘控制方向
164         varevent=event||window.event,165 key=event.which||event.keyCode,166 _snakeDirection=Snake.snakeDirection,167 pointArr=Snake.pointArr,168 pointNum=pointArr.length,169 snakeArr=Snake.snakeArr,170 bool= true;171         switch(key){172             case 37:173                 if(_snakeDirection=="Left"){174 bool= false;175 }else{176 Snake.snakeDirection="Left";177 }178                 break;179             case 38:180                 if(_snakeDirection=="Up"){181 bool= false;182 }else{183 Snake.snakeDirection="Up";184 }185                 break;186             case 39:187                 if(_snakeDirection=="Right"){188 bool= false;189 }else{190 Snake.snakeDirection="Right";191 }192                 break;193             case 40:194                 if(_snakeDirection=="Down"){195 bool= false;196 }else{197 Snake.snakeDirection="Down";198 }199                 break;200 }201         if(bool){202             if(pointNum>0){203                 if(pointArr[pointNum-1]['x']!=snakeArr[0]['x']||pointArr[pointNum-1]['y']!=snakeArr[0]['y']) Snake.CreatePoint();204 }else{205 Snake.CreatePoint();206 }207 }208 },209 CreatePoint :function(){//创建转点
210         varpointArr= this.pointArr,211 pointNum=pointArr.length;212 pointArr[pointNum]=[];213 pointArr[pointNum]['x']= this.snakeArr[0]['x'];214 pointArr[pointNum]['y']= this.snakeArr[0]['y'];215 pointArr[pointNum]['d']= this.snakeDirection;216 },217 getPoint :function(x,y){218         var_d= "",219 pointArr=Snake.pointArr;220         for(variinpointArr){221             if(x==pointArr[i]['x']&&y==pointArr[i]['y']){222 _d=pointArr[i]['d'];223 }224 }225         return_d;226 },227 delPoint :function(x,y){//删除转点
228         varpointArr=Snake.pointArr;229         if(x==pointArr[0]['x']&&y==pointArr[0]['y']){230             var_a=Snake.snakeArr[Snake.snakeArr.length-2],231 _b=Snake.snakeArr[Snake.snakeArr.length-1];232             if(_a['x']==_b['x']&&_a['y']==_b['y']) _b['d']=_a['d'];233 Snake.pointArr.shift();234 }235 },236 eatMouse :function(x,y){237         if(x==this.mousePos.x&&y==this.mousePos.y){238             var_x, _y,239 _tail= this.snakeArr[this.snakeLen-1];240             this.snakeArr[this.snakeLen]=[];241             this.snakeArr[this.snakeLen]['x']=_tail['x'];242             this.snakeArr[this.snakeLen]['y']=_tail['y'];243             this.snakeArr[this.snakeLen]['d']=_tail['d'];244             this.snakeLen++;245             this.speed-=5;246 clearInterval(this.timer);247             this.CreateMouse();248             this.integral();249             this.timer=setInterval(this.MoveSnake,this.speed);250 }251 },252 integral :function(){253         this.$("integral").innerHTML=Number(this.$("integral").innerHTML)+5;254         this.$("speed").innerHTML=this.speed;255 }256 }257
258 Snake.init();259 </script>
260 </body>
261 </html>

原生JavaScript贪吃蛇相关推荐

JavaScript 贪吃蛇游戏的实现
JavaScript 贪吃蛇游戏的实现前言游戏介绍:贪吃蛇游戏是一款经典小游戏,既简单又耐玩.通过控制蛇头方向吃蛋,使得蛇变长,从而获得积分. 游戏玩法:上下左右控制蛇的方向,寻找吃的东西,每吃一 ...
js原生实现贪吃蛇（解决连续键盘事件）
分析把贪吃蛇这个游戏当做一个对象,它又由以下部分组成:1.食物; Food (宽,高,颜色,坐标xy)2.小蛇; Snake (宽,高,颜色,坐标xy,小蛇移动)3.游戏规则:Game(地图map) ...
JavaScript贪吃蛇
这篇文章不简单!! 一.创建html结构二.创建表格三.创建蛇头.蛇身四.创建食物五.让蛇动起来六.控制蛇的方向七.完整代码 index.html Game.js Snake.js Foo ...
原生JS实现贪吃蛇游戏
原生JS实现贪吃蛇游戏贪吃蛇游戏(原生JavaScript) 贪吃蛇游戏思路分析游戏思想: 面向对象的思想三个js文件分别代表三个对象三个对象相互独立,在HTML中控制全局使用面向对象思想的 ...
JavaScript写贪吃蛇游戏，代码思路都有，想学的自己看
JavaScript写一个贪吃蛇的游戏(附源码) javascript群内每日课题-今日课题:JavaScript写一个贪吃蛇的游戏 PS:最近群内很多伙伴想要做游戏学学,练练自己的JavaScrip ...
面向对象编程java小游戏_JavaScript面向对象编程小游戏---贪吃蛇代码实例
1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1-2 维护非常方便并且成本较低. 2 这个demo是采用了面向 ...
JavaScript原生实现《贪吃蛇》
概述 JavaScript原生实现<贪吃蛇>,每吃掉一个食物,蛇的身体会变长,食物会重新换位置. 详细代码下载:http://www.demodashi.com/demo/10728.h ...
原生JavaScript抒写——贪吃蛇小游戏
原生JavaScript抒写--贪吃蛇小游戏文章目录原生JavaScript抒写--贪吃蛇小游戏前言一.需求分析二.效果展示三.具体逻辑代码分析 1.首先创建一个html文件,然后我们利用 ...
原生JavaScript小项目之贪吃蛇小游戏（附源代码）
公开课链接渡一教育贪吃蛇连接 <body><div class="content"><div class="btn startBtn&quo ...
eclipse javascript_原生js实现贪吃蛇游戏_javascript技巧
更新时间:2020年10月26日 11:46:36 作者:leisure-ZL 这篇文章主要为大家详细介绍了原生js实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴 ...

原生JavaScript贪吃蛇

原生JavaScript贪吃蛇相关推荐

最新文章

热门文章