zoukankan      html  css  js  c++  java
  • 原生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 <html lang="en">
      3 <head>
      4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5 <title>贪吃蛇JavaScript版</title>
      6 <style type="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     <div id="con">
     23         <h1>贪吃蛇JavaScript版</h1>
     24         <div id="Canvas">
     25         </div>
     26 
     27         <div>
     28             <span>分数:<i id="integral">0</i></span>
     29             <span class="r">速度:<i id="speed">200</i></span>
     30         </div>
     31     </div>
     32 
     33 <script type="text/javascript">
     34 var Snake = {
     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         return document.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         var x = this.mapX,
     57             y = this.mapY,
     58             html = ["<table>"];
     59         for(var i=0; i<y; i++){
     60             html.push("<tr>");
     61             for(var j=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         var x,y,id,
     71             that = this,
     72             getMouse = function(){
     73                 for(var i in that.snakeArr){
     74                     if(x==that.snakeArr[i]["x"] && y==that.snakeArr[i]["y"]){   //如果坐标与snake身体重叠重置
     75                         return random();
     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(var i = 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         var body,
    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(var i=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             return alert("GameOver");
    154         }
    155 
    156         for(var i in this.snakeArr){    //碰到身体
    157             if(x==this.snakeArr[i]['x'] && y==this.snakeArr[i]['y']){
    158                 clearInterval(this.timer);
    159                 return alert("GameOver");
    160             }
    161         }
    162     },
    163     keyDirection : function(event){ //键盘控制方向
    164         var event = 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         var pointArr = 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(var i in pointArr){
    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         var pointArr = 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>
  • 相关阅读:
    LeetCode "Palindrome Partition II"
    LeetCode "Longest Substring Without Repeating Characters"
    LeetCode "Wildcard Matching"
    LeetCode "Best Time to Buy and Sell Stock II"
    LeetCodeEPI "Best Time to Buy and Sell Stock"
    LeetCode "Substring with Concatenation of All Words"
    LeetCode "Word Break II"
    LeetCode "Word Break"
    Some thoughts..
    LeetCode "Longest Valid Parentheses"
  • 原文地址:https://www.cnblogs.com/dtdxrk/p/3476369.html
Copyright © 2011-2022 走看看