贪吃蛇案例

╰半夏微凉° 2022-06-10 20:15 259阅读 0赞

主要思路还是创建界面的时候你怎么去创建  
我用的表格的方式创建创建20行20列  
每行每列对应相应的class  
规定蛇的初始行走方向向右  
每次走过以后把蛇头添加到蛇身

然后把蛇身的最后一个移除class

# [点此查看效果][Link 1] #

![SouthEast][]

<!doctype html>
    <html lang="en">
    <head>
        <title>Title</title>
        <meta charset="UTF-8">
        <script src="jquery-3.2.1.js"></script>
    
        <style>
            .body{
                height: 500px;
                width: 500px;
                margin: 0px auto;
            }
            tr{
                display: block;
                height: 20px;
    
    
            }
            td{
                display: inline-block;
                width: 20px;
                height: 20px;
                background: blanchedalmond;
                border: 1px solid #fff;
            }
            .snakebody{
                background: blue;
            }
            .snakehead{
                background: red;
            }
            .foot{
                background: green;
            }
        </style>
    </head>
    <body>
    <div class="body" >
        <table id="table">
    
        </table>
    
        <button type="button" id="start">开始</button>
    </div>
    </body>
    <script>
    
    
    </script>
    <script src="snake.js"></script>
    </html>

/** * Created by 韩吉鑫 on 2017/7/22. */ function Snake() {
       this.init();
    
    
    
    }
    Snake.prototype.addviwe=function (x,y) {
        //创建窗口 $("#table").empty();
    
        for(var i=0;i<x;i++){
            $("#table").append("<tr id='tr"+i+"'></tr>");
            console.log(i);
            for(var j=0;j<y;j++){
                $("#tr"+i).append("<td id='"+i+"td"+j+"'></td>");
            };
        }}
    Snake.prototype.addsnake=function (a,b) {
        //创建蛇身 $("#"+b).attr("class","snakehead");
        for(var i=0;i<a.length;i++) {
            $("#" + a[i]).attr("class", "snakebody");
        }
    }
    Snake.prototype.addfood=function () {
        //食物随机出现 var foodx=Math.floor(Math.random()*20);
           var foody=Math.floor(Math.random()*20);
    
        for(var i=0;i<body.length;i++) {
            if((foodx+"td"+foody)== body[i]||(foodx+"td"+foody) == head)
            {
                foodx=Math.floor(Math.random()*20);
                foody=Math.floor(Math.random()*20);
            }
             else {
                $("#"+foodx+"td"+foody).attr("class","foot");
            }
            add=foodx+"td"+foody;
                }
       console.log(foodx);
    }
    Snake.prototype.snakemove=function (e) {
        //开始移动并检查按键 var a=body.pop();
             $("#"+a).removeClass("snakebody");
             body.unshift(head);
            if(e=="right"){
                head=parseInt(head.split("td")[0])+"td"+(parseInt(head.split("td")[1])+1);
            }if(e=="left"){
                head=parseInt(head.split("td")[0])+"td"+(parseInt(head.split("td")[1])-1);
            }
            if(e=="up"){
                head=(parseInt(head.split("td")[0])-1)+"td"+(parseInt(head.split("td")[1]));
            }
            if(e=="down"){
                head=(parseInt(head.split("td")[0])+1)+"td"+(parseInt(head.split("td")[1]));
            }
            if(head==add){
                body.push(a);
                this.addfood();
            }
                this.send(body,head);
                this.addsnake(body,head);
    }
    var int=null;
    Snake.prototype.send=function (body,head) {
        var a=parseInt(head.split("td")[0]);
        var b=parseInt(head.split("td")[1]);
        if(a<0||a>19||b<0||b>19||body.indexOf(head)>=0){
            this.init();
            window.clearInterval(int);
            $("#start").attr("disabled",false);
        }
    }
    
    Snake.prototype.start=function () {
        $("#start").attr("disabled",true);
        var self=this;
        int =setInterval(function () {
            self.snakemove(e);
        },200);
        document.οnkeydοwn=function (event) {
            var a = event || window.event || arguments.callee.caller.arguments[0];
            if(a.keyCode==37&&e!="right") {
                e = "left";
            }else if(a.keyCode==38&&e!="down"){
                e="up";
            }else if(a.keyCode==39&&e!="left"){
                e="right";
            }else if(a.keyCode==40&&e!="u"){
                e="down";
            }
        }
    }
    Snake.prototype.init=function () {
    
        e="right";
        body = [];
        body.unshift("0td0");
        body.unshift("0td1");
        body.unshift("0td2");
        head = "0td3";
        this.addviwe(20,20)
        this.addsnake(body,head);
        this.addfood();
        var self=this;
       $(document).keydown(
           function (evt) {
               if (evt.keyCode==13){
                   window.clearInterval(int);
                   self.start();
    
               }
           }
       )
    }
        var han = new Snake();

[Link 1]: https://hanjixin.github.io/hanjixin/snake/index.html
[SouthEast]: /images/20220611/5458b2a0d0f2454186d4956fac0a5339.png