js实现简易的贪吃蛇

最新推荐文章于 2020-09-25 14:55:40 发布

wj?

最新推荐文章于 2020-09-25 14:55:40 发布

阅读量361

点赞数

分类专栏： js 文章标签： javaScript html

本文链接：https://blog.csdn.net/qq_26680031/article/details/51305355

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var direction=0;//0 上 1右 2下 3左
        var snake=new Array(); //记录蛇的数组
        var array=new Array(); //记录地图的数组
        var food=null;//记录食物
        var isChange=true;//记录是否可以改变方向
           window.οnlοad=function(){
               var headX,headY;//记录头的横纵坐标
               //获取地图，初始化地图数组
               var tr=document.getElementsByTagName("tr");
               for(var i=0;i<tr.length;i++){
                        array[i]=tr[i].getElementsByTagName("td");
               }
               createFood();//初始化食物位置
               //初始化蛇
               var headY=Math.round(array.length/2)-1;
               var headX=Math.round(array[Math.round(array.length/2)-1].length/2)-1;
               snake[0]=array[headY][headX];
               snake[1]=array[headY+1][headX];
               snake[0].className="snake";
               snake[1].className="snake";
               //开始移动蛇
               var intervalid= setInterval(function(){
                   isChange=true;
                   //根据方向改变头坐标
                    if(direction==1){
                        headX++;
                    }else if(direction==0){
                        headY--;
                    }else if(direction==2){
                        headY++;
                    }else if(direction==3){
                        headX--;
                    }
                   //出界游戏结束
                   if(headX>19 || headY>19 || headX<0 || headY<0){
                       alert("game over");
                       clearInterval(intervalid);
                       return;

                   }

                   var oldfoot=snake[snake.length-1];
                   // 吃到食物
                   if(array[headY][headX]===food){

                       createFood();
                       //将蛇尾不去掉，所有位往后移动一位
                       for(var i=snake.length;i>0;i--){
                           snake[i]=snake[i-1];
                       }
                   }else{
                       oldfoot.className="";
                       //将蛇尾去掉，其他往后移动一位
                       for(var i=snake.length-1;i>0;i--){
                           snake[i]=snake[i-1];
                       }

                   }
                   //添加上新蛇头
                   snake[0]=array[headY][headX];

                   //撞到自身游戏结束
                   for(var i=1 ;i<snake.length;i++){
                       if(snake[0]===snake[i]){
                           alert("game over");
                           clearInterval(intervalid);
                           return;
                       }
                   }

                   snake[0].className="snake";

                },500)

           }
        //监听按钮改变方向
         function key(e){
             var event=window.event||e;
             if(!isChange){ //防止一次移动，改变了2次方向
                 return;
             }
             if(event.keyCode==38 && direction!=2){
                 direction=0;
             }else if(event.keyCode==37 && direction!=1){
                 direction=3;
             }else if(event.keyCode==39 && direction!=3){
                 direction=1;
             }else if(event.keyCode==40 && direction!=0){
                 direction=2;
             }else{
                 return;
             }
             isChange=false;
         }
        function createFood(){
          while(true) {
              food = array[Math.floor(Math.random() * 15)][Math.floor(Math.random() * 15)];
              var flag=true;
              for(var i=0;i<snake.length;i++){
                 if(food===snake[i]){
                    flag=false;
                 }
              }
              if(flag){
                  break
              }

          }
            food.className="food";
        }
    </script>
    <style type="text/css">
        tr td{
            width: 30px;
            height: 30px;
            border: 1px dotted #939393;
        }
        .snake{
            background-color: red;
        }
        .food{
            background-color: #e89500;
        }

    </style>
</head>
<body οnkeydοwn="key(event)">
    <table cellspacing="0" cellpadding="0" style="border: 5px solid black" >
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </table>
    <input type="button" style="background-color: #999999" value="暂停" οnclick="alert('点击确定继续游戏')" />
    <input type="button" style="background-color: #999999" value="重新开始" οnclick="window.location.reload()" />
</body>
</html>

wj?

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现简易的贪吃蛇

var direction=0;//0 上 1右 2下 3左 var snake=new Array(); //记录蛇的数组 var array=new Array(); //记录地图的数组 var food=null;//记录食物 var isChange=true;//记录是否可以改变方向 wind
复制链接

扫一扫