贪吃蛇案例

来源：互联网发布：《电力网络》编辑：程序博客网时间：2024/06/06 00:43

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

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

点此查看效果

<!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.onkeydown=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();

阅读全文

0 0